Simple jQuery Plugin For Content Scrolling Effects - Ascensor.js

Ascensor.js is a simple jQuery plugin that allows to scroll and adapt content according to an elevator system. With this plugin, you can create a group of links to scroll to any content section (floor) with transition and easing effects.  Please check the demo page to see it in action.

Features:

• Supports keyboard navigation
• Supports transition animations and easing
• Supports 3 scroll direction: 'x', 'y' or 'chocolate'
• Supports direction scroll queued and loop scrolling

You might also like:

• jQuery Plugin For Fullscreen Scrolling Pages - windows
• Simple jQuery Plugin For Scrolling To Any Html Elements
• Animated Page Scrolling Effect with jQuery - superscrolloram
• jQuery Plugin For Fixed Background Scrolling Layout

Basic Usage:

1. Create a container for the layout

<div id="ascensorBuilding">
<div>Content 1</div>
<div>Content 2</div>
<div>Content 3</div>
<div>Content 4</div>
<div>Content 5</div>
<div>Content 6</div>
<div>Content 7</div>
</div>

2. The CSS

#ascensorFloor0 {
background: #F9B233;
}
#ascensorFloor1 {
background: #71B5E5;
}
#ascensorFloor2 {
background: #B3CE4A;
}
#ascensorFloor3 {
background: #EB5D45;
}
#ascensorFloor4 {
background: #4AAEB6;
}
#ascensorFloor5 {
background: #E7DFBF;
}
#ascensorFloor6 {
background: #CA9E67;
}

3. Include jQuery library and Ascensor.js on your web page

<script src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script src="jquery.ascensor.js"></script> 

4. Create a group of links to scroll the content

<ul>
<li><a class="ascensorLink ascensorLink0">Navigation 1</a></li>
<li><a class="ascensorLink ascensorLink1">Navigation 2</a></li>
<li><a class="ascensorLink ascensorLink2">Navigation 3</a></li>
<li><a class="ascensorLink ascensorLink3">Navigation 4</a></li>
<li><a class="ascensorLink ascensorLink4">Navigation 5</a></li>
<li><a class="ascensorLink ascensorLink5">Navigation 6</a></li>
<li><a class="ascensorLink ascensorLink6">Navigation 7</a></li>
</ul>

5. Call the plugin with options

<script>
$('#ascensorBuilding').ascensor({
ascensorName: 'ascensor', // The ascensor name (use for class & selector)
ascensorFloorName: ['content1','content2','content3'], // Choose and name for each floor
childType: 'div', // Specify the child tag if no div
windowsOn: 1, // Choose the floor to start on
direction: 'y', // specify the direction ('x', 'y' or 'chocolate')
ascensorMap: [[2,1],[2,2],[3,2]], // If you choose chocolate for direction, speficy position for x/y
time: 1000, // Specify speed of transition
easing: 'easeInElastic' , // Specify easing option (easing plugin needed)
overflow: 'hidden', Choose your main container overflow default behavior
keyNavigation: false, // choose if you want direction key support
queued: true, // choose if you want direction scroll queued
queuedDirection: 'y', // choose if you want direction scroll queued 'x' or 'y'
loop: false // specify if you want an loop
});
</script>

Change log:

v1.8.0 (2014-02-17)

• fix css on old browser

v1.7.0 (2014-02-17)

• add height and width management
• fix hash browser pollution

v1.6.5 (2013-10-14)

• new version, few fix and optimisation, new triggering system

---

This awesome jQuery plugin is developed by kirkas. For more Advanced Usages, please check the demo page or visit the official website.