a dead-simple way to add dynamic bits of content to your webpage

See it in action: http://prezjordan.github.com/dynamo.js/

dynamo.js takes any portion of text and allows you to cycle through different content. Use it to add subtle effects to your webpage, or to make a particular section pop.

<p>I wish I could change one of these words.</p>

<p>I wish I could <span class="dynamo" data-lines="alter,edit,mutate,morph">change</span> one of these words.</p>

and activate it like so: (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>

By default, dynamo.js will transition elements with a period specified by data-delay. If you wish to fire off a transition manually (only once), you may do so with $('#mytarget').dynamo_trigger(). Combine with a data-pause="true" property to create truly manual dynamo elements.

Using data attributes:

• data-lines: the bits of content you want to cycle through (not including the original content)
• data-speed: the speed of the transition (default: 350ms)
• data-delay: the delay between transitions (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

Using an options hash:

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

$('#mytarget').dynamo({
    speed: 100,
    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.

If you want to make a change to dynamo (the code is very small and very approachable!) please follow these steps

• fork it.
• commit your changes. (use proper git etiquette and work off a branch !!)
• submit a pull request.

I'm pretty quick with responses, so I'll likely shoot you a comment as confirmation. As for minifying - don't worry about it, I'll take care of that. Thanks for showing interest!

dynamo.js was inspired by a tagline rails app I had been working in the past, which gives you the ability to generate a random tagline on your webpage.

© 2013 Jordan Scales | MIT Licensed | See LICENSE.txt