From c7415585ba3203e2692b92ca368a8ccba592ec35 Mon Sep 17 00:00:00 2001 From: "Dmitry A. Efimenko" Date: Mon, 8 Feb 2016 10:41:00 -0700 Subject: [PATCH 1/2] added a hook to disable parallax conditionally I noticed that parallax performs really bad on tablets so I needed a way to disable it based on the screen size. This code change enables the following: ```
``` --- scripts/angular-parallax.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/scripts/angular-parallax.js b/scripts/angular-parallax.js index 3460091..a408e5e 100644 --- a/scripts/angular-parallax.js +++ b/scripts/angular-parallax.js @@ -8,15 +8,18 @@ angular.module('angular-parallax', [ parallaxRatio: '@', parallaxVerticalOffset: '@', parallaxHorizontalOffset: '@', + parallaxIf: '=?', }, link: function($scope, elem, attrs) { var setPosition = function () { - if(!$scope.parallaxHorizontalOffset) $scope.parallaxHorizontalOffset = '0'; - var calcValY = $window.pageYOffset * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 ); - if (calcValY <= $window.innerHeight) { - var topVal = (calcValY < $scope.parallaxVerticalOffset ? $scope.parallaxVerticalOffset : calcValY); - var hozVal = ($scope.parallaxHorizontalOffset.indexOf("%") === -1 ? $scope.parallaxHorizontalOffset + 'px' : $scope.parallaxHorizontalOffset); - elem.css('transform', 'translate(' + hozVal + ', ' + topVal + 'px)'); + if ($scope.parallaxIf === true) { + if(!$scope.parallaxHorizontalOffset) $scope.parallaxHorizontalOffset = '0'; + var calcValY = $window.pageYOffset * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 ); + if (calcValY <= $window.innerHeight) { + var topVal = (calcValY < $scope.parallaxVerticalOffset ? $scope.parallaxVerticalOffset : calcValY); + var hozVal = ($scope.parallaxHorizontalOffset.indexOf("%") === -1 ? $scope.parallaxHorizontalOffset + 'px' : $scope.parallaxHorizontalOffset); + elem.css('transform', 'translate(' + hozVal + ', ' + topVal + 'px)'); + } } }; @@ -34,12 +37,15 @@ angular.module('angular-parallax', [ scope: { parallaxRatio: '@', parallaxVerticalOffset: '@', + parallaxIf: '=?', }, link: function($scope, elem, attrs) { var setPosition = function () { - 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"); + if ($scope.parallaxIf === true) { + 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"); + } }; // set our initial position - fixes webkit background render bug From efac42c7b175805baded0a875fac5cc083349cdf Mon Sep 17 00:00:00 2001 From: "Dmitry A. Efimenko" Date: Mon, 8 Feb 2016 10:53:52 -0700 Subject: [PATCH 2/2] account for when this attribute is not specified --- scripts/angular-parallax.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scripts/angular-parallax.js b/scripts/angular-parallax.js index a408e5e..e178c2b 100644 --- a/scripts/angular-parallax.js +++ b/scripts/angular-parallax.js @@ -12,7 +12,7 @@ angular.module('angular-parallax', [ }, link: function($scope, elem, attrs) { var setPosition = function () { - if ($scope.parallaxIf === true) { + if ($scope.parallaxIf === undefined || $scope.parallaxIf === true) { if(!$scope.parallaxHorizontalOffset) $scope.parallaxHorizontalOffset = '0'; var calcValY = $window.pageYOffset * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 ); if (calcValY <= $window.innerHeight) { @@ -41,7 +41,7 @@ angular.module('angular-parallax', [ }, link: function($scope, elem, attrs) { var setPosition = function () { - if ($scope.parallaxIf === true) { + if ($scope.parallaxIf === undefined || $scope.parallaxIf === true) { 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");