dynamo

A dead-simple way to generate dynamic bits of HTML and add subtle effects to your content.

About

Dynamo is the simple way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage. It was created by this guy and can be found on GitHub.

Usage

Implementing dynamo with your content involves little setup. Wrap your text in a container, specify the lines you want to cycle through, and start the engine with $('#target').dynamo(). Dynamo works with the help of jQuery. For example:

<p>I wish I could change the text here.</p>

I wish I could change the text here.

<p>I wish I could <span class="dynamo" data-lines="modify,mutate,morph,switch">change</span> the text here.</p>

I wish I could change the text here.

<p>This element is <span class="dynamo" data-lines="not paused." data-pause="true">paused</span></p>

This element is paused.

<p><span id="manual_example" class="dynamo" data-pause="true" data-lines="[click again!],[and again!],[once more!]">[click here!]</span></p>

[click here!]

Later on we have the following...

<script type="text/javascript">
  $('#manual_example').click(function() {
    $(this).dynamo_trigger();
  });
</script>

And launch it with... (this is done automatically for you if your include tag is at the end of </body>, but you can use .dynamo() on any target)

<script type="text/javascript">
$(function() {
  $('.dynamo').dynamo();
});
</script>

View our source (it's chock full of examples)

Options

Check out these limited options

data-lines: the bits of text (comma-separated) that cycle. Original text not included.
data-speed: the speed of the transition (default: 350ms)
data-delay: the delay between cycles (default: 3000ms)
data-center: center the text in the dynamo container (default: false)
data-delimiter: change the character (or string) used to separate your bits of text (default: ,)
data-pause: sets up the dynamo, but does not automatically transition (default: false)