Cycles through bits of text in place
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test newline EOF Jul 13, 2013
.gitignore
.travis.yml
LICENSE.txt newline EOF Jul 13, 2013
Makefile Better build process Jul 13, 2013
README.md Removed old references to prezjordan - fixes #17 Aug 28, 2013
dynamo.js Allow for the pausing of dynamo elements by setting the 'pause' data … Mar 17, 2014
dynamo.min.js
package.json

README.md

Dynamo.js

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

build status

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

How does it work?

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>

Manual Firing

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.

Options

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.

Contributing

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

  • Install the development dependencies (npm install)
  • Checkout a feature branch (git checkout -b feature/something-cool)
  • Test your changes (npm test)
  • Commit your changes
  • Push your changes (git push origin feature/something-cool)
  • Open 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!

About

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