ng-parallax

1.1.3 • Public • Published

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.

Package Sidebar

Install

npm i ng-parallax

Weekly Downloads

31

Version

1.1.3

License

MIT

Last publish

Collaborators

  • allenroyston