tiltscroll

demo - open in mobile

Tilt device to scroll a webpage page with configurable options and events.

install

1. in browser <script src="dist/tiltscroll.js"></script>
2. bower bower install tiltscroll

getting started

1. call tiltscroll in your script

   tiltscroll.init();
   

2. (optional) pass in various options

   1. smoothing
   2. timeout
   3. minVelocity
   4. speed

   tiltscroll.init({
       'smoothing': 0.1, // smoothen device tilt data from accelerometer
       'timeout': 10000, // disable scroll by tilting by this time (in millisenconds)
       'minVelocity': 0.03, // minimum tilt change (in deg) below which the timeout will trigger
       'speed': 10 // speed of scrolling
   });
   

   The above values are set by default and are overridden if the user specifies them.

3. (optional) listen for events

   1. scrolltiltStatusChange
   2. scrollTiltInProgress

   window.addEventListener('scrolltiltStatusChange', function(event) {
       console.log(event.status); // scroll by device tilting is enabled or disabled
       console.log(event.zeroPositionAngle); // zero position tilt angle for scrolling reference
       console.log(event.zeroPositionScrollHeight); // zero position scroll height for scrolling reference
   });
   
   window.addEventListener('scrollTiltInProgress', function(event) {
       console.log(event.velocity); // change in tilt degree
       console.log(event.displacement); // change from zero position tilt degree
       console.log(event.tiltTB); // current tilt degrees
       console.log(event.scrollHeight); // current scroll position
   });
   

inspiration

1. How To Make Tilt Scrolling That Doesn’t Suck by Marco Arment
2. Tilt - acceleremeter scroll plugin
3. Detecting device orientation by MDN
4. This End Up: Using Device Orientation by HTML5Rocks

Contribute

Please see CONTRIBUTING.md for details.

Versioning

This repository follows the Semantic Versioning guidelines:

1. For patches, run grunt bump
2. For minor release, run grunt bump:minor
3. For major release, run grunt bump:major

License

(C) Sayanee Basu 2014, released under an MIT license