jQuery Plugin To Animate Elements When They Scroll Into View - inview

inview is a jQuery plugin used to add or remove CSS classes to Html elements when they enter or leave viewport, so that you can apply custom CSS3 animations on them as you scroll down the page.

See also:

• jQuery Plugin For Simple Html Element Scrolling Effects - scrollme
• Awesome jQuery Plugin For Magical Scroll Interactions - ScrollMagic

How to use it:

1. Include jQuery javascript library and the jQuery inview plugin in the footer.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="js/jquery.inview.js"></script> 

2. Add animation CSS classes to DIV element via data-class-in and data-class-out attributes.

<div class="demo">
  <div data-class-in="" data-class-out="out-animation">

  </div>
</div>

3. Initialize the plugin.

$(function(){
$('#demo div').inview();
});

4. The sample CSS/CSS3 to animate the Html elements when they're scrolled into view.

.out-animation {
opacity: 0;
-webkit-transform: translateX(80px);
-moz-transform: translateX(80px);
transform: translateX(80px);
}

5. Default options and callbacks.

$(function(){
$('#demo div').inview({
'viewFactor': 0.3,
'onEnter': function($object) {
},
'onLeave': function($object) {
}
});
});

---

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