You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
1.7 KiB
52 lines
1.7 KiB
'use strict';
|
|
|
|
angular.module('angular-parallax', [
|
|
]).directive('parallax', ['$window', function($window) {
|
|
return {
|
|
restrict: 'A',
|
|
scope: {
|
|
parallaxRatio: '@',
|
|
parallaxVerticalOffset: '@',
|
|
parallaxHorizontalOffset: '@',
|
|
},
|
|
link: function($scope, elem, attrs) {
|
|
var setPosition = function () {
|
|
var calcValY = $window.pageYOffset * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 );
|
|
if (calcValY <= $window.innerHeight) {
|
|
var topVal = (calcValY < $scope.parallaxVerticalOffset ? $scope.parallaxVerticalOffset : calcValY);
|
|
elem.css('transform','translate(' + $scope.parallaxHorizontalOffset + 'px, ' +topVal+ 'px)');
|
|
}
|
|
};
|
|
|
|
setPosition();
|
|
|
|
angular.element($window).bind("scroll", setPosition);
|
|
angular.element($window).bind("touchmove", setPosition);
|
|
} // link function
|
|
};
|
|
}]).directive('parallaxBackground', ['$window', function($window) {
|
|
return {
|
|
restrict: 'A',
|
|
transclude: true,
|
|
template: '<div ng-transclude></div>',
|
|
scope: {
|
|
parallaxRatio: '@',
|
|
},
|
|
link: function($scope, elem, attrs) {
|
|
var setPosition = function () {
|
|
var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 );
|
|
// horizontal positioning
|
|
elem.css('background-position', "50% " + calcValY + "px");
|
|
};
|
|
|
|
// set our initial position - fixes webkit background render bug
|
|
angular.element($window).bind('load', function(e) {
|
|
setPosition();
|
|
$scope.$apply();
|
|
});
|
|
|
|
angular.element($window).bind("scroll", setPosition);
|
|
angular.element($window).bind("touchmove", setPosition);
|
|
} // link function
|
|
};
|
|
}]);
|