jQuery Plugin To Create Elements Fly-in Effects On Scroll
File Size: | 1.89 KB |
---|---|
Views Total: | 10873 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.