jQuery Plugin For Simple Element Scrolling Effects - Scransition

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

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.