Animated Page Load Transition In jQuery Plugin – Animsition

Page Load Transition Effects - Animsition
File Size:33.76 KB
Views Total:343
Last Update:May 6, 2018
Publish Date:May 6, 2018
Official Website:Go to website
License:MIT

Animsition is a simple  animated page load transition In jQuery Plugin. it can be help on load page with transition animations. Easy to use jQuery plugin for CSS animated page transitions. all over 50 animations are available such as different-different fade-in outs, rotations,flips and many more effects are available. such as cool effects for page look like creative effects.

How to use it:

1. Add jQuery library and jQuery Animsition plugin on your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="dist/animsition.min.js"></script><br>

2. Load the CSS file in your page’s head section.

<link rel="stylesheet" href="css/animsition.min.css">

3. Enable an 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'
});
});

4. Animation start / end events.

$(".animsition").animsition({
  // options
}).one('animsition.start',function(){

})

$(".animsition").animsition({
  // options
}).one('animsition.end',function(){
  ...
})

Done