ng-parallax

ng-parallax

NEW!

There is now an Angular2 directive available for those interested!

What Am I?!

An easy way to implement parallax scrolling with Angularjs.

• No dependencies
• Responsive
• Simple
• Works for mobile! (Well, iPhones at least - haven't tested on an Android yet)
• Tiny (only 292B)

Usage

<div ng-parallax pattern="myPattern" speed="0"> < /div>

Version

1.1.3

Updates

• v1.1.3 - Added support for use in Webpack/ComponentJS
• v1.1.2 - Eliminated jankiness when using Macbook touchpads and touchscreens.

Live Demo

Check it out

Dependencies

• None! (Other than AngularJS).

NPM / Bower

npm install ng-parallax --save-dev
bower install ng-simple-parallax --save

Installation

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

Parameters

<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.

License

MIT - go nuts y'all.