Ascensor.js – jQuery content scroller (Swiss quality)

A very good jQuery content scroller with – create nice content navigation with scrolling effects. Swiss quality.

jQuery content scroller

Ascensor is a jQuery plugin, which allows to train and adapt content according to an elevator system. It works with jQuery 1.7+. With this plugin we can create a group of links (navigation), to scroll to any content section (floor) with transition and easing effects.

jQuery content scroller plugin
jQuery content scroller plugin

Basic usage

<div id="ascensor">
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
</div>
<script src="jquery['>=1.7'].js"></script>
<script src="jquery.ascensor.js"></script>
<script>
  $('#ascensor').ascensor();
</script>

Tada!

Events

Ascensor.js emits two events: on scrollStart and on scrollEnd. Both of them return an array with the original floor and the targeted floor.

Example:

var ascensor = $('#ascensor').ascensor();

ascensor.on("scrollStart", function(e, floor) {
  console.log(floor.from);         
  console.log(floor.to);        
});

ascensor.on("scrollEnd", function(e, floor) {
  console.log(floor.from);
  console.log(floor.to);
});

Data attributes

We can adjust behavior (e.g. direction) via HTML5 attributes. Here’s the list of available attributes:

data-ascensor-next

data-ascensor-prev

data-ascensor-up

data-ascensor-down

data-ascensor-left

data-ascensor-right

Example:

<div id="ascensor"> 
  <!-- This will force the left key to scroll to the last floor -->
  <div data-ascensor-left="3">Content 1</div>

  <div>Content 2</div>

  <div>Content 3</div>

  <!-- This will force the right key to scroll to the first floor -->
  <div data-ascensor-right="0">Content 4</div>
</div>

See it in action @ project homepage:

http://kirkas.ch/ascensor

Get this jQuery content scroller plugin from GitHub:

https://github.com/kirkas/Ascensor.js

Enjoy!

Share:Share on Facebook0Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1