jQuery Plugin To Create Elements Fly-in Effects On Scroll

Makes use of jQuery and CSS3 transitions & transforms to make Html elements as you scroll down the web page.

Basic Usage:

1. Add the CSS class 'fly' to Html elements you wish to apply a 'fly-in' effect on scroll.

<div class="fly">
 ...
</div>

...

2. Load the latest version of jQuery library into your document. Use a CDN you'd like.

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

3. The required CSS3 rules for the fly-in effect.

.fly {
  opacity: 0;
  transition: all 600ms ease-in-out;
  transform: translateY(100px) scale(1.05) translate3d(0, 0, 0);
}

.show-block {
  opacity: 1;
  transform: translateY(0) scale(1) translate3d(0, 0, 0);
}

4. The javascript to detect the scroll event and add the fly-in effect to Html elements with CSS class of 'fly'.

var timer = 0;
function recheck() {
    var window_top = $(this).scrollTop();
    var window_height = $(this).height();
    var view_port_s = window_top;
    var view_port_e = window_top + window_height;
    
    if ( timer ) {
      clearTimeout( timer );
    }
    
    $('.fly').each(function(){
      var block = $(this);
      var block_top = block.offset().top;
      var block_height = block.height();
      
      if ( block_top < view_port_e ) {
        timer = setTimeout(function(){
          block.addClass('show-block');
        },100);       
      } else {
        timer = setTimeout(function(){
          block.removeClass('show-block');
        },100);          
      }
    });
}

$(function(){
  $(window).scroll(function(){
    recheck();
  });
  
  $(window).resize(function(){
     recheck();   
  });
  
  recheck();
});

---

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