Diagonal Section Transition Effect with jQuery Animation - Simple Ascensor
File Size: | 4.32 KB |
---|---|
Views Total: | 3795 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Simple Ascensor is a lightweight jQuery page transition plugin that makes smooth, diagonal transition effect between any two or more content sections of your webpage using jQuery animate()
method.
How to use it:
1. Add jQuery library and the jQuery Simple Ascensor plugin to your web pages.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/simple-ascensor.js"></script>
2. Create two (or more, it all depends on you) HTML elements you want to scroll between.
<div id="slide1" class="page" data-x="0" data-y="0">Section One</div> <div id="slide2" class="page" data-x="1" data-y="1">Section Two</div> <div id="slide3" class="page" data-x="2" data-y="2">Section Three</div>
3. Create a set of anchor links pointing to these content sections.
<nav id="menu"> <a href="#slide1">Section 1</a> <a href="#slide2">Section 2</a> <a href="#slide3">Section 3</a> </nav>
4. Initialize the plugin and specify the animation speed whatever you like.
$('#menu a').simpleAscensor(750);
This awesome jQuery plugin is developed by Jeyffrey. For more Advanced Usages, please check the demo page or visit the official website.