❤
npm
Sign UpSign In

rotary-text

0.1.0 • Public • Published

Off Canvas Menu

Gitter chat

devDependencies MIT license Issues

Click here for a demo.

What is it?

A simple JavaScript for animated text.

Installation

Bower

bower install rotary-text --save

NPM

npm install rotary-text --save

After Bower or NPM install, copy the files from dist/css and dist/js to your project's assets folder.

Without a Package Manager

Clone repo, or download zip.

Usage

Example using default options:

<html>
  <head>
    ...
        <link rel="stylesheet" href="path/to/css/rotary-text.min.css">
        ...
  </head>
  <body>
        ...
    <div class="content">
 
      <div class="rotary" id="rotary">
        <div class="rotary__text">
          Text Part 1
        </div>
 
        <div class="rotary__text">
          Text Part 2
        </div>
 
        <div class="rotary__text">
          Text Part 3
        </div>
 
        <div class="rotary__text">
          Text Part 4
        </div>
      </div>
    </div>
 
    <script src="path/to/js/rotary-text.min.js"></script> 
 
    <script type="text/javascript">
      var rotaryText = new Rotary('rotary', {
        displayDuration: 1500,
        animationDuration: 450,
        animation: 'fade',
        rotations: 1,
        holdOnEnd: false
      });
    </script> 
  </body>
</html>

Options

A few options are available:

  • displayDuration(ms) Default: 1000 - time each text item remains visible before triggering the next cycle
  • animationDuration(ms) Default: 450 - the time the animations take
  • itemSelector Default: .rotary__text - the items
  • activeItemClass Default: rotary__text--active - class given to the active item
  • rotations Default: 1 - number of times to show each item. Setting to 0 will cause the text to rotate infinetly
  • animation Default: fade - More animation options coming soon!
  • holdOnEnd Default: true - continue to display the last item after all rotations are complete

Development

Feel free to do what you'd like with this. Clone or fork the repo, type npm install and have your way with it. Use grunt build to compile Less to CSS, and lint and minify JS, and update the dist and demo folders. Use grunt default to run the build, and continue to watch the Less and JavaScript files for changes.

Rotary Text © 2015, Mark Rabey. Released under the MIT License.
Authored and maintained by Mark Rabey

markrabey.com  ·  GitHub @MarkRabey  ·  Twitter @MarkRabey

Dependents (0)

Package Sidebar

Install

npm i rotary-text

Repository

github.com/MarkRabey/rotary-text

Homepage

github.com/MarkRabey/rotary-text#readme

Weekly Downloads

0

Version

0.1.0

License

MIT

Last publish

Collaborators

  • markrabey
Try on RunKit
Report malware