Need help with angular-parallax?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

oblador
208 Stars 50 Forks MIT License 45 Commits 12 Opened issues

Description

Lightweight & performant parallax scrolling for angular.js.

Services available

!
?

Need anything else?

Contributors list

# 1,488
JavaScr...
Objecti...
Shell
React N...
42 commits
# 242,468
Scala
akka-pe...
play-fr...
playfra...
1 commit
# 52,407
JavaScr...
marketp...
MongoDB
commerc...
1 commit

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.