AngularJS Parallax Background Directive

parallax-background.js

(function(angular) {
    'use strict';
    
    var module = angular.module('sscovil.parallax', []);
    
    // Requires jQuery for retreiving computed background-position from angular.element objects
    // Alternative would be to use: window.getComputedStyle(scrollElem, null).backgroundPosition
    module.directive('parallaxBackground', function($window) {
        return {
            restrict: 'A',
            transclude: true,
            template: '<div ng-transclude></div>',
            scope: {
                easing: '@',
                scroll: '@'
            },
            link: function($scope, elem, attrs) {
                var easing = parseFloat($scope.easing || 20);
                var scrollElem = $scope.scroll ? angular.element($scope.scroll) : angular.element($window);
    
                var BackgroundPosition = function(calculated) {
                    var array = (calculated || '0px 0px').trim().split(' ');
                    var xUnitIsPixels = array[0].indexOf('px') !== -1;
                    var yUnitIsPixels = array.length > 1 && array[1].indexOf('px') !== -1;

                    // Only works with 'px' units; keywords and percentages evaluate to 0
                    this.x = xUnitIsPixels ? parseFloat(array[0]) : 0;
                    this.y = yUnitIsPixels ? parseFloat(array[1]) : 0;
                };
    
                var bgPositionString = elem.css('background-position');
                var bgPositionStringArray = bgPositionString.trim().split(/,\s*/);
                var bgPositionObjectArray = [];
    
                for (var i = 0; i < bgPositionStringArray.length; i++) {
                    bgPositionObjectArray.push(new BackgroundPosition(bgPositionStringArray[i]));
                }
    
                var setBackgroundPosition = function() {
                    var bgPosition = '';
    
                    for (var i = 0; i < bgPositionObjectArray.length; i++) {
                        var scrollX = -(scrollElem.scrollLeft() / easing) + bgPositionObjectArray[i].x;
                        var scrollY = -(scrollElem.scrollTop() / easing) + bgPositionObjectArray[i].y;
                        
                        if (i > 0) bgPosition += ', ';
                        bgPosition += scrollX + 'px ';
                        bgPosition += scrollY + 'px';
                    }
    
                    elem.css('background-position', bgPosition);
                };
    
                scrollElem.bind('load', function() {
                    setBackgroundPosition();
                    $scope.$apply();
                });
    
                scrollElem.bind("scroll", setBackgroundPosition);
                scrollElem.bind("touchmove", setBackgroundPosition);
            }
        };
    });
})(angular);