Ascensor.js 
Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system (homepage)
Getting Started
Download the [production version][min] or the [development version][max]. [max]: https://raw.github.com/kirkas/Ascensor.js/master/dist/jquery.ascensor.js [min]: https://raw.github.com/kirkas/Ascensor.js/master/dist/jquery.ascensor.min.js
In your web page:
<div id="ascensor"> <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> <script src="jquery['>=1.7'].js"></script> <script src="jquery.ascensor.js"></script> <script> $('#ascensor').ascensor(); </script>Public Methods
Note that to access public method, you need to access the instance store in the data attribute under the plugin name. This a behavior inherited from the jQuery boilerplate.
var ascensor = $('#ascensor').ascensor(); // Init ascensor var ascensorInstance = ascensor.data('ascensor'); // Access instance ascensorInstance.prev(); // Go to previous floor ascensorInstance.next(); // Go to next floor ascensorInstance.scrollToFloor(4); // Go to floor Index ascensorInstance.scrollToFloor('content2'); // Go to floor Name ascensorInstance.scrollToDirection('up'); // Go up ascensorInstance.scrollToDirection('down'); // Go down ascensorInstance.scrollToDirection('left'); // Go left ascensorInstance.scrollToDirection('right'); // Go right ascensorInstance.refresh(); // Refresh floor position ascensorInstance.destroy(); // Remove pluginEvents
Ascensor emit two event, on scrollStart & scrollEnd, they both return an array with the original floor and the targeted floor.
var ascensor = $('#ascensor').ascensor(); // Init ascensor ascensor.on("scrollStart", function(e, floor){ console.log(floor.from) // Return the origin floor console.log(floor.to) // Return the targeted floor }); ascensor.on("scrollEnd", function(e, floor){ console.log(floor.from) // Return the origin floor console.log(floor.to) // Return the targeted floor });NEW! - Data attribute
Sometime you need a floor to behave differently in term of direction, you can now easily force this by adding a custom data-attribute on the dom element.
Here the available attribute:
data-ascensor-next
data-ascensor-prev
data-ascensor-up
data-ascensor-down
data-ascensor-left
data-ascensor-right
example:
<div id="ascensor"> <div data-ascensor-left="3" >Content 1</div> <!-- This will force the left key to scroll to the last floor --> <div>Content 2</div> <div>Content 3</div> <div data-ascensor-right="0" >Content 4</div> <!-- This will force the right key to scroll to the first floor --> </div>NEW! - Swipe event
Ascensor now use hiw own swipe event system. Just set swipeNavigation to true, false or "mobile-only" (default).
Options
ascensorFloorName
Type: array of string
Default: null
descriptions: Choose and name for each floor, this name will be added in the url as #name
example: ascensorFloorName: ['content1','content2','content3']
childType
Type: string
Default: div
descriptions: Specify the child tag if no div ('section' or 'article')
example: childType:'article'
width
Type: integer or string
Default: "100%"
descriptions: the width of your floor (% or pixel)
example: width: "80%"
height
Type: integer or string
Default: "100%"
descriptions: the height of your floor (% or pixel)
example: height: "300px"
ready
Type: function
Default: false
descriptions: function to execute when ascensor is ready
example: ready: function(){ alert("ready") }
direction
Type: string or object
Default: 'y'
descriptions: specify the direction 'x', 'y' or and array of x/y position for each floor [[2,1],[2,2],[3,2]]
example: direction: [[2,1],[2,2],[3,2]]
time
Type: integer
Default: 300
descriptions: Specify speed of transition
example: time: 500
easing
Type: string
Default: linear
descriptions: Specify easing option (don't forget to add the easing plugin)
example: easing: 'easeInElastic'
swipeNavigation
Type: boolean or string
Default: mobile-only
descriptions: Specify if you want swipe navigation, you can set true, false or "mobile-only" (default)
example: swipeNavigation: true
keyNavigation
Type: boolean
Default: true
descriptions: choose if you want direction key support
example: keyNavigation: false
queued
Type: boolean or string
Default: false
descriptions: define queued transition.
false: transition will happen simultaneously for X and Y axis
"x": will animate on the X axis, then on the Y
"y": will animate on the Y axis, then on the X
example: queued: 'x'
jump
Type: boolean
Default: false
descriptions: Specify is you want ascensor to jump between floor, even if a gap is present between them
example: jump: true
wheelNavigation
Type: boolean
Default: false
descriptions: Set to true if you want mousescroll to trigger animation between floor
example: wheelNavigation: true
wheelNavigationDelay
Type: number
Default: 40
descriptions: Adjust to delay between mousewheel event to trigger animation
example: wheelNavigationDelay: 100
loop
Type: boolean
Default: true
descriptions: Specify if you want ascensor to loop once reach the end of an axis, There is six differents behavior for ascensor.
true: will reach the further floor on same axis once reach the end, on all axis
"loop-x": will reach the further floor on same axis once reach the end, only on X axis
"loop-y": will reach the further floor on same axis once reach the end, only on Y axis
"increment": will reach next same-axis floor level when reach end end, on all axis
"increment-x": will reach opposite floor on y axis, but jump to next level on X axis
"increment-y": will reach opposite floor on y axis, but jump to next level on Y axis
example: loop: increment-x
Demo & Examples
Note that all example are situated in the examples folder of the repository
Simple
Horizontal
Chocolat
Url
Swipe
Loop
Increment
Websites using ascensor
waterevive
shanaemairs
reverseburo
robclowes
iadindustry
newworldwhisky
lucasexbrayat
scan.dk
alpineconstruction.dk
####Contribution
You want help? great! For my workflow, I use grunt.js (require node & npm installed)
- Fork it
- Create your feature branch (git checkout -b my-new-feature)
- Add your change/fix
- Build project using "grunt build" (in terminal)
- Commit your change (only if "grunt build" return no error)
- Push to the branch (git push origin my-new-feature) & request pull request!
####Donation https://cash.me/$kirkas
####Author Léo Galley
