Giter Site home page Giter Site logo

dynamo.js's Introduction

Dynamo.js

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

See it in action: http://prezjordan.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

  • 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)

Contributing

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.
  • wait.

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.


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

dynamo.js's People

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.