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

jQuery Plugin To Animate Elements When They Scroll Into View - inview
File Size: 6.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.