Simple animated headlines!
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist Initial commit Feb 22, 2017
src Initial commit Feb 22, 2017
.gitignore Initial commit Feb 22, 2017
README.md
bower.json Update bower.json Apr 23, 2017
package.json Initial commit Feb 22, 2017
webpack.mix.js Initial commit Feb 22, 2017

README.md

jQuery Animated Headlines

Animated headlines, with interchangeable words that replace one another through CSS transitions.

Installation

npm

npm install jquery-animated-headlines

bower

bower install jquery-animated-headlines

Default Usage

Include the css in your head.

<link rel="stylesheet" src="dist/css/jquery.animatedheadline.css">

Use the following markup.

<div class="selector">
    <h1 class="ah-headline">
        <span>My favorite food is</span>
        <span class="ah-words-wrapper">
            <b class="is-visible">pizza</b>
            <b>sushi</b>
            <b>steak</b>
        </span>
    </h1>
</div>

Finally, initialize the plugin.

<script src="dist/js/jquery.animatedheadline.min.js"></script>
<script>
    $(function() {
        $('.selector').animatedHeadline();
    })
</script>

Advanced Usage

The plugin provides multiple options to customize the animation type and delay.

<script>
    $(function() {
        $('.selector').animatedHeadline({
            animationType: 'type'
        });
    })
</script>

Options

It is recommended to use the default delay options. Because of this, I won't list them below. See src/js/jquery.animatedheadline.js for a complete list of options.

Name Type Default Description
animation-type string 'rotate-1' Type of animation used. Options: 'rotate-1', 'rotate-2', 'rotate-3', 'type', 'loading-bar', 'slide', 'clip', 'zoom', 'scale', and 'push'

License

jQuery Animated Headlines is open-sourced software licensed under the MIT license.