Simple jQuery Plugin For Content Scrolling Effects - Ascensor.js

Simple jQuery Plugin For Content Scrolling Effects - Ascensor.js
File Size: 50.3 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.