ng-parallax demo

Basic Usage:

In Controller:

$scope.myPattern = 'images/cloud-pattern.jpg'

HTML:

<div ng-parallax pattern="myPattern" speed="0" ></div>

* speed 10-0 (slowest - fastest)

Speed: 0

Speed: 5

Speed: 3

Speed: 1

Reverse:

In Controller:

$scope.myPattern = 'images/rain-pattern.png'

HTML:

<div ng-parallax pattern="myPattern" speed="1" reverse="true" ></div>

Speed: 0

Speed: -15

Speed: -10

Speed: -5

Layered Parallax:

HTML:


          <div style="width: 100%; height: 800px">

                  <div style='width: 100%; height: 100%; position: absolute; ' >

                    <div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div>

                  </div>

                  <div  style='width: 50%; height: 50%; position: absolute; '>

                    <div ng-parallax pattern="'images/rain-pattern.png'" speed="15" reverse="true"></div>

                  </div>

                  <div  style='width: 25%; height: 25%; position: absolute; '>

                    <div ng-parallax pattern="'images/cloud-pattern.jpg'" speed="0" reverse="true"></div>

                  </div>

                </div>

Notes of Interest:

- Responsive, fits in any container.

- Can use images without being scoped

HTML:

<div ng-parallax pattern="'images/grey-pattern.png'" speed="0"></div>
<div ng-parallax pattern="'http://lorempixel.com/g/400/600/people/8'" speed="2" reverse="false" ></div>