Ascensor is a jquery plugin which aims to train and adapt content according to an elevator system (homepage)
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>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 pluginAscensor 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
});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>Ascensor now use hiw own swipe event system. Just set
swipeNavigation to true, false or "mobile-only" (default).
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
Note that all example are situated in the examples folder of the repository
Simple
Horizontal
Chocolat
Url
Swipe
Loop
Increment
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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
