angular-parallax

by oblador

Lightweight & performant parallax scrolling for angular.js.

208 Stars 51 Forks Last release: Not found MIT License 45 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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.

html



Define transitions and expose to template.

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

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

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 + ')'
  };
}
[loads of text…]

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.