Download
User Rating: 2.8/5 ( 4 votes)
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
Flip
-
flip-in-x
-
flip-out-x
-
flip-in-y
-
flip-out-y
Source: git.blivesta.com
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'
]
});
});
JS Tutorial
