New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/animsition-add-page-transition-on-css-animations/
Animsition - Add page transition on css animations
Download Demo
Animsition is a simple and easy jQuery plugin used to add page transition on css animations.
18 different animation
Fade
fade-in
fade-out
fade-in-up
fade-out-up
fade-in-down
fade-out-down
fade-in-left
fade-out-left
fade-in-right
fade-out-right
Rotate
rotate-in
rotate-out
Flip
flip-in-x
flip-out-x
flip-in-y
flip-out-y
Zoom
zoom-in
zoom-out
1. INCLUDE CSS AND JS FILES
<!-- animsition CSS --> <link rel="stylesheet" href="./css/animsition.min.css"> <!-- vendor js --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <!-- animsition js --> <script src="./dist/js/animsition.min.js"></script>
2. HTML
<body> <div class="animsition"> <a href="./page1" class="animsition-link">animsition link 1</a> <a href="./page2" class="animsition-link">animsition link 2</a> </div> </body>
If you want to set for each “linkElement” a different animation.
<a href="./page1" class="animsition-link" data-animsition-out="flip-out-y" data-animsition-out-duration="2000" > animsition link 1 </a> <a href="./page2" class="animsition-link" data-animsition-out="rotate-out" data-animsition-out-duration="500" > animsition link 2 </a>
If you want to set for each page a different animation.
<div class="animsition" data-animsition-in-class="zoom-in" data-animsition-in-duration="1000" data-animsition-out-class="zoom-out" data-animsition-out-duration="800" > ... </div>
3. JAVASCRIPT
$(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' ] ); );