Animate Elements In When They Come Into View - jQuery CSS3 Animate It Plugin

CSS3 Animate It is a jQuery plugin that makes use of CSS3 animations to animate Html elements in when they come into view.

Built-in Animations:

• Bounce
• Fade
• Grow
• Shake
• Rotate
• Rollin
• Wiggle
• Swing
• Wobble
• Pulse
• Flip

How to use it:

1. Include the required animations.css in the head section of your web page.

<link rel="stylesheet" href="css/animations.css">

2. Include the JQuery javascript library and jQuery CSS3 animate it plugin at the end of the web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='js/css3-animate-it.js'></script>

3. Add the CSS class to your Html elements as follows.

<h2 class="animated bounceIn">It Works!</h2>
<h2 class="animated bounceInDown">It Works!</h2>
...

4. And then wrap them into a parent element with class of 'animatedParent'. You can also pass the plugin's options via data-OPTION attributes in the parent element.

<div class="animatedParent" data-sequence="1000'">
  <h2 class="animated bounceIn" data-id="1">It Works!</h2>
  <h2 class="animated bounceInDown" data-id="2">It Works!</h2>
  ...
</div>

5. All the options.

• data-sequence: If you want to have a set of animations start one after the other then you can set a sequence time in ms
• data-appear-top-offset: This will make the make the animation either start before or after it has entered the viewport by the specified ammount. So if you wanted to only start the animation after the user has scrolled 300px past it then setting an offset of -300px would achieve this.
• class="animatedParent animateOnce": Adding this will make sure the item only animates once and will not reset when it leaves the viewport.
• class="animated bounceInDown slowest": Currently you can define 4 speeds, the default which requires nothing then slow, slower and slowest..

Change log:

v0.2.1 (2014-07-05)

• fixing css bug
• adding in new on click events

v0.1.6 (2014-07-03)

• adding new animations and fixing old ones

---

This awesome jQuery plugin is developed by Jack-McCourt. For more Advanced Usages, please check the demo page or visit the official website.