Overlay Slide Top
A simple and easy jQuery plugin for CSS animated page transitions.
Overlay Demo
Overlay Slide Top Overlay Slide Top
Overlay Slide
Installation
Step 1: Link required files
<!-- animsition.css -->
<link rel="stylesheet" href="../dist/css/animsition.min.css">
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- animsition.js -->
<script src="../dist/js/animsition.min.js"></script>
Step 2: HTML markup
<body>
<div class="animsition-overlay" data-animsition-overlay="true">
<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 each "linkElement" to use a different animation.
<a
href="./page1"
class="animsition-link"
data-animsition-out-class="overlay-slide-out-top"
data-animsition-out-duration="2000"
>
animsition link 1
</a>
<a
href="./page2"
class="animsition-link"
data-animsition-out-class="overlay-slide-out-right"
data-animsition-out-duration="500"
>
animsition link 2
</a>
If you want to each page to use a different animation.
<div
class="animsition-overlay"
data-animsition-overlay="true"
data-animsition-in-class="overlay-slide-in-top"
data-animsition-in-duration="1000"
data-animsition-out-class="overlay-slide-out-top"
data-animsition-out-duration="800"
>
...
</div>
Step 3: Call the animsition
$(document).ready(function() {
$(".animsition-overlay").animsition({
inClass: 'overlay-slide-in-top',
outClass: 'overlay-slide-out-top',
inDuration: 1500,
outDuration: 800,
linkElement: '.animsition-link',
// e.g. linkElement: 'a:not([target="_blank"]):not([href^="#"])'
loading: true,
loadingParentElement: 'body', //animsition wrapper element
loadingClass: 'animsition-loading',
loadingInner: '', // e.g '<img src="loading.svg" />'
timeout: false,
timeoutCountdown: 5000,
onLoadEvent: true,
browser: [ 'animation-duration', '-webkit-animation-duration'],
// "browser" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
// The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
overlay : true,
overlayClass : 'animsition-overlay-slide',
overlayParentElement : 'body',
transition: function(url){ window.location.href = url; }
});
});