Animated Headline

Made with animated headline, Now you can animate words and phrases.

Plugin Documentation

Usage

JS

In order to use this plugin on your page you will need to include the following script in the page.

copy

<script src="assets/libs/animated-headline/js/modernizr.js"></script>
<script src="assets/libs/animated-headline/js/main.js"></script>

CSS

In order to use this plugin on your page you will need to include the following css in the page.

copy

<link rel="stylesheet" href="assets/libs/animated-headline/css/style.css" />

Examples

  1. Loading Bar

    My favourite food is pizza sushi steak

    copy
    
<h1 class="cd-headline loading-bar">
    <span>My favourite food is</span>
    <span class="cd-words-wrapper">
            <b class="is-visible">pizza</b>
            <b>sushi</b>
            <b>steak</b>
    </span>
</h1>
  2. Zoom

    My favourite food is pizza sushi steak

    copy
    
<h1 class="cd-headline zoom">
    <span>My favourite food is</span>
    <span class="cd-words-wrapper">
            <b class="is-visible">pizza</b>
            <b>sushi</b>
            <b>steak</b>
    </span>
</h1>
  3. Type

    My favourite food is pizza sushi steak

    copy
    
<h1 class="cd-headline letters type">
    <span>My favourite food is</span> 
    <span class="cd-words-wrapper waiting">
        <b class="is-visible">pizza</b>
        <b>sushi</b>
        <b>steak</b>
    </span>
</h1>
Summary