Skip to content

Latest commit

 

History

History
261 lines (200 loc) · 9.18 KB

README.md

File metadata and controls

261 lines (200 loc) · 9.18 KB
Raw

Ascensor.js Build Status devDependency Status

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 plugin

Events

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)

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Add your change/fix
  4. Build project using "grunt build" (in terminal)
  5. Commit your change (only if "grunt build" return no error)
  6. Push to the branch (git push origin my-new-feature) & request pull request!

####Donation https://cash.me/$kirkas

####Author Léo Galley