angular-parallax

Lightweight and highly performant AngularJS directive for parallax scrolling. Script is just 1.6K and about 40K gzipped with dependencies.

Uses requestAnimationFrame and translate3d for GPU accelerated, smooth transitions.

Install

$ bower install ng-parallax

Dependencies

AngularJS and angular-scroll.

Usage

Quickstart

Include module and dependencies.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src="//oblador.github.io/angular-scroll/0.6.2/angular-scroll.min.js"></script>
<script src="//oblador.github.io/angular-parallax/angular-parallax.min.js"></script>

Define transitions and expose to template.

angular.module('myApp', ['duParallax']).
  controller('MyCtrl', function($scope, parallaxHelper){
    $scope.background = parallaxHelper.createAnimator(-0.3);
  }
);

Apply parallax scrolling with the du-parallax attribute, define y position with the transition named background.

<section ng-controller="MyCtrl">
  <img src="img.png" du-parallax y="background" alt="" />
</section>

`createAnimator`

Convenience method for creating animator closures.

parallaxHelper.createAnimator(easingFactor, max, min, offset);

Animatable attributes

Attributes can be literals or a function called with a parameter object containing scrollY, elemX, elemY. The function should return the change in pixels relative to the objects current position if associated with y or x, otherwise the desired new value.

y
x
rotation
opacity
custom

<img src="img.png" du-parallax y="accelleratedScroll" x="moveInFromLeft" opacity="fadeIn" rotation="'35deg'" alt="" />

Custom animator

The custom animator should return an object with camelCased CSS properties like this:

$scope.invertColors = function(elementPosition) {
  var factor = -0.4;
  var pos = Math.min(Math.max(elementPosition.elemY*factor, 0), 255);
  var bg = 255-pos;
  return {
    backgroundColor: 'rgb(' + bg + ', ' + bg + ', ' + bg + ')',
    color: 'rgb(' + pos + ', ' + pos + ', ' + pos + ')'
  };
}

<div du-parallax custom="invertColors">[loads of text…]</div>

Example

Check out oblador.github.io/angular-parallax or view the source at example/index.html.

Building

$ npm install
$ gulp

License

Licensed under the MIT License