Nearly Perfect Mediocracy

    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.

    Install

    npm i ng-parallax

    DownloadsWeekly Downloads

    32

    Version

    1.1.3

    License

    MIT

    Last publish

    Collaborators

    • allenroyston