Sunday, April 13, 2014

Angularjs Tips / Parallax

If you need some popular effects in your angularjs page it is very easy to implement it with library called: angular-parallax Github

Install

Bower

Download

Here is source file: angular-parallax.js put it in your lib foulder

Setup

index.html

<script type='text/javascript' src='path/to/angular-parallax.js'></script>

main.js

angular.module('myApplication', ['angular-parallax']);

main.css

.background {
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
}    

using

<div parallax-background parallax-ratio="0.2" class="background"></div>

or

<img parallax parallax-ratio="0.4" src="some/image.jpg" />

Links

Github

No comments :

Post a Comment