Narrowly Preventing Mayhem

    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

    Keywords

    none

    Install

    npm i rotary-text

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    MIT

    Last publish

    Collaborators

    • markrabey