angular-parallax-scroll
Simple parallex effect directives for image content on foreground content scrolling with angularJS >= 1.2.x and jQuery >= 1.9.x. ( Demo )
Install
- Add this line to your bower.json dependencies and run bower install afterwards.
"angular-parallax-scroll": ">= 1.0.0"- Include the required source file (this path or similar)
<script src="bower_components/dist/angular-parallax-scroll.min.js"></script>- Inject the
angular.parallaxScrollmodule into your app.
angular.module('app', ['angular.parallaxScroll']);Usage
Module Name (Dependency)
- angular.parallaxScroll
Directives
- parallax-scroll
Attribute Usage
| attribute | Description | note |
|---|---|---|
parallax-scroll="{callbackHandler(event)}" | parallax-scroll is the main directive. callbackHandler is to receive data when data is populated. event return jQuery Event object | |
url="Image Url" | url is a required for image tag | default: Can't not be empty |
parallax-class="className" | parallax-class is a class name to append the parallax div wihch is the outer div of image tag | default: empty string |
style="styleCSS" | style is a style object of current scope CSS object | default: { position: 'relative', overflow: 'hidden', height: '300px', width: '100%', display: 'block' } |
img-class="className" | img-class is a class name of the image tag | default: empty string |
Example
<body ng-controller="AppCtrl"> <h1>Scroll down</h1> <div class="container"> <div parallax-scroll url="http://stuckincustoms.smugmug.com/Portfolio/i-khJF5DB/0/X3/Trey%20Ratcliff%20-%20China%202011%20-%20A%20Great%20Wall%20at%20Sunset.jpg"> </div> </div> </body>var app = angular.module('app', [ 'angular.parallaxScroll' ]); app.controller('AppCtrl', function AppCtrl($scope) {});Copyright & License
Released under the MIT license.
