var app = angular.module('plunker', ['angular.parallaxScroll']);
app.controller('AppCtrl', function($scope) {
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://code.angularjs.org/1.2.28/angular.js" data-semver="1.2.28"></script>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="angular-parallax-scroll.js"></script>
<script src="app.js"></script>
</head>
<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>
</html>
/* Put your css in here */
.container {
margin-top: 500px;
height: 1500px;
}
/*! angular-parallax-scroll.min.js 16-02-2015 */
!function(a,b){"use strict";function c(a){function c(b,c){$(b).find("img").one("load",function(){d(b,c,!0)}),$(a).on("scroll.parallax, resize.parallax",function(){d(b.find("div"),c,!1)})}function d(c,d,f){var g=b.element(a).attr("width"),h=$(c),i=e(h,g),j=h.find("img").height(),k=j-i,l=h.offset().top,m=l+i,n=$(a).scrollTop(),o=a.innerHeight,p=n+o,q=(p-l)/(i+o),r=-1*k*q;if(m>n&&n+o>l){var s="translate(0px,"+r+"px)";h.find("img").css({transform:s,"-webkit-transform":s,"-ms-transform":s,"-moz-transform":s})}f&&h.find("img").css("display","block"),d.scroll&&d.scroll(event)}function e(a,b){var c,d=a.height();return c=992>b?d>0?d:a.find("img").height():d>0?d:500}var f={bind:c};return f}function d(a,c){function d(d,e,f){var g=c(f.parallaxScroll),h=c(f.style),i=f.parallaxClass||"",j=f.imgClass||"",k='<div class="parallax"><img src= "'+f.url+'" /></div>"',l={position:"absolute",top:0,left:0,right:0,bottom:0,"z-index":-1},m={position:"relative",overflow:"hidden",height:"300px",width:"100%",display:"block"},n=b.extend({},m,h(d));e.css(n).append(k).children().addClass(i).css(l).find("img").css({position:"absolute",width:"100%"}).addClass(j),a.bind(e,{scroll:function(a){d.$apply(function(){g(d,{$event:a})})}})}var e={link:d};return e}b.module("angular.parallaxScroll",[]).factory("angular.parallaxScroll.service",c).directive("parallaxScroll",d),c.$inject=["$window"],d.$inject=["angular.parallaxScroll.service","$parse"]}(window,window.angular);