https://arbezie.com/assets/themes/theme-apiandyou/public/modules/internal/jquery.parallax.js

1/* global $:true, jQuery:true, Jadro:true, _:true, Modernizr:true, console: true, TweenMax:true*/
2
3// Declaration de la variable de cache
4
5
6window.Apy = window.Apy || {};
7
8var resize = false;
9var parallaxElem;
10
11
12Apy.parallax = {
13
14    init : function(){
15        var self = this;
16
17        cache.activPara = self.enabled();
18        
19        if(cache.activPara){
20            cache.interval = false;
21            cache.$cP = $(cache.containerParallax);
22            cache.body.prepend('<div class="'+cache.containerScroll+'"></div>');
23            cache.$cP.wrapAll( '<div class="box-scroll"><div class="'+cache.scrollContent+'"></div></div>');
24            cache.$cS = $("."+cache.containerScroll);
25            cache.$S = $("."+cache.scrollContent);
26            
27        }
28
29    },
30
31    load : function(samePage){
32        var self = this;
33        if(!samePage.api.jadro.isSamePage){
34            resize = true;
35            cache.document.scrollTop(0);
36            cache.$S.css('transform', 'none');
37            Apy.parallax.scroll();
38            Apy.parallax.cachePara();
39            resize = false;
40        }
41       
42    },
43    goToAnchor : function($target,decalage){
44
45        if(decalage == undefined){decalage = 0};
46
47        resize = true;
48            scrollValue = cache.document.scrollTop();
49            cache.document.scrollTop(0);
50            cache.$S.css('transform', 'none');
51            topValue = $target.offset().top;
52            moveValue = topValue - decalage;
53            cache.document.scrollTop(scrollValue);
54        resize = false;
55
56        cache.document.scrollTop(moveValue);
57
58    },
59    resize : function(){
60
61        var self = this;
62        resize = true;
63
64        if(cache.activPara){
65
66            TweenMax.killAll();
67            self.scroll();
68
69            var scrollpos = cache.document.scrollTop();
70
71            cache.document.scrollTop(0);
72            cache.$S.css('transform', 'none');
73         
74            Apy.parallax.cachePara();
75            
76            cache.document.scrollTop(scrollpos);
77            TweenMax.to(cache.$S,0, {y: '-' + scrollpos + 'px'});
78        }
79
80        resize = false;
81
82
83
84    },
85
86    enabled: function() {
87        var self = this;
88        for (validPara in cache.noParallaxe) {
89            if(cache.noParallaxe[validPara] === true){
90                cache.body.addClass('no-parallaxe')
91                return false;
92            }
93        }
94        cache.body.addClass('parallaxe')
95        return true;
96
97    },
98
99    scroll: function () {
100        var self = this;
101        if (cache.activPara) {
102            cache.$cS.height(cache.$S.height());
103        }
104    },
105
106    cachePara: function () {
107        var self = this;
108        
109        parallaxElem = {};
110        var thiselem;
111
112        for (item in cache.parallaxElem) {
113
114            thiselem = [];
115           
116            // On verifie si l'xiste
117            if ($(cache.parallaxElem[item]).length) {
118
119                $(cache.parallaxElem[item]).each(function(){
120                    $(this).css('transform','none');
121                    thiselem.push([$(this), $(this).offset().top, $(this).height()]);
122                    $(this).css('transform','');
123                });
124                parallaxElem[item] = thiselem;
125            }
126
127        }
128
129    },
130
131    onparallaxe : function (scroll, element, offsetTop, elh, props, enterStage, onStage, leaveStage, unit) {
132
133        // On empeche d'effectuer les calculs si l'on est pas entre 0 et 1
134        // ********************************************** //
135        var playAnim = false;
136
137        if (element.length) {
138
139            // On parcourt le tableau de propriétés à modifier
140
141            // ANIMATION "WOW" (enterStage est la rapport à la hauteur de l'écran à laquelle l'animation se déclenche)
142            if(props == 'wow'){
143
144                viewptop = offsetTop < (scroll + cache.vph);
145                viewpbottom = (offsetTop + elh) > scroll;
146
147                if(viewptop && viewpbottom){
148
149                    val = 1 + (scroll - offsetTop) / (cache.vph);
150
151                    if(!enterStage){enterStage = 0.1}
152
153                    if(val >= enterStage) {
154                        if(!element.hasClass('wow')) { element.addClass('wow'); }
155                    } 
156                }
157                else {
158                        if(element.hasClass('wow')) { element.removeClass('wow'); }
159                }
160            }
161            // AUTRES ANIMATIONS
162            else{
163                // S'il s'agit d'animations prédéfinies, on hydrate les valeurs de props, enterStage, onStage, et leaveStage
164                
165                var cssProps = {};
166
167                for(i = 0; i < props.length; i += 1) {
168
169                    // ON EFFECTUE LE CALCUL DE PARALLAXE
170                    // ****************************** //
171                    val =  (scroll + cache.vph - offsetTop) / (cache.vph + elh);
172
173                    // SI ON EST ENTRE 0% ET 50% DU VIEWPORT
174                    if(val <= 0.5){
175                        if(val >= -1) {
176                            value = ((onStage[i] - enterStage[i]) / 100) * (200 * val) + enterStage[i];
177                            playAnim = true;
178                        }
179
180                    }
181                    // SI ON EST ENTRE 50% ET 100% DU VIEWPORT
182                    else{
183                        if(val <= 1) {
184                            value = ((leaveStage[i] - onStage[i]) / 100) * (200 * (val - 0.5)) + onStage[i];
185                            playAnim = true;
186                        }
187                    }
188
189                    // En fonction de la propriété ciblée :
190                    // ------------------------------------
191                    if (playAnim) {
192
193                        // On initialise l'objet des transformations
194                        // ***************************** //
195
196                        switch(props[i]) {
197                            

198                            // = Background Position Horizontal
199                            case 'backgroundPositionX' :
200                                cssProps.backgroundPosition = value + unit[i] + ' 0%';
201                            break;
202                            // = autres
203                            default :
204                                if (unit != undefined) {
205                                    cssProps[props[i]] = value + unit[i];
206                                }
207                                else{
208                                    cssProps[props[i]] = value;
209                                }
210                            break;
211                        }
212
213                        // LANCEMENT DES ANIMATIONS
214                        TweenMax.to(element, cache.smooth, cssProps);
215                    }
216                }
217            }
218
219        }
220    }
221
222};
223
224
225
226window.onscroll = function() {
227    'use strict';
228
229    var postop = Math.max(cache.document.scrollTop());
230
231    var api = {
232        'scroll': postop,
233        'scrollInPercent': 1 - ((postop * 100 / cache.vph) / 100),
234        'enabled': ( !resize && cache.activPara ) ? true : false,
235    }
236    
237    if(api.enabled){   
238        TweenMax.to(cache.$S,cache.smooth,{y: '-' + postop + 'px'});
239    }
240
241    cache.document.trigger({type: 'scrollParallax', api:api, elements: parallaxElem});
242
243};
244
245var parallaxMe = function (e,element,prop,param) {
246    'use strict';
247    
248    var event = e.api;
249    var elem = e.elements[element];
250
251
252    if (elem != undefined && event.enabled) {
253        if(prop == "fixed"){
254            $.each(elem,function(){
255                TweenMax.to($(this)[0], cache.smooth, {y: (event.scroll - this[1]) + 'px'});
256            });
257        }
258        if(prop == "wow"){
259            $.each(elem,function(){
260                Apy.parallax.onparallaxe(event.scroll, $(this)[0], this[1], this[2], 'wow');
261            });
262        }
263        if(prop == "inViewport"){
264            $.each(elem,function(){
265                if(event.scrollInPercent > -1){
266                    TweenMax.to($(this)[0],cache.smooth,param);
267                }
268            });
269        }
270        if(typeof prop == 'object'){
271            $.each(elem,function(){
272                Apy.parallax.onparallaxe(event.scroll, $(this)[0], this[1], this[2], prop[0],  prop[1], prop[2], prop[3], prop[4]);
273            });
274        }
275
276    } 
277
278};
279
280
281
282
283
284
285Apy.parallax.init();
286
287cache.document.bind('allloaded', function(e) {
288    if(cache.activPara){
289        Apy.parallax.load(e);
290    }
291});
292
293cache.window.resize(_.debounce(Apy.parallax.resize, 100));
294
295cache.document.ready(function () {
296    if(!cache.interval){
297        cache.interval = setInterval(function(){ 
298            if(!cache.onpageLoad && cache.activPara){
299                if(Math.round(cache.$cS.height()) != Math.round(cache.$S.height())){ 
300                    Apy.parallax.scroll();
301                    Apy.parallax.resize();
302                }
303            }
304
305        }, 2000);
306    }
307
308    Apy.parallax.scroll();
309    Apy.parallax.cachePara();
310
311    var target = window.location.hash;
312    
313    if(target){
314        var $target = (typeof target == 'string') ? $(target) : target;
315        Apy.parallax.goToAnchor($target);
316    }
317});