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
- For the page title text:
- <h1 class="wow fadeInLeft" data-wow-delay=".4s">Page Title Text Here</h1>
- For the paragraph text:
- <p class="wow fadeInRight" data-wow-delay=".8s">Page Title Text Here</h1>
- To animate a block to slide in, apply the class to the div:
- <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
- <div class="contentBox3a wow fadeInLeft" data-wow-delay=".2s">
- <p class="center">
- <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.2s"
src="images/4465.jpg">
- </p>
- <h3 class="alternate2">First Box</h3>
- <p>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.</p>
- </div>
HTML for the second box
- <div class="contentBox3b wow fadeInLeft" data-wow-delay=".4s">
- <p class="center">
- <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.4s"
src="images/4475.jpg">
- </p>
- <h3 class="alternate2">Second Box</h3>
- <p>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.</p>
- </div>
HTML for the third box
- <div class="contentBox3c wow fadeInLeft" data-wow-delay=".6s">
- <p class="center">
- <img alt="" class="image-catalog wow fadeInDown" data-wow-delay="1.6s"
src="images/4480.jpg">
- </p>
- <h3 class="alternate2">Third Box</h3>
- <p>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.</p>
- </div>
Some Rules of the Road:
- If you do not want the animation, delete the "wow" and effect name from the class, and delete the data-wow-delay time.
- Animations are applied to "block level" elements.
- A block level element can have multiple classes applied. You will need to add multiple classes by hand to the code.
- These effects are subtle, but don't go overboard. Just like with the old animated javascripts from the past, like those falling snowflakes or hopping bunnies, just
becaused you can doesn't mean you should.
- If this trend passes (and it probably will eventually), delete the animations.
[Credit for this application: Animate.css from https://daneden.me/animate, Copyright 2014 Daniel Eden] If you want more, visit the site and look through the
instructions.