Lightweight & performant parallax scrolling for angular.js.
Clone or download
Latest commit faabd2f Oct 20, 2014


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.


$ bower install ng-parallax


AngularJS and angular-scroll.



Include module and dependencies.

<script src="//"></script>
<script src="//"></script>
<script src="//"></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="" />


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>


Check out or view the source at example/index.html.


$ npm install
$ gulp


Licensed under the MIT License