A free jQuery Plugin with Animsition (Clickstream.js) is a create page load transition effect. it is easy and light weight to used to add cool transition with easing effects to your page load. they are provide 58 different animations effects on page load.
Table of Contents
How to used:
Add with jQuery library then add with jQuery Animsition plugin on your web page.
<script src="jquery.min.js"></script>
<script src="dist/animsition.min.js"></script><br>
Load with animsition.CSS file in your page on head section.
<link rel="stylesheet" href="css/animsition.min.css">
Enable Transition effect to your Html element.
$(document).ready(function() {
$(".animsition").animsition({
inClass : 'fade-in',
outClass : 'fade-out',
inDuration : 1500,
outDuration : 800,
linkElement : '.animsition-link',
// e.g. linkElement : 'a:not([target="_blank"]):not([href^=#])'
touchSupport : true,
loading : true,
loadingParentElement : 'body', //animsition wrapper element
loadingClass : 'animsition-loading',
unSupportCss : [ 'animation-duration',
'-webkit-animation-duration',
'-o-animation-duration'
],
overlay : false,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body'
});
});
Add Script with Animation start / end events.
$(".animsition").animsition({
// options
}).one('animsition.start',function(){
...
})
$(".animsition").animsition({
// options
}).one('animsition.end',function(){
...
})<br>
Done
Thanks for make jQuery plugin is developed by For more Helpfull for users, please check the demo page or visit the official website.
