Animate Elements In When They Come Into View - jQuery CSS3 Animate It Plugin
|File Size:||55.9 KB|
|Official Website:||Go to website|
CSS3 Animate It is a jQuery plugin that makes use of CSS3 animations to animate Html elements in when they come into view.
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">
<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..
- fixing css bug
- adding in new on click events
- 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.