jQuery Plugin For Simple Element Scrolling Effects - Scransition

jQuery Plugin For Simple Element Scrolling Effects - Scransition
File Size: 11.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Scransition is an ultra-light (1kb unminified) jQuery plugin to animate Html elements with CSS3 transitions when you scroll down the page. The element scrolling effects will triggered while they're scrolled into the viewport.

How to use it:

1. Add the jQuery scransition plugin after jQuery library.

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

2. Call the plugin to create default transition effect on the Html elements when they appear on screen.

<script>
jQuery(document).ready(function($){
$('#SELECTOR').scransition();
});
</script>

3. Available parameters to customize the transition effect.

<script>
jQuery(document).ready(function($){
$('#SELECTOR').scransition({
transition: '0.4s',
offset: 150,
});
});
</script>

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