Text Animations

We're added some text animations in some of our templates for a bit of extra visual fun. It involves a bit of Javascript and some fun CSS3 styles to control the animation and directions. We have included four effects: zoomIn, fadeInLeft, fadeInRight, and fadeInDown. You can adjust the direction and the timed delay as shown below.

html
  1. For the page title text:
  2. <h1 class="wow fadeInLeft" data-wow-delay=".4s">Page Title Text Here</h1>
  3. For the paragraph text:
  4. <p class="wow fadeInRight" data-wow-delay=".8s">Page Title Text Here</h1>
  5. To animate a block to slide in, apply the class to the div:
  6. <div class="contentBox3a wow fadeInLeft" data-wow-delay=".2s">

The animated effect is only shown when the area comes into view on the screen. The effect only happens once unless you reload the page.

To give you a better example of how this works, this tutorial will place a row with 3 columns onto the page, with each sliding into view. Then we'll have an image drop down and the heading zoom in. Then we'll show you the code for how it's done. Refresh the page, watch the animation, and then let's play.

First Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus. Suspendisse cursus rutrum lacus non faucibus.

Second Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus. Suspendisse cursus rutrum lacus non faucibus.

Third Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus. Suspendisse cursus rutrum lacus non faucibus.

HTML for the first box
  1. <div class="contentBox3a wow fadeInLeft" data-wow-delay=".2s">
  2. <p class="center">
  3. <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.2s" src="images/4465.jpg">
  4. </p>
  5. <h3 class="alternate2">First Box</h3>
  6. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc
  7. vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus.
  8. Suspendisse cursus rutrum lacus non faucibus.</p>
  9. </div>
HTML for the second box
  1. <div class="contentBox3b wow fadeInLeft" data-wow-delay=".4s">
  2. <p class="center">
  3. <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.4s" src="images/4475.jpg">
  4. </p>
  5. <h3 class="alternate2">Second Box</h3>
  6. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc
  7. vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus.
  8. Suspendisse cursus rutrum lacus non faucibus.</p>
  9. </div>
HTML for the third box
  1. <div class="contentBox3c wow fadeInLeft" data-wow-delay=".6s">
  2. <p class="center">
  3. <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.6s" src="images/4480.jpg">
  4. </p>
  5. <h3 class="alternate2">Third Box</h3>
  6. <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sed ipsum purus. Nunc gravida nisl eu nunc
  7. vulputate, id dignissim enim lobortis. Cras a elementum est. Etiam semper mauris vitae metus vehicula luctus.
  8. Suspendisse cursus rutrum lacus non faucibus.</p>
  9. </div>
Some Rules of the Road:

[Credit for this application: Animate.css from http://daneden.me/animate, Copyright 2014 Daniel Eden] If you want more, visit the site and look through the instructions.