Using scope for consistency within directives. A little bit of cleanup.

Author: brettfxio

Diff for: index.html

@@ -6,7 +6,7 @@
     <div ng-controller="ParallaxExampleCtrl">
       <h1 parallax parallax-ratio="1.22" parallax-vertical-offset="10" parallax-horizontal-offset="600" class="parallax">Angular Parallax</h1>
       <div parallax-background class="photo nature" parallax-ratio="0.5"><span style="font-size:1em;">Nature</span></div>
-      <div parallax-background class="photo food" parallax-ratio="0.8"><span style="font-size:4em;">Food</span></div>
+      <div parallax-background class="photo food" parallax-ratio="0.8" parallax-vertical-offset="100"><span style="font-size:4em;">Food</span></div>
       <div parallax-background class="photo animals" parallax-ratio="0.7">Animals</div>
       <div parallax-background class="photo cats" parallax-ratio="1">Cats</div>
       <img parallax parallax-ratio="1.88" parallax-vertical-offset="100" parallax-horizontal-offset="40" class="parallax" src="images/muther.jpg" />

Diff for: scripts/angular-parallax.js

@@ -33,10 +33,11 @@ angular.module('angular-parallax', [
     template: '<div ng-transclude></div>',
     scope: {
       parallaxRatio: '@',
+      parallaxVerticalOffset: '@',
     },
     link: function($scope, elem, attrs) {
       var setPosition = function () {
-        var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 )  - ( attrs.parallaxVerticalOffset || 0);
+        var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1) - ($scope.parallaxVerticalOffset || 0);
         // horizontal positioning
         elem.css('background-position', "50% " + calcValY + "px");
       };