a parallax directive for picturefill.js and angularJS


Angular Core Dependency: ~1.2.7

Added by: Sam Deering





Stars: 8

Watchers: 8

Forks: 0

Module Description


Parallax backgrounds with responsive images.


How it works

picturefill.js provides a great way to deliver different images for different screen sizes. angular-responsive-parallax uses these images to create a scrolling parallax.

If the screen size changes picturefill.js and angular-responsive-parallax react and ajust the parallax effect.

How to use

Example files are included in the repository. Anyway, i will show you around.


First you need to build your HTML like you are used to from picturefill.js

<span data-picture data-alt="nasa" class="mr-px-img" mr-px-parallax mr-px-max-px="0.1">
    <span data-src="assets/img/hs-2007-16-a-500x768.jpg" mr-px-size="500,768" mr-px-no-px="true"></span>
    <span data-src="assets/img/hs-2007-16-a-1280x960.jpg" mr-px-size="1280,960" data-media="(min-width: 500px)" ></span>
    <span data-src="assets/img/hs-2007-16-a-1920x1200.jpg" mr-px-size="1920,1200" data-media="(min-width: 1400px)" ></span>

Here is a list of attributes you'll need in addition to those from picturefill.js

On the container span element:

  • mr-px-parallax
  • mr-px-max-px set a value between 0 to 1
    • 0 means the image does not move at all
    • 1 means the image will move at scroll speed

On the child span elements:

  • mr-px-size the size of the image
  • [optional] mr-px-no-px set this value to "true" if you want to disable the effect for this particular image size.
  • [optional] mr-px-focal set the vertical focal point of the image. default ist 0, value ranges from 1 to -1.


You'll need a few css rules to make your layout work without javascript and if you use mr-px-no-px. Take a look at the example.css for further info.


List mrResponsiveParallax as dependency.

var app = angular.module('testApp', [


  • here's where i got the translate3d detection method.
  • for the introduction to the getBoundingClientRect function.
  • Picture from Nasa! Yay!

Module stats last updated: 2015-06-08 00:31:50

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!