There is now an Angular2 directive available for those interested!
What Am I?!
An easy way to implement parallax scrolling with Angularjs.
- No dependencies
- Works for mobile! (Well, iPhones at least - haven't tested on an Android yet)
- Tiny (only 292B)
<div ng-parallax pattern="myPattern" speed="0"> < /div>
- v1.1.3 - Added support for use in Webpack/ComponentJS
- v1.1.2 - Eliminated jankiness when using Macbook touchpads and touchscreens.
- None! (Other than AngularJS).
NPM / Bower
npm install ng-parallax --save-dev
bower install ng-simple-parallax --save
Include the module in your scripts.
<script src="./src/ngParallax.min.js"> <script>
Add ngParallax in your apps dependencies.
var app = angular.module('myApp', ['ngParallax']);
or include just like any other component in Webpack
<div ng-parallax pattern="'imageLocation'" speed="[0-3]" reverse="[true/false]"> < /div>
speed: 0-3 (slowest to fastest)
- Setting the speed at 0 will lock the image in place.
- ... unless it's iOS, in which case the image will act as a static image and scroll naturally.
- Using negative numbers reverses the direction.
- The speed is directly related to the image size, so tinker with your speed to get the right effect.
MIT - go nuts y'all.