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

4 years ago
  1. 'use strict';
  2. angular.module('angular-parallax', [
  3. ]).directive('parallax', ['$window', function($window) {
  4. return {
  5. restrict: 'A',
  6. scope: {
  7. parallaxRatio: '@',
  8. parallaxVerticalOffset: '@',
  9. parallaxHorizontalOffset: '@',
  10. },
  11. link: function($scope, elem, attrs) {
  12. var setPosition = function () {
  13. var calcValY = $window.pageYOffset * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 );
  14. if (calcValY <= $window.innerHeight) {
  15. var topVal = (calcValY < $scope.parallaxVerticalOffset ? $scope.parallaxVerticalOffset : calcValY);
  16. elem.css('transform','translate(' + $scope.parallaxHorizontalOffset + 'px, ' +topVal+ 'px)');
  17. }
  18. };
  19. setPosition();
  20. angular.element($window).bind("scroll", setPosition);
  21. angular.element($window).bind("touchmove", setPosition);
  22. } // link function
  23. };
  24. }]).directive('parallaxBackground', ['$window', function($window) {
  25. return {
  26. restrict: 'A',
  27. transclude: true,
  28. template: '<div ng-transclude></div>',
  29. scope: {
  30. parallaxRatio: '@',
  31. },
  32. link: function($scope, elem, attrs) {
  33. var setPosition = function () {
  34. var calcValY = (elem.prop('offsetTop') - $window.pageYOffset) * ($scope.parallaxRatio ? $scope.parallaxRatio : 1.1 );
  35. // horizontal positioning
  36. elem.css('background-position', "50% " + calcValY + "px");
  37. };
  38. // set our initial position - fixes webkit background render bug
  39. angular.element($window).bind('load', function(e) {
  40. setPosition();
  41. $scope.$apply();
  42. });
  43. angular.element($window).bind("scroll", setPosition);
  44. angular.element($window).bind("touchmove", setPosition);
  45. } // link function
  46. };
  47. }]);