https://www.uscatorrufe.ro/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
141            var step = (st - (off - wh)) / ((off + h) - (off - wh)) * speed;
142
143
144            if (parallax.options.direction == 'normal') {
145                var pos = step * (h - ph);
146            } else {
147                var pos = (1 - step) * (h - ph);
148            }
149
150            if (parallax.isIE() && parallax.ieVersion() <= 10) {
151                parallax.$image.css('top', '' + pos + 'px');
152            }
153            else if (parallax.isMobile() && parallax.options.mobile) {
154                if (parallax.isTouched || parallax.isInit) {
155                    parallax.$image.stop().animate({pos: pos}, {
156                        step: function (pos) {
157                            $(this).css('transform', 'translate3d(0, ' + pos + 'px, 0)');
158                        },
159                        duration: parallax.options.duration
160                    }, parallax.options.easing);
161
162                    parallax.isInit = false;

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