tiltscroll
demo - open in mobile
Tilt device to scroll a webpage page with configurable options and events.
install
- in browser
<script src="dist/tiltscroll.js"></script>
- bower
bower install tiltscroll
getting started
-
call
tiltscroll
in your scripttiltscroll.init();
-
(optional) pass in various options
- smoothing
- timeout
- minVelocity
- 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.
-
(optional) listen for events
- scrolltiltStatusChange
- 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
- How To Make Tilt Scrolling That Doesn’t Suck by Marco Arment
- Tilt - acceleremeter scroll plugin
- Detecting device orientation by MDN
- This End Up: Using Device Orientation by HTML5Rocks
Contribute
Please see CONTRIBUTING.md
for details.
Versioning
This repository follows the Semantic Versioning guidelines:
- For patches, run
grunt bump
- For minor release, run
grunt bump:minor
- For major release, run
grunt bump:major
License
(C) Sayanee Basu 2014, released under an MIT license