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

You can customize dynamo using data attributes:

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)
data-callback: a function to be called each time the dynamo container completes a full cycle

Alternatively, you can pass an options hash - which takes precedence over data attributes - when calling .dynamo() like so:

$('#mytarget').dynamo({
    delay: 1000,
    lines: ['next text', 'after that', 'even later'],
    callback: function() { console.log('All items have been shown') }
});

IMPORTANT: Since dynamo automatically initializes DOM elements with class .dynamo, you will not be able to pass options to these elements (data attributes will still work, though). This is because dynamo prevents the user from initializing a dynamo container more than once.