Diagonal Section Transition Effect with jQuery Animation - Simple Ascensor

Diagonal Section Transition Effect with jQuery Animation - Simple Ascensor
File Size: 4.32 KB
Views Total:
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.