Off Canvas Menu
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:
... ... ... Text Part 1 Text Part 2 Text Part 3 Text Part 4
Options
A few options are available:
displayDuration
(ms) Default:1000
- time each text item remains visible before triggering the next cycleanimationDuration
(ms) Default:450
- the time the animations takeitemSelector
Default:.rotary__text
- the itemsactiveItemClass
Default:rotary__text--active
- class given to the active itemrotations
Default:1
- number of times to show each item. Setting to0
will cause the text to rotate infinetlyanimation
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