https://rohim.net/modules/mod_tm_parallax/js/jquery.rd-parallax.js

1/*
2 * Author: Evgeniy Gusarov StMechanus (Diversant)
3 * Under the MIT License
4 *
5 * Version: 2.0.1
6 *
7 */
8
9
10;
11(function ($) {
12
13    var RDParallax = function (element, options) {
14        this.options = options;
15
16        this.settings = {
17            'imageClass': 'parallax_image',
18            'patternClass': 'parallax_pattern',
19            'contentClass': 'parallax_cnt',
20            'wrapClass': 'parallax'
21        }
22
23        this.$wrap = $(element);
24
25        this.$image = $.noop();
26    };
27
28    RDParallax.prototype = {
29        init: function () {
30            var parallax = this;
31            parallax.isInit = true;
32            parallax.createDOM();
33            parallax.blur();
34            parallax.createListeners();
35        },
36
37        createDOM: function () {
38            var parallax = this;
39
40            parallax
41                .$wrap
42                .addClass(parallax.settings.wrapClass)
43                .wrapInner($('<div/>', {
44                    'class': parallax.settings.contentClass
45                }))
46                .prepend($('<div/>', {
47                    'class': (parallax.options.pattern ? parallax.settings.patternClass : parallax.settings.imageClass)
48                }).css({
49                    'background-image': 'url(' + parallax.options.url + ')',
50                    'background-color': parallax.options.color
51                }));
52
53            parallax.$image = parallax.options.pattern ? parallax.$wrap.find('.' + parallax.settings.patternClass) : parallax.$wrap.find('.' + parallax.settings.imageClass);
54        },
55
56        createListeners: function () {
57            this.createResizeListener();
58            this.createScrollListener();
59        },
60
61        createScrollListener: function () {
62            var parallax = this;
63
64            if (parallax.isMobile()) {
65                if (!parallax.options.mobile) {
66                    return;
67                }
68            }
69
70            $(window).bind('touchstart', function () {
71                parallax.isTouched = true;
72            });
73
74            $(window).bind('touchend', function () {
75                if (parallax.timer) {
76                    clearTimeout(parallax.timer);
77                }
78
79                parallax.timer = setTimeout(function () {
80                    parallax.isTouched = false;
81                }, 1200);
82            });
83
84            $(window).bind('scroll', function () {
85                parallax.move();
86            });
87            parallax.move();
88        },
89
90        createResizeListener: function () {
91            var parallax = this;
92
93            if (parallax.isMobile()) {
94                if (!parallax.options.mobile) {
95                    return;
96                }
97            }
98
99            if (!parallax.isMobile()) {
100                $(window).bind('resize', function () {
101                    parallax.resize();
102                });
103            }
104
105            $(window).bind('orientationchange', function () {
106                setTimeout(function () {
107                    parallax.resize();
108                }, 300);
109            });
110
111            parallax.resize();
112        },
113
114        move: function () {
115            var parallax = this;
116
117            if (!parallax.isVisible()) {
118                return;
119            }
120
121            if (parallax.isMobile()) {
122                if (!parallax.options.mobile) {
123                    return;
124                }
125            }
126
127            var st = $(window).scrollTop(),
128                off = parallax.$wrap.offset().top,
129                wh = $(window).height(),
130                h = parallax.$wrap.outerHeight(),
131                ph = parallax.$image.height();
132
133            var speed = parallax.options.speed;
134            if (speed < 0) {
135                speed = 0;
136            }
137            if (speed > 1) {
138                speed = 1;
139            }
140            var step = (st - (off - wh)) / ((off + h) - (off - wh)) * speed;
141
142            if (parallax.options.direction == 'normal') {
143                var pos = step * (h - ph);
144            } else {
145                var pos = (1 - step) * (h - ph);
146            }
147
148            if (parallax.isIE() && parallax.ieVersion() <= 10) {
149                parallax.$image.css('top', '' + pos + 'px');
150            }
151            else if (parallax.isMobile() && parallax.options.mobile) {
152                if (parallax.isTouched || parallax.isInit) {
153                    parallax.$image.stop().animate({pos: pos}, {
154                        step: function (pos) {
155                            $(this).css('transform', 'translate3d(0, ' + pos + 'px, 0)');
156                        },
157                        duration: parallax.options.duration
158                    }, parallax.options.easing);
159
160                    parallax.isInit = false;

161                }
162            } else {
163
164                parallax.$image.css('transform', 'translate3d(0, ' + pos + 'px, 0)');
165            }
166
167            if (parallax.isFirefox() && window.devicePixelRatio < 1) {
168                parallax.$image.css('background-color', '#010101');
169
170                setTimeout(function () {
171                    parallax.$image.css('background-color', parallax.options.color);
172                }, 10);
173            }
174        },
175
176        resize: function () {
177            var parallax = this,
178                h = Math.max($(window).height(), 500);
179
180            if (h < parallax.$wrap.outerHeight()) {
181                h = parallax.$wrap.outerHeight() + $(window).height() * parallax.options.speed;
182            }
183
184            parallax.$image.height(h);
185
186            setTimeout(function () {
187                parallax.move();
188                parallax.blur();
189            }, 300);
190        },
191
192        blur: function () {
193            var parallax = this;
194
195            if (parallax.options.blur && !parallax.isIE() && !parallax.options.pattern) {
196
197                $('<img/>', {src: parallax.options.url}).load(function () {
198                    var dh = parallax.$image.height() / this.height,
199                        dw = parallax.$image.width() / this.width,
200                        blur = Math.floor(Math.max(dh, dw));
201
202
203                    if (blur > 2) {
204                        parallax.$image.css({
205                            'filter': 'blur(' + blur + 'px)',
206                            '-webkit-filter': 'blur(' + blur + 'px)'
207                        });
208                    } else {
209                        parallax.$image.css({
210                            'filter': 'blur(' + 0 + 'px)',
211                            '-webkit-filter': 'blur(' + 0 + 'px)'
212                        });
213                    }
214                });
215
216            }
217        },
218
219        isVisible: function () {
220            var parallax = this,
221
222                windowScroll = $(window).scrollTop(),
223                windowHeight = $(window).height(),
224                parallaxOffset = parallax.$wrap.offset().top,
225                parallaxHeight = parallax.$wrap.outerHeight();
226
227            return (parallaxOffset + parallaxHeight >= windowScroll) && (parallaxOffset <= windowScroll + windowHeight)
228        },
229
230        isIE: function () {
231            if (navigator.appVersion.indexOf("MSIE") != -1) {
232                return true;
233            }
234            return false;
235        },
236
237        isMobile: function () {
238            return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
239        },
240
241        ieVersion: function () {
242            return parseFloat(navigator.appVersion.split("MSIE")[1]);
243        },
244
245        isFirefox: function () {
246            return typeof InstallTrigger !== 'undefined';
247        }
248    };
249
250    $.fn.rdparallax = function (option) {
251        var element = this.each(function () {
252            var options = $.extend({}, $.fn.rdparallax.defaults, option);
253
254            if (options.url) {
255                new RDParallax(this, options).init();
256            } else {
257                console.error('RD Parallax: data-url is not defined');
258            }
259        });
260        return element;
261    };
262
263    $.fn.rdparallax.defaults = {
264        speed: 0.4,
265        direction: 'normal',
266        blur: false,
267        mobile: false,
268        url: false,
269        pattern: false,
270        duration: 200,
271        easing: 'linear',
272        color: 'inherit'
273    };
274
275    window.RDParallax_autoinit = function (selector) {
276        $(selector).each(function () {
277            var options = $.extend({}, $.fn.rdparallax.defaults, {
278                url: $(this).data('url'),
279                speed: $(this).data('speed'),
280                direction: $(this).data('direction'),
281                blur: $(this).data('blur'),
282                mobile: $(this).data('mobile'),
283                pattern: $(this).data('pattern'),
284                color: $(this).data('color')
285            });
286
287            if (options.url) {
288                new RDParallax(this, options).init();
289            } else {
290                console.error('RD Parallax: data-url is not defined');
291            }
292        });
293    };
294})(jQuery);
295
296;
297(function ($) {
298    $(document).ready(function () {
299        RDParallax_autoinit('.parallax');
300    });
301})(jQuery);