https://www.epogen.com/-/media/Base-Themes/Components-Theme/Scripts/component-container.js

1/**
2 * Component Container
3 * @module Container
4 * @param  {jQuery} $ Instance of jQuery
5 * @param  {Underscore} _ Instance of Underscore
6 * @return {Object} List of Container methods
7 */
8XA.component.parallax = (function($, _) {
9    /**
10     * This object stores all public api methods
11     * @type {Object.<Methods>}
12     * @memberOf module:Container
13     * */
14    var api = {};
15    /**
16     * Check if document size is less than 768px
17     * @memberOf module:Container
18     * @method
19     * @private
20     * @return {boolean} True|False
21     */
22    function checkMobile() {
23        return $(window).width() < 768;
24    }
25     /**
26     * Make parralax effect for container
27     * @memberOf module:Container
28     * @method
29     * @param {jQuery.<Element>} $el 
30     * @private
31     */
32    function makeParallax($el) {
33        var $bg = $el.children(".component-content"),
34            vHeight = $(window).height(),
35            elOffset = $bg[0].offsetTop,
36            elHeight = $bg[0].offsetHeight,
37            isMobile = checkMobile();
38
39        function parallax() {
40            if (isMobile) {
41                return false;
42            }
43
44            var offset = $(window).scrollTop();
45
46            if ((elOffset <= offset + vHeight) && (elOffset + elHeight >= offset)) {
47                $bg.css("background-position", "50% " + Math.round((elOffset - offset) * 3 / 8) + "px");
48            }
49        }
50
51        parallax();
52
53        $(document).on("scroll", _.throttle(parallax, 10));
54        $(window).on("resize", _.throttle(function() {
55            isMobile = checkMobile();
56            isMobile ? $bg.css("background-position", "50% 0") : parallax();
57        }, 150));
58    }
59    /**
60     * Call
61     * ["makeParallax"]{@link  module:Container.makeParallax} method
62     * @memberOf module:Container
63     * @method
64     * @param {jQuery} component Root DOM element of Container component wrapped by jQuery
65     * of container component
66     * @alias module:Container.initInstance
67     */
68    api.initInstance=function(component) {
69        makeParallax(component);
70    }
71    /**
72     * Finds all not-initialized Container
73     * components and runs each container in a loop.
74     * ["initInstance"]{@link module:Container.initInstance}
75     * method.
76     * @memberOf module:Container
77     * @alias module:Container.init
78     */
79    api.init = function() {
80        $('.parallax-background:not(.initialized)').each(function() {
81            api.initInstance($(this));
82            $(this).addClass('initialized');
83        });
84    };
85
86    return api;
87
88})(jQuery, _);
89
90XA.register('parallax-background', XA.component.parallax);