https://inabado.jp/wp/wp-content/themes/inabado_theme/anime.js

1// 動きのきっかけの起点となるアニメーションの名前を定義
2function fadeAnime() {
3  // ふわっ
4
5  $(".fadeInTrigger").each(function () {
6    //fadeInTriggerというクラス名が
7    var elemPos = $(this).offset().top - 50; //要素より、50px上の
8    var scroll = $(window).scrollTop();
9    var windowHeight = $(window).height();
10    if (scroll >= elemPos - windowHeight) {
11      $(this).addClass("fadeIn"); // 画面内に入ったらfadeInというクラス名を追記
12    } else {
13      $(this).removeClass("fadeIn"); // 画面外に出たらfadeInというクラス名を外す
14    }
15  });
16
17  $(".fadeUpTrigger").each(function () {
18    //fadeUpTriggerというクラス名が
19    var elemPos = $(this).offset().top - 50; //要素より、50px上の
20    var scroll = $(window).scrollTop();
21    var windowHeight = $(window).height();
22    if (scroll >= elemPos - windowHeight) {
23      $(this).addClass("fadeUp"); // 画面内に入ったらfadeUpというクラス名を追記
24    } else {
25      $(this).removeClass("fadeUp"); // 画面外に出たらfadeUpというクラス名を外す
26    }
27  });
28
29  $(".fadeUpTrigger2").each(function () {
30    //fadeUpTriggerというクラス名が
31    var elemPos = $(this).offset().top - 50; //要素より、50px上の
32    var scroll = $(window).scrollTop();
33    var windowHeight = $(window).height();
34    if (scroll >= elemPos - windowHeight) {
35      $(this).addClass("fadeUp2"); // 画面内に入ったらfadeUpというクラス名を追記
36    } else {
37      $(this).removeClass("fadeUp2"); // 画面外に出たらfadeUpというクラス名を外す
38    }
39  });
40
41  $(".fadeDownTrigger").each(function () {
42    //fadeDownTriggerというクラス名が
43    var elemPos = $(this).offset().top - 50; //要素より、50px上の
44    var scroll = $(window).scrollTop();
45    var windowHeight = $(window).height();
46    if (scroll >= elemPos - windowHeight) {
47      $(this).addClass("fadeDown"); // 画面内に入ったらfadeDownというクラス名を追記
48    } else {
49      $(this).removeClass("fadeDown"); // 画面外に出たらfadeDownというクラス名を外す
50    }
51  });
52
53  $(".fadeLeftTrigger").each(function () {
54    //fadeLeftTriggerというクラス名が
55    var elemPos = $(this).offset().top - 50; //要素より、50px上の
56    var scroll = $(window).scrollTop();
57    var windowHeight = $(window).height();
58    if (scroll >= elemPos - windowHeight) {
59      $(this).addClass("fadeLeft"); // 画面内に入ったらfadeLeftというクラス名を追記
60    } else {
61      $(this).removeClass("fadeLeft"); // 画面外に出たらfadeLeftというクラス名を外す
62    }
63  });
64
65  $(".fadeRightTrigger").each(function () {
66    //fadeRightTriggerというクラス名が
67    var elemPos = $(this).offset().top - 50; //要素より、50px上の
68    var scroll = $(window).scrollTop();
69    var windowHeight = $(window).height();
70    if (scroll >= elemPos - windowHeight) {
71      $(this).addClass("fadeRight"); // 画面内に入ったらfadeRightというクラス名を追記
72    } else {
73      $(this).removeClass("fadeRight"); // 画面外に出たらfadeRightというクラス名を外す
74    }
75  });
76
77  $(".fadeRightTrigger2").each(function () {
78    //fadeRightTriggerというクラス名が
79    var elemPos = $(this).offset().top - 50; //要素より、50px上の
80    var scroll = $(window).scrollTop();
81    var windowHeight = $(window).height();
82    if (scroll >= elemPos - windowHeight) {
83      $(this).addClass("fadeRight2"); // 画面内に入ったらfadeRightというクラス名を追記
84    } else {
85      $(this).removeClass("fadeRight2"); // 画面外に出たらfadeRightというクラス名を外す
86    }
87  });
88
89  // パタッ
90
91  $(".flipDownTrigger").each(function () {
92    //flipDownTriggerというクラス名が
93    var elemPos = $(this).offset().top - 50; //要素より、50px上の
94    var scroll = $(window).scrollTop();
95    var windowHeight = $(window).height();
96    if (scroll >= elemPos - windowHeight) {
97      $(this).addClass("flipDown"); // 画面内に入ったらflipDownというクラス名を追記
98    } else {
99      $(this).removeClass("flipDown"); // 画面外に出たらflipDownというクラス名を外す
100    }
101  });
102
103  $(".flipLeftTrigger").each(function () {
104    //flipLeftTriggerというクラス名が

105    var elemPos = $(this).offset().top - 50; //要素より、50px上の
106    var scroll = $(window).scrollTop();
107    var windowHeight = $(window).height();
108    if (scroll >= elemPos - windowHeight) {
109      $(this).addClass("flipLeft"); // 画面内に入ったらflipLeftというクラス名を追記
110    } else {
111      $(this).removeClass("flipLeft"); // 画面外に出たらflipLeftというクラス名を外す
112    }
113  });
114
115  $(".flipLeftTopTrigger").each(function () {
116    //flipLeftTopTriggerというクラス名が
117    var elemPos = $(this).offset().top - 50; //要素より、50px上の
118    var scroll = $(window).scrollTop();
119    var windowHeight = $(window).height();
120    if (scroll >= elemPos - windowHeight) {
121      $(this).addClass("flipLeftTop"); // 画面内に入ったらflipLeftTopというクラス名を追記
122    } else {
123      $(this).removeClass("flipLeftTop"); // 画面外に出たらflipLeftTopというクラス名を外す
124    }
125  });
126
127  $(".flipRightTrigger").each(function () {
128    //flipRightTriggerというクラス名が
129    var elemPos = $(this).offset().top - 50; //要素より、50px上の
130    var scroll = $(window).scrollTop();
131    var windowHeight = $(window).height();
132    if (scroll >= elemPos - windowHeight) {
133      $(this).addClass("flipRight"); // 画面内に入ったらflipRightというクラス名を追記
134    } else {
135      $(this).removeClass("flipRight"); // 画面外に出たらflipRightというクラス名を外す
136    }
137  });
138
139  $(".flipRightTopTrigger").each(function () {
140    //flipRightTopTriggerというクラス名が
141    var elemPos = $(this).offset().top - 50; //要素より、50px上の
142    var scroll = $(window).scrollTop();
143    var windowHeight = $(window).height();
144    if (scroll >= elemPos - windowHeight) {
145      $(this).addClass("flipRightTop"); // 画面内に入ったらflipRightTopというクラス名を追記
146    } else {
147      $(this).removeClass("flipRightTop"); // 画面外に出たらflipRightTopというクラス名を外す
148    }
149  });
150
151  // くるっ
152
153  $(".rotateXTrigger").each(function () {
154    //rotateXTriggerというクラス名が
155    var elemPos = $(this).offset().top - 50; //要素より、50px上の
156    var scroll = $(window).scrollTop();
157    var windowHeight = $(window).height();
158    if (scroll >= elemPos - windowHeight) {
159      $(this).addClass("rotateX"); // 画面内に入ったらrotateXというクラス名を追記
160    } else {
161      $(this).removeClass("rotateX"); // 画面外に出たらrotateXというクラス名を外す
162    }
163  });
164
165  $(".rotateYTrigger").each(function () {
166    //rotateYTriggerというクラス名が
167    var elemPos = $(this).offset().top - 50; //要素より、50px上の
168    var scroll = $(window).scrollTop();
169    var windowHeight = $(window).height();
170    if (scroll >= elemPos - windowHeight) {
171      $(this).addClass("rotateY"); // 画面内に入ったらrotateYというクラス名を追記
172    } else {
173      $(this).removeClass("rotateY"); // 画面外に出たらrotateYというクラス名を外す
174    }
175  });
176
177  $(".rotateLeftZTrigger").each(function () {
178    //rotateLeftZTriggerというクラス名が
179    var elemPos = $(this).offset().top - 50; //要素より、50px上の
180    var scroll = $(window).scrollTop();
181    var windowHeight = $(window).height();
182    if (scroll >= elemPos - windowHeight) {
183      $(this).addClass("rotateLeftZ"); // 画面内に入ったらrotateLeftZというクラス名を追記
184    } else {
185      $(this).removeClass("rotateLeftZ"); // 画面外に出たらrotateLeftZというクラス名を外す
186    }
187  });
188
189  $(".rotateRightZTrigger").each(function () {
190    //rotateRightZTriggerというクラス名が
191    var elemPos = $(this).offset().top - 50; //要素より、50px上の
192    var scroll = $(window).scrollTop();
193    var windowHeight = $(window).height();
194    if (scroll >= elemPos - windowHeight) {
195      $(this).addClass("rotateRightZ"); // 画面内に入ったらrotateRightZというクラス名を追記
196    } else {
197      $(this).removeClass("rotateRightZ"); // 画面外に出たらrotateRightZというクラス名を外す
198    }
199  });
200
201  // ボンッ
202
203  $(".zoomInTrigger").each(function () {
204    //zoomInTriggerというクラス名が

205    var elemPos = $(this).offset().top - 50; //要素より、50px上の
206    var scroll = $(window).scrollTop();
207    var windowHeight = $(window).height();
208    if (scroll >= elemPos - windowHeight) {
209      $(this).addClass("zoomIn"); // 画面内に入ったらzoomInというクラス名を追記
210    } else {
211      $(this).removeClass("zoomIn"); // 画面外に出たらzoomInというクラス名を外す
212    }
213  });
214
215  // ヒュッ
216
217  $(".zoomOutTrigger").each(function () {
218    //zoomOutTriggerというクラス名が
219    var elemPos = $(this).offset().top - 50; //要素より、50px上の
220    var scroll = $(window).scrollTop();
221    var windowHeight = $(window).height();
222    if (scroll >= elemPos - windowHeight) {
223      $(this).addClass("zoomOut"); // 画面内に入ったらzoomOutというクラス名を追記
224    } else {
225      $(this).removeClass("zoomOut"); // 画面外に出たらzoomOutというクラス名を外す
226    }
227  });
228
229  // じわっ
230
231  $(".blurTrigger").each(function () {
232    //blurTriggerというクラス名が
233    var elemPos = $(this).offset().top - 0; //要素より、50px上の
234    var scroll = $(window).scrollTop();
235    var windowHeight = $(window).height();
236    if (scroll >= elemPos - windowHeight) {
237      $(this).addClass("blur"); // 画面内に入ったらblurというクラス名を追記
238    } else {
239      $(this).removeClass("blur"); // 画面外に出たらblurというクラス名を外す
240    }
241  });
242
243  // にゅーん
244
245  $(".smoothTrigger").each(function () {
246    //smoothTriggerというクラス名が
247    var elemPos = $(this).offset().top - 50; //要素より、50px上の
248    var scroll = $(window).scrollTop();
249    var windowHeight = $(window).height();
250    if (scroll >= elemPos - windowHeight) {
251      $(this).addClass("smooth"); // 画面内に入ったらsmoothというクラス名を追記
252    } else {
253      $(this).removeClass("smooth"); // 画面外に出たらsmoothというクラス名を外す
254    }
255  });
256
257  // スーッ（枠線が伸びて出現）
258
259  $(".lineTrigger").each(function () {
260    //lineTriggerというクラス名が
261    var elemPos = $(this).offset().top - 50; //要素より、50px上の
262    var scroll = $(window).scrollTop();
263    var windowHeight = $(window).height();
264    if (scroll >= elemPos - windowHeight) {
265      $(this).addClass("lineanime"); // 画面内に入ったらlineanimeというクラス名を追記
266    } else {
267      $(this).removeClass("lineanime"); // 画面外に出たらlineanimeというクラス名を外す
268    }
269  });
270
271  // シャッ（背景色が伸びて出現）
272
273  $(".bgLRextendTrigger").each(function () {
274    //bgLRextendTriggerというクラス名が
275    var elemPos = $(this).offset().top - 50; //要素より、50px上の
276    var scroll = $(window).scrollTop();
277    var windowHeight = $(window).height();
278    if (scroll >= elemPos - windowHeight) {
279      $(this).addClass("bgLRextend"); // 画面内に入ったらbgLRextendというクラス名を追記
280    } else {
281      $(this).removeClass("bgLRextend"); // 画面外に出たらbgLRextendというクラス名を外す
282    }
283  });
284
285  $(".bgRLextendTrigger").each(function () {
286    //bgRLextendTriggerというクラス名が
287    var elemPos = $(this).offset().top - 50; //要素より、50px上の
288    var scroll = $(window).scrollTop();
289    var windowHeight = $(window).height();
290    if (scroll >= elemPos - windowHeight) {
291      $(this).addClass("bgRLextend"); // 画面内に入ったらbgRLextendというクラス名を追記
292    } else {
293      $(this).removeClass("bgRLextend"); // 画面外に出たらbgRLextendというクラス名を外す
294    }
295  });
296
297  $(".bgDUextendTrigger").each(function () {
298    //bgDUextendTriggerというクラス名が
299    var elemPos = $(this).offset().top - 50; //要素より、50px上の
300    var scroll = $(window).scrollTop();
301    var windowHeight = $(window).height();
302    if (scroll >= elemPos - windowHeight) {
303      $(this).addClass("bgDUextend"); // 画面内に入ったらbgDUextendというクラス名を追記
304    } else {
305      $(this).removeClass("bgDUextend"); // 画面外に出たらbgDUextendというクラス名を外す
306    }
307  });
308
309  $(".bgUDextendTrigger").each(function () {
310    //bgUDextendTriggerというクラス名が

311    var elemPos = $(this).offset().top - 50; //要素より、50px上の
312    var scroll = $(window).scrollTop();
313    var windowHeight = $(window).height();
314    if (scroll >= elemPos - windowHeight) {
315      $(this).addClass("bgUDextend"); // 画面内に入ったらbgUDextendというクラス名を追記
316    } else {
317      $(this).removeClass("bgUDextend"); // 画面外に出たらbgUDextendというクラス名を外す
318    }
319  });
320
321  $(".bgappearTrigger").each(function () {
322    //bgappearTriggerというクラス名が
323    var elemPos = $(this).offset().top - 50; //要素より、50px上の
324    var scroll = $(window).scrollTop();
325    var windowHeight = $(window).height();
326    if (scroll >= elemPos - windowHeight) {
327      $(this).addClass("bgappear"); // 画面内に入ったらbgappearというクラス名を追記
328    } else {
329      $(this).removeClass("bgappear"); // 画面外に出たらbgappearというクラス名を外す
330    }
331  });
332
333  $(".bgUDextendTrigger").each(function () {
334    //bgUDextendTriggerというクラス名が
335    var elemPos = $(this).offset().top - 50; //要素より、50px上の
336    var scroll = $(window).scrollTop();
337    var windowHeight = $(window).height();
338    if (scroll >= elemPos - windowHeight) {
339      $(this).addClass("bgUDextend"); // 画面内に入ったらbgUDextendというクラス名を追記
340    } else {
341      $(this).removeClass("bgUDextend"); // 画面外に出たらbgUDextendというクラス名を外す
342    }
343  });
344
345
346//custom_right
347$(".custom_right_trigger").each(function () {
348  //custom_right_triggerというクラス名が
349  var elemPos = $(this).offset().top - 10; //要素より、50px上の
350  var scroll = $(window).scrollTop();
351  var windowHeight = $(window).height();
352  if (scroll >= elemPos - windowHeight) {
353    $(this).addClass("custom_right"); // 画面内に入ったらfadeUpというクラス名を追記
354  } else {
355    $(this).removeClass("custom_right"); // 画面外に出たらfadeUpというクラス名を外す
356  }
357});
358
359$(".custom_right_trigger2").each(function () {
360  //custom_right_trigger2というクラス名が
361  var elemPos = $(this).offset().top - 10; //要素より、50px上の
362  var scroll = $(window).scrollTop();
363  var windowHeight = $(window).height();
364  if (scroll >= elemPos - windowHeight) {
365    $(this).addClass("custom_right2"); // 画面内に入ったらfadeUpというクラス名を追記
366  } else {
367    $(this).removeClass("custom_right2"); // 画面外に出たらfadeUpというクラス名を外す
368  }
369});
370
371$(".custom_right_trigger3").each(function () {
372  //custom_right_trigger3というクラス名が
373  var elemPos = $(this).offset().top - 10; //要素より、50px上の
374  var scroll = $(window).scrollTop();
375  var windowHeight = $(window).height();
376  if (scroll >= elemPos - windowHeight) {
377    $(this).addClass("custom_right3"); // 画面内に入ったらfadeUpというクラス名を追記
378  } else {
379    $(this).removeClass("custom_right3"); // 画面外に出たらfadeUpというクラス名を外す
380  }
381});
382
383$(".custom_right_trigger4").each(function () {
384  //custom_right_trigger4というクラス名が
385  var elemPos = $(this).offset().top - 10; //要素より、50px上の
386  var scroll = $(window).scrollTop();
387  var windowHeight = $(window).height();
388  if (scroll >= elemPos - windowHeight) {
389    $(this).addClass("custom_right4"); // 画面内に入ったらfadeUpというクラス名を追記
390  } else {
391    $(this).removeClass("custom_right4"); // 画面外に出たらfadeUpというクラス名を外す
392  }
393});
394
395$(".custom_right_trigger5").each(function () {
396  //custom_right_trigger4というクラス名が
397  var elemPos = $(this).offset().top - 10; //要素より、50px上の
398  var scroll = $(window).scrollTop();
399  var windowHeight = $(window).height();
400  if (scroll >= elemPos - windowHeight) {
401    $(this).addClass("custom_right5"); // 画面内に入ったらfadeUpというクラス名を追記
402  } else {
403    $(this).removeClass("custom_right5"); // 画面外に出たらfadeUpというクラス名を外す
404  }
405});
406
407$(".custom_left_trigger3").each(function () {
408  //custom_left_trigger3というクラス名が

409  var elemPos = $(this).offset().top - 10; //要素より、50px上の
410  var scroll = $(window).scrollTop();
411  var windowHeight = $(window).height();
412  if (scroll >= elemPos - windowHeight) {
413    $(this).addClass("custom_left3"); // 画面内に入ったらfadeUpというクラス名を追記
414  } else {
415    $(this).removeClass("custom_left3"); // 画面外に出たらfadeUpというクラス名を外す
416  }
417});
418
419$(".custom_left_trigger4").each(function () {
420  //custom_left_trigger4というクラス名が
421  var elemPos = $(this).offset().top - 0; //要素より、50px上の
422  var scroll = $(window).scrollTop();
423  var windowHeight = $(window).height();
424  if (scroll >= elemPos - windowHeight) {
425    $(this).addClass("custom_left4"); // 画面内に入ったらfadeUpというクラス名を追記
426  } else {
427    $(this).removeClass("custom_left4"); // 画面外に出たらfadeUpというクラス名を外す
428  }
429});
430
431//custom_up
432$(".custom_up_trigger").each(function () {
433  //custom_up_triggerというクラス名が
434  var elemPos = $(this).offset().top - 1000; //要素より、50px上の
435  var scroll = $(window).scrollTop();
436  var windowHeight = $(window).height();
437  if (scroll >= elemPos - windowHeight) {
438    $(this).addClass("custom_up"); // 画面内に入ったらfadeUpというクラス名を追記
439  } else {
440    $(this).removeClass("custom_up"); // 画面外に出たらfadeUpというクラス名を外す
441  }
442});
443
444$(".custom_up_trigger2").each(function () {
445  //custom_up_trigger2というクラス名が
446  var elemPos = $(this).offset().top - 1000; //要素より、50px上の
447  var scroll = $(window).scrollTop();
448  var windowHeight = $(window).height();
449  if (scroll >= elemPos - windowHeight) {
450    $(this).addClass("custom_up2"); // 画面内に入ったらfadeUpというクラス名を追記
451  } else {
452    $(this).removeClass("custom_up2"); // 画面外に出たらfadeUpというクラス名を外す
453  }
454});
455
456//custom_rotate
457$(".custom_rotate_trigger").each(function () {
458  //custom_rotate_triggerというクラス名が
459  var elemPos = $(this).offset().top - 100; //要素より、50px上の
460  var scroll = $(window).scrollTop();
461  var windowHeight = $(window).height();
462  if (scroll >= elemPos - windowHeight) {
463    $(this).addClass("custom_rotate"); // 画面内に入ったらfadeUpというクラス名を追記
464  } else {
465    $(this).removeClass("custom_rotate"); // 画面外に出たらfadeUpというクラス名を外す
466  }
467});
468
469$(".custom_rotate_trigger2").each(function () {
470  //custom_rotate_trigger2というクラス名が
471  var elemPos = $(this).offset().top - 100; //要素より、50px上の
472  var scroll = $(window).scrollTop();
473  var windowHeight = $(window).height();
474  if (scroll >= elemPos - windowHeight) {
475    $(this).addClass("custom_rotate2"); // 画面内に入ったらfadeUpというクラス名を追記
476  } else {
477    $(this).removeClass("custom_rotate2"); // 画面外に出たらfadeUpというクラス名を外す
478  }
479});
480
481}
482
483// 画面をスクロールをしたら動かしたい場合の記述
484$(window).scroll(function () {
485  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
486}); // ここまで画面をスクロールをしたら動かしたい場合の記述
487
488// 画面が読み込まれたらすぐに動かしたい場合の記述
489$(window).on("load", function () {
490  fadeAnime(); /* アニメーション用の関数を呼ぶ*/
491}); // ここまで画面が読み込まれたらすぐに動かしたい場合の記述