https://nehemiedias.com/structure/js/js-graphic-showcase.js

1
2$(document).ready(function() {
3
4                 $('#background0').fadeOut(800); 
5
6       // ACTIVER LES ANIMATIONS WOW ANIMATED DES ELEMENTS UNIQUEMENT POUR LES RESOLUTIONS > 1024px //
7       // WOW class needed in HTML otherwise not working here //
8        // WOW IS ALSO REMOVED FOR MOBILE IN THE HTML HEAD //      
9         if($(window).width() >= 1025){  
10
11
12                            $('#escape3, #escape4, #escape5').addClass('animated fadeInLeft');  
13                            $('#tasty5').addClass('animated fadeInRight'); 
14                            $('#tasty6').addClass('animated fadeInLeft');  
15                            $('#ggkp1, #ggkp3').addClass('animated fadeInLeft');
16                            $('#ggkp2, #ggkp4').addClass('animated fadeInUp');                           
17                            $('#smugglers4, #smugglers3, #smugglers2').addClass('animated fadeInRight');  
18                            $('#vermeer3, #vermeer4').addClass('animated fadeInUp'); 
19                            $('#artisans1, #artisans2').addClass('animated fadeInLeft'); 
20                            $('#artisans3, #artisans4').addClass('animated fadeInUp'); 
21                            $('#nabird2').addClass('animated fadeInRight');  
22                            $('#cyl3, #cyl4').addClass('animated fadeInUp');  
23                            $('#ungerer4').addClass('animated fadeInDown'); 
24                             $('#ungerer5').addClass('animated fadeInUp');      
25                              $('#ungerer8').addClass('animated slideInRight');  
26                               $('#jet2, #jet4').addClass('animated slideInRight'); 
27                             $('#flamme2').addClass('animated fadeInRight');  
28                             $('#drawing2, #drawing4').addClass('animated fadeInUp');  
29                             $('#drawing10, #drawing11, #drawing12').addClass('animated fadeInDown');  
30                             $('#graphic-lab3, #graphic-lab4, #graphic-lab5, #graphic-lab6, #graphic-lab7, #graphic-lab8, #graphic-lab9, #graphic-lab10, #graphic-lab11, #graphic-lab12, #graphic-lab13, #graphic-lab14, #graphic-lab15, #graphic-lab16, #graphic-lab17, #graphic-lab18, #graphic-lab19, #graphic-lab20, #graphic-lab21, #graphic-lab22, #graphic-lab23, #graphic-lab24, #graphic-lab25, #graphic-lab26, #graphic-lab27').addClass('animated fadeInDown'); 
31
32        }
33
34
35
36                // PERSONNALISED CURSOR - WORKS WITH TWEENMAX JS //
37
38                var circle = document.querySelector(".circle");
39
40                TweenLite.set(circle, {
41                  xPercent: -20,
42                  yPercent: -20
43                });
44
45                window.addEventListener("mousemove", moveCircle);
46
47                function moveCircle(e) {
48                 $('.circle svg circle').removeClass('stroke-no-width');
49                 $('.circle svg circle').addClass('stroke-width');
50
51
52                    TweenLite.to(circle, 0.4, {
53                    x: e.clientX,
54                    y: e.clientY
55                  });
56                }
57
58                // CURSOR SCALE WHEN HOVERING LINKS //
59                $(function() {
60                  $('a').hover(function() {
61                     $('.circle svg circle').css('transform-origin', '20% 20%');       
62                    $('.circle svg circle').css('transform', 'scale(1.5)');
63                    $('.circle svg circle').css('transition', 'all 0.3s');    
64                  }, function() {
65                    // on mouseout, reset the background colour
66                    $('.circle svg circle').css('transform', '');
67                  });
68                });
69
70                // CURSOR DISAPPEARS ON IFRAME TO REMOVE BUG //
71                $(function() {
72                  $('iframe').hover(function() {
73                       $('.circle svg circle').css('opacity', '0');
74                       $('.circle svg circle').css('transition', 'all 0.5s');       
75                  }, function() {
76                    // on mouseout, reset the background colour
77                       $('.circle svg circle').css('opacity', '1');

78                      $('.circle svg circle').css('transition', 'all 1s');        
79                  });
80                });
81
82
83
84
85
86
87
88       $(window).scroll(function(){
89         inViewport();
90       });
91
92       $(window).resize(function(){
93         inViewport();
94       });
95
96
97    // BODY BACKGROUND URL CHANGE //
98   function inViewport(){
99
100        $('#bijouterie').each(function(){
101           var divPos = $(this).offset().top,
102                   topOfWindow = $(window).scrollTop();
103           
104           if( divPos < topOfWindow+500 ){
105             $('#background1').addClass('bijouterie-bg');          
106           }
107
108        });
109
110        $('#escape').each(function(){
111           var divPos = $(this).offset().top,
112                   topOfWindow = $(window).scrollTop();
113           
114           if( divPos < topOfWindow+500 ){  
115
116             $('#background2').addClass('escape-bg');                 
117             $('.escape-bg').fadeIn(800);
118
119
120           }
121
122           if( divPos > topOfWindow+500 ){
123
124             $('.escape-bg').fadeOut(800);
125
126           }
127        });
128
129        $('#tasty').each(function(){
130           var divPos = $(this).offset().top,
131                   topOfWindow = $(window).scrollTop();
132           
133           if( divPos < topOfWindow+500 ){
134
135             $('#background3').addClass('tasty-bg');                 
136             $('.tasty-bg').fadeIn(800);
137
138           }
139
140           if( divPos > topOfWindow+500 ){
141
142             $('.tasty-bg').fadeOut(800);
143
144           }
145        });
146
147         $('#ggkp').each(function(){
148           var divPos = $(this).offset().top,
149                   topOfWindow = $(window).scrollTop();
150           
151           if( divPos < topOfWindow+500 ){
152
153             $('#background4').addClass('ggkp-bg');                 
154             $('.ggkp-bg').fadeIn(800);
155
156           }
157
158           if( divPos > topOfWindow+500 ){
159
160             $('.ggkp-bg').fadeOut(800);
161
162           }
163        });       
164
165
166   //     $('#smugglers').each(function(){
167   //        var divPos = $(this).offset().top,
168   //                topOfWindow = $(window).scrollTop();
169           
170   //        if( divPos < topOfWindow+500 ){
171
172   //          $('#background4').addClass('smugglers-bg');                 
173   //          $('.smugglers-bg').fadeIn(800);
174
175   //        }
176
177    //       if( divPos > topOfWindow+500 ){
178
179     //        $('.smugglers-bg').fadeOut(800);
180
181     //      }
182     //   });
183
184        $('#vermeer').each(function(){
185           var divPos = $(this).offset().top,
186                   topOfWindow = $(window).scrollTop();
187           
188           if( divPos < topOfWindow+500 ){
189
190             $('#background5').addClass('vermeer-bg');                 
191             $('.vermeer-bg').fadeIn(800);
192
193           }
194
195           if( divPos > topOfWindow+500 ){
196
197             $('.vermeer-bg').fadeOut(800);
198
199           }
200        });
201
202         $('#artisans').each(function(){
203           var divPos = $(this).offset().top,
204                   topOfWindow = $(window).scrollTop();
205           
206           if( divPos < topOfWindow+500 ){
207
208             $('#background6').addClass('artisans-bg');                 
209             $('.artisans-bg').fadeIn(800);
210
211           }
212
213           if( divPos > topOfWindow+500 ){
214
215             $('.artisans-bg').fadeOut(800);
216
217           }
218        });       
219
220    //    $('#nabird').each(function(){
221    //       var divPos = $(this).offset().top,
222     //              topOfWindow = $(window).scrollTop();
223           
224     //      if( divPos < topOfWindow+500 ){
225
226     //        $('#background6').addClass('nabird-bg');                 
227     //        $('.nabird-bg').fadeIn(800);
228
229
230     //      }
231
232     //      if( divPos > topOfWindow+500 ){
233
234      //       $('.nabird-bg').fadeOut(800);
235
236      //     }
237     //   });
238
239
240        $('#cyl').each(function(){
241           var divPos = $(this).offset().top,
242                   topOfWindow = $(window).scrollTop();
243           
244           if( divPos < topOfWindow+500 ){
245
246             $('#background7').addClass('cyl-bg');                 
247             $('.cyl-bg').fadeIn(800);
248
249           }
250
251           if( divPos > topOfWindow+500 ){
252
253             $('.cyl-bg').fadeOut(800);
254
255           }
256        });
257
258
259        $('#ungerer').each(function(){
260           var divPos = $(this).offset().top,
261                   topOfWindow = $(window).scrollTop();
262           
263           if( divPos < topOfWindow+500 ){
264
265             $('#background8').addClass('ungerer-bg');                 
266             $('.ungerer-bg').fadeIn(800);
267
268           }
269
270           if( divPos > topOfWindow+500 ){
271
272             $('.ungerer-bg').fadeOut(800);
273
274           }
275        });
276
277        $('#jet').each(function(){
278           var divPos = $(this).offset().top,
279                   topOfWindow = $(window).scrollTop();
280           
281           if( divPos < topOfWindow+500 ){
282
283             $('#background9').addClass('jet-bg');                 
284             $('.jet-bg').fadeIn(800);
285
286           }
287
288           if( divPos > topOfWindow+500 ){
289
290             $('.jet-bg').fadeOut(800);
291
292           }
293        });
294
295
296        $('#flamme').each(function(){
297           var divPos = $(this).offset().top,
298                   topOfWindow = $(window).scrollTop();
299           
300           if( divPos < topOfWindow+500 ){
301
302             $('#background10').addClass('flamme-bg');                 
303             $('.flamme-bg').fadeIn(800);
304
305           }
306
307           if( divPos > topOfWindow+500 ){
308
309             $('.flamme-bg').fadeOut(800);
310
311           }
312        });
313
314         $('#drawing').each(function(){
315           var divPos = $(this).offset().top,
316                   topOfWindow = $(window).scrollTop();
317           
318           if( divPos < topOfWindow+500 ){
319
320             $('#background11').addClass('drawing-bg');                 
321             $('.drawing-bg').fadeIn(800);
322        
323           }
324
325           if( divPos > topOfWindow+500 ){
326
327             $('.drawing-bg').fadeOut(800);
328
329           }
330        });     
331
332         $('#graphic-lab').each(function(){
333           var divPos = $(this).offset().top, ext
334                   topOfWindow = $(window).scrollTop();
335           
336           if( divPos < topOfWindow+500 ){
337
338             $('#background12').addClass('graphic-lab-bg');                 
339             $('.graphic-lab-bg').fadeIn(800);    
340
341;            
342
343             
344           }
345
346           if( divPos > topOfWindow+500 ){
347
348             $('.graphic-lab-bg').fadeOut(800);
349
350           }
351        });     
352
353
354   }
355
356               
357
358});