adaptive-scroll

Want to scroll in an AngularJS app using gyroscope? Check it.
Homepage:
1 person uses it
Submitted by: 840789? janantala

adaptive-scroll Build Status

This module allows you to scroll an AngularJS app using gyroscope.

Note: You need a device with a gyroscope and a browser with requestAnimationFrame support for smooth scrolling

We recommend Gyrocopter extension for Chrome.

Demo

Check out http://angular-adaptive.github.io/adaptive-scroll/demo/ Demo image with Gyrocopter extension.

Requirements

  • AngularJS v 1.0+
  • device with a gyroscope or a simulator
  • browser with requestAnimationFrame support for smooth scrolling
    • iOS Safari 6+,
    • Chrome for Android 25+,
    • Opera Mobile 14+
    • Firefox for Android 19+

Usage

We use bower for dependency management. Add

To your bower.json file. Then run

This will copy the scroll files into your components folder, along with its dependencies. Load the script files in your application:

Add the adaptive.scroll module as a dependency to your application module:

and include $gyroscope service as a dependency to your controller:

Append a directive adaptivescroll to the scrollable element.

To start scrolling run method watchPosition() and pass trashold argument (in degrees):

To stop scrolling run method ignorePosition():

Testing

We use karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt:

The karma task will try to open Chrome as a browser in which to run the tests. Make sure this is available or change the configuration in test/test.config.js

License

The MIT License

Copyright (c) 2013 Jan Antala, https://github.com/janantala

comments powered by Disqus
This page was last updated almost 4 years ago.