Lightweight and highly performant AngularJS directive for parallax scrolling. Script is just 1.4K and about 35K 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="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<script src="http://durated.github.io/angular-scroll/0.2.2/angular-scroll.min.js"></script>
<script src="http://durated.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>Convenience method for creating animator closures.
parallaxHelper.createAnimator(easingFactor, max, min, offset);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
The custom animator should return an object with camelCased CSS properties like this:
{
backgroundPosition: '-100px 0',
left: '20%'
}<img src="img.png" du-parallax y="accelleratedScroll" y="moveInFromLeft" opacity="fadeIn" rotation="'35deg'" alt="" />Check out durated.github.io/angular-parallax or view the source at example/index.html.
$ npm install
$ grunt
Copyright 2013 Durated Gmbh.
Licensed under the MIT License