Watch Dogs Like Text Shuffle Animation – swapdogs.js

Category: Animation , Javascript , Text | July 28, 2017
AuthorPriler
Last UpdateJuly 28, 2017
LicenseMIT
Tags
Views1,240 views
Watch Dogs Like Text Shuffle Animation – swapdogs.js

swapdogs.js is a pure JavaScript library that helps you create watch dogs like text animations from an array of text strings.

How to use it:

Create a container element for the text.

<span id="demo">WATCH DOGS</span>

Load the minified version of the swapdogs.js at the end of the document so the pages load faster.

<script src="swapdogs.min.js"></script>

Create a new SwapDogs object and specify an array of text strings you want to rotate through.

var sd = new SwapDogs(
    document.getElementById('demo'),
    {
      autoInit: true,
      words: ["String 1", "String 2", "String 3"]
    }
);

Specify the character set from which you want to pick for the text shuffle animation.

var sd = new SwapDogs(
    document.getElementById('demo'),
    {
      autoInit: true,
      words: ["String 1", "String 2", "String 3"],
      letters: 'abcdefghijklmnopqrstuvwxyz'
    }
);

Set the interval in milliseconds.

var sd = new SwapDogs(
    document.getElementById('demo'),
    {
      autoInit: true,
      words: ["String 1", "String 2", "String 3"],
      letters: 'abcdefghijklmnopqrstuvwxyz',
      interval: 4000,
      interval2: 40
    }
);

You Might Be Interested In:


Leave a Reply