https://www.frees-life.com/wp-content/themes/freeslife/common/js/animation.js

1// JavaScript Document
2function delayScrollAnime() {
3	var time = 0.2;//遅延時間を増やす秒数の値
4	var value = time;
5	$('.delayScroll').each(function () {
6		var parent = this;					//親要素を取得
7		var elemPos = $(this).offset().top;//要素の位置まで来たら
8		var scroll = $(window).scrollTop();//スクロール値を取得
9		var windowHeight = $(window).height();//画面の高さを取得
10		var childs = $(this).children();	//子要素を取得
11		
12		if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {//指定領域内にスクロールが入ったらまた親要素にクラスplayがなければ
13			$(childs).each(function () {
14				
15				if (!$(this).hasClass("fadeUp")) {//アニメーションのクラス名が指定されているかどうかをチェック
16					
17					$(parent).addClass("play");	//親要素にクラス名playを追加
18					$(this).css("animation-delay", value + "s");//アニメーション遅延のCSS animation-delayを追加し
19					$(this).addClass("fadeUp");//アニメーションのクラス名を追加
20					value = value + time;//delay時間を増加させる
21					
22					//全ての処理を終わったらplayを外す
23					var index = $(childs).index(this);
24					if((childs.length-1) == index){
25						$(parent).removeClass("play");
26					}
27				}
28			})
29		}else {
30			$(childs).removeClass("fadeUp");//アニメーションのクラス名を削除
31			value = time;//delay初期値の数値に戻す
32		}
33	})
34}
35
36// 画面をスクロールをしたら動かしたい場合の記述
37	$(window).scroll(function (){
38		delayScrollAnime();/* アニメーション用の関数を呼ぶ*/
39	});// ここまで画面をスクロールをしたら動かしたい場合の記述
40
41// 画面が読み込まれたらすぐに動かしたい場合の記述
42	$(window).on('load', function(){
43		delayScrollAnime();/* アニメーション用の関数を呼ぶ*/
44	});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
45
46
47
48
49
50
51// eachTextAnimeにappeartextというクラス名を付ける定義
52function EachTextAnimeControl() {
53  $('.eachTextAnime').each(function () {
54    var elemPos = $(this).offset().top - 50;
55    var scroll = $(window).scrollTop();
56    var windowHeight = $(window).height();
57    if (scroll >= elemPos - windowHeight) {
58      $(this).addClass("appeartext");
59
60    } else {
61      $(this).removeClass("appeartext");
62    }
63  });
64}
65
66// 画面をスクロールをしたら動かしたい場合の記述
67$(window).scroll(function () {
68  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
69});// ここまで画面をスクロールをしたら動かしたい場合の記述
70
71// 画面が読み込まれたらすぐに動かしたい場合の記述
72$(window).on('load', function () {
73  //spanタグを追加する
74  var element = $(".eachTextAnime");
75  element.each(function () {
76    var text = $(this).text();
77    var textbox = "";
78    text.split('').forEach(function (t, i) {
79      if (t !== " ") {
80        if (i < 10) {
81          textbox += '<span style="animation-delay:.' + i + 's;">' + t + '</span>';
82        } else {
83          var n = i / 10;
84          textbox += '<span style="animation-delay:' + n + 's;">' + t + '</span>';
85        }
86
87      } else {
88        textbox += t;
89      }
90    });
91    $(this).html(textbox);
92  });
93
94  EachTextAnimeControl();/* アニメーション用の関数を呼ぶ*/
95});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述
96
97
98
99
100
101// 動きのきっかけの起点となるアニメーションの名前を定義
102function fadeAnime(){
103
104	// ふわっ
105
106	$('.fadeInTrigger').each(function(){ //fadeInTriggerというクラス名が
107		var elemPos = $(this).offset().top-50;//要素より、50px上の
108		var scroll = $(window).scrollTop();
109		var windowHeight = $(window).height();
110		if (scroll >= elemPos - windowHeight){
111		$(this).addClass('fadeIn');// 画面内に入ったらfadeInというクラス名を追記
112		}else{
113		$(this).removeClass('fadeIn');// 画面外に出たらfadeInというクラス名を外す
114		}
115		});
116
117	$('.fadeUpTrigger').each(function(){ //fadeUpTriggerというクラス名が

118		var elemPos = $(this).offset().top-50;//要素より、50px上の
119		var scroll = $(window).scrollTop();
120		var windowHeight = $(window).height();
121		if (scroll >= elemPos - windowHeight){
122		$(this).addClass('fadeUp');// 画面内に入ったらfadeUpというクラス名を追記
123		}else{
124		$(this).removeClass('fadeUp');// 画面外に出たらfadeUpというクラス名を外す
125		}
126		});
127
128	$('.fadeDownTrigger').each(function(){ //fadeDownTriggerというクラス名が
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('fadeDown');// 画面内に入ったらfadeDownというクラス名を追記
134		}else{
135		$(this).removeClass('fadeDown');// 画面外に出たらfadeDownというクラス名を外す
136		}
137		});
138
139	$('.fadeLeftTrigger').each(function(){ //fadeLeftTriggerというクラス名が
140		var elemPos = $(this).offset().top-50;//要素より、50px上の
141		var scroll = $(window).scrollTop();
142		var windowHeight = $(window).height();
143		if (scroll >= elemPos - windowHeight){
144		$(this).addClass('fadeLeft');// 画面内に入ったらfadeLeftというクラス名を追記
145		}else{
146		$(this).removeClass('fadeLeft');// 画面外に出たらfadeLeftというクラス名を外す
147		}
148		});
149
150	$('.fadeRightTrigger').each(function(){ //fadeRightTriggerというクラス名が
151		var elemPos = $(this).offset().top-50;//要素より、50px上の
152		var scroll = $(window).scrollTop();
153		var windowHeight = $(window).height();
154		if (scroll >= elemPos - windowHeight){
155		$(this).addClass('fadeRight');// 画面内に入ったらfadeRightというクラス名を追記
156		}else{
157		$(this).removeClass('fadeRight');// 画面外に出たらfadeRightというクラス名を外す
158		}
159		});
160
161	// ぱたっ
162
163	$('.flipDownTrigger').each(function(){ //flipDownTriggerというクラス名が
164		var elemPos = $(this).offset().top-50;//要素より、50px上の
165		var scroll = $(window).scrollTop();
166		var windowHeight = $(window).height();
167		if (scroll >= elemPos - windowHeight){
168		$(this).addClass('flipDown');// 画面内に入ったらflipDownというクラス名を追記
169		}else{
170		$(this).removeClass('flipDown');// 画面外に出たらflipDownというクラス名を外す
171		}
172		});
173	
174	$('.flipLeftTrigger').each(function(){ //flipLeftTriggerというクラス名が
175		var elemPos = $(this).offset().top-50;//要素より、50px上の
176		var scroll = $(window).scrollTop();
177		var windowHeight = $(window).height();
178		if (scroll >= elemPos - windowHeight){
179		$(this).addClass('flipLeft');// 画面内に入ったらflipLeftというクラス名を追記
180		}else{
181		$(this).removeClass('flipLeft');// 画面外に出たらflipLeftというクラス名を外す
182		}
183		});
184
185	$('.flipLeftTopTrigger').each(function(){ //flipLeftTopTriggerというクラス名が
186		var elemPos = $(this).offset().top-50;//要素より、50px上の
187		var scroll = $(window).scrollTop();
188		var windowHeight = $(window).height();
189		if (scroll >= elemPos - windowHeight){
190		$(this).addClass('flipLeftTop');// 画面内に入ったらflipLeftTopというクラス名を追記
191		}else{
192		$(this).removeClass('flipLeftTop');// 画面外に出たらflipLeftTopというクラス名を外す
193		}
194		});
195
196	$('.flipRightTrigger').each(function(){ //flipRightTriggerというクラス名が
197		var elemPos = $(this).offset().top-50;//要素より、50px上の
198		var scroll = $(window).scrollTop();
199		var windowHeight = $(window).height();
200		if (scroll >= elemPos - windowHeight){
201		$(this).addClass('flipRight');// 画面内に入ったらflipRightというクラス名を追記
202		}else{
203		$(this).removeClass('flipRight');// 画面外に出たらflipRightというクラス名を外す
204		}
205		});
206
207	$('.flipRightTopTrigger').each(function(){ //flipRightTopTriggerというクラス名が
208		var elemPos = $(this).offset().top-50;//要素より、50px上の
209		var scroll = $(window).scrollTop();
210		var windowHeight = $(window).height();
211		if (scroll >= elemPos - windowHeight){
212		$(this).addClass('flipRightTop');// 画面内に入ったらflipRightTopというクラス名を追記
213		}else{
214		$(this).removeClass('flipRightTop');// 画面外に出たらflipRightTopというクラス名を外す
215		}
216		});
217	
218	// くるっ
219
220	$('.rotateXTrigger').each(function(){ //rotateXTriggerというクラス名が

221		var elemPos = $(this).offset().top-50;//要素より、50px上の
222		var scroll = $(window).scrollTop();
223		var windowHeight = $(window).height();
224		if (scroll >= elemPos - windowHeight){
225		$(this).addClass('rotateX');// 画面内に入ったらrotateXというクラス名を追記
226		}else{
227		$(this).removeClass('rotateX');// 画面外に出たらrotateXというクラス名を外す
228		}
229		});
230
231	$('.rotateYTrigger').each(function(){ //rotateYTriggerというクラス名が
232		var elemPos = $(this).offset().top-50;//要素より、50px上の
233		var scroll = $(window).scrollTop();
234		var windowHeight = $(window).height();
235		if (scroll >= elemPos - windowHeight){
236		$(this).addClass('rotateY');// 画面内に入ったらrotateYというクラス名を追記
237		}else{
238		$(this).removeClass('rotateY');// 画面外に出たらrotateYというクラス名を外す
239		}
240		});
241
242	$('.rotateLeftZTrigger').each(function(){ //rotateLeftZTriggerというクラス名が
243		var elemPos = $(this).offset().top-50;//要素より、50px上の
244		var scroll = $(window).scrollTop();
245		var windowHeight = $(window).height();
246		if (scroll >= elemPos - windowHeight){
247		$(this).addClass('rotateLeftZ');// 画面内に入ったらrotateLeftZというクラス名を追記
248		}else{
249		$(this).removeClass('rotateLeftZ');// 画面外に出たらrotateLeftZというクラス名を外す
250		}
251		});
252	
253	$('.rotateRightZTrigger').each(function(){ //rotateRightZTriggerというクラス名が
254		var elemPos = $(this).offset().top-50;//要素より、50px上の
255		var scroll = $(window).scrollTop();
256		var windowHeight = $(window).height();
257		if (scroll >= elemPos - windowHeight){
258		$(this).addClass('rotateRightZ');// 画面内に入ったらrotateRightZというクラス名を追記
259		}else{
260		$(this).removeClass('rotateRightZ');// 画面外に出たらrotateRightZというクラス名を外す
261		}
262		});	
263	
264	// ぶわっ、ぽんっ
265
266	$('.zoomInTrigger').each(function(){ //zoomInTriggerというクラス名が
267		var elemPos = $(this).offset().top-50;//要素より、50px上の
268		var scroll = $(window).scrollTop();
269		var windowHeight = $(window).height();
270		if (scroll >= elemPos - windowHeight){
271		$(this).addClass('zoomIn');// 画面内に入ったらzoomInというクラス名を追記
272		}else{
273		$(this).removeClass('zoomIn');// 画面外に出たらzoomInというクラス名を外す
274		}
275		});
276
277	// どどんっ
278	
279	$('.zoomOutTrigger').each(function(){ //zoomOutTriggerというクラス名が
280		var elemPos = $(this).offset().top-50;//要素より、50px上の
281		var scroll = $(window).scrollTop();
282		var windowHeight = $(window).height();
283		if (scroll >= elemPos - windowHeight){
284		$(this).addClass('zoomOut');// 画面内に入ったらzoomOutというクラス名を追記
285		}else{
286		$(this).removeClass('zoomOut');// 画面外に出たらzoomOutというクラス名を外す
287		}
288		});	
289	
290	// じわっ
291	
292	$('.blurTrigger').each(function(){ //blurTriggerというクラス名が
293		var elemPos = $(this).offset().top-50;//要素より、50px上の
294		var scroll = $(window).scrollTop();
295		var windowHeight = $(window).height();
296		if (scroll >= elemPos - windowHeight){
297		$(this).addClass('blur');// 画面内に入ったらblurというクラス名を追記
298		}else{
299		$(this).removeClass('blur');// 画面外に出たらblurというクラス名を外す
300		}
301		});	
302	
303	// にょろっ
304	
305	$('.smoothTrigger').each(function(){ //smoothTriggerというクラス名が
306		var elemPos = $(this).offset().top-50;//要素より、50px上の
307		var scroll = $(window).scrollTop();
308		var windowHeight = $(window).height();
309		if (scroll >= elemPos - windowHeight){
310		$(this).addClass('smooth');// 画面内に入ったらsmoothというクラス名を追記
311		}else{
312		$(this).removeClass('smooth');// 画面外に出たらsmoothというクラス名を外す
313		}
314		});	
315	
316	// 背景色が伸びて出現
317	
318	$('.bgLRextendTrigger').each(function(){ //bgLRextendTriggerというクラス名が
319		var elemPos = $(this).offset().top-50;//要素より、50px上の
320		var scroll = $(window).scrollTop();
321		var windowHeight = $(window).height();
322		if (scroll >= elemPos - windowHeight){
323			$(this).addClass('bgLRextend');

323// 画面内に入ったらbgLRextendというクラス名を追記
324		}else{
325			$(this).removeClass('bgLRextend');// 画面外に出たらbgLRextendというクラス名を外す
326		}
327	});	
328	
329	$('.bgRLextendTrigger').each(function(){ //bgRLextendTriggerというクラス名が
330		var elemPos = $(this).offset().top-50;//要素より、50px上の
331		var scroll = $(window).scrollTop();
332		var windowHeight = $(window).height();
333		if (scroll >= elemPos - windowHeight){
334			$(this).addClass('bgRLextend');// 画面内に入ったらbgRLextendというクラス名を追記
335		}else{
336			$(this).removeClass('bgRLextend');// 画面外に出たらbgRLextendというクラス名を外す
337		}
338	});
339	
340	$('.bgDUextendTrigger').each(function(){ //bgDUextendTriggerというクラス名が
341		var elemPos = $(this).offset().top-50;//要素より、50px上の
342		var scroll = $(window).scrollTop();
343		var windowHeight = $(window).height();
344		if (scroll >= elemPos - windowHeight){
345			$(this).addClass('bgDUextend');// 画面内に入ったらbgDUextendというクラス名を追記
346		}else{
347			$(this).removeClass('bgDUextend');// 画面外に出たらbgDUextendというクラス名を外す
348		}
349	});
350	
351	$('.bgUDextendTrigger').each(function(){ //bgUDextendTriggerというクラス名が
352		var elemPos = $(this).offset().top-50;//要素より、50px上の
353		var scroll = $(window).scrollTop();
354		var windowHeight = $(window).height();
355		if (scroll >= elemPos - windowHeight){
356			$(this).addClass('bgUDextend');// 画面内に入ったらbgUDextendというクラス名を追記
357		}else{
358			$(this).removeClass('bgUDextend');// 画面外に出たらbgUDextendというクラス名を外す
359		}
360	});	
361	
362	$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
363		var elemPos = $(this).offset().top-50;//要素より、50px上の
364		var scroll = $(window).scrollTop();
365		var windowHeight = $(window).height();
366		if (scroll >= elemPos - windowHeight){
367			$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
368		}else{
369			$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
370		}
371	});	
372	
373	$('.bgUDextendTrigger').each(function(){ //bgUDextendTriggerというクラス名が
374		var elemPos = $(this).offset().top-50;//要素より、50px上の
375		var scroll = $(window).scrollTop();
376		var windowHeight = $(window).height();
377		if (scroll >= elemPos - windowHeight){
378			$(this).addClass('bgUDextend');// 画面内に入ったらbgUDextendというクラス名を追記
379		}else{
380			$(this).removeClass('bgUDextend');// 画面外に出たらbgUDextendというクラス名を外す
381		}
382	});	
383	
384	$('.lineTrigger').each(function(){ //lineTriggerというクラス名が
385		var elemPos = $(this).offset().top-50;//要素より、50px上の
386		var scroll = $(window).scrollTop();
387		var windowHeight = $(window).height();
388		if (scroll >= elemPos - windowHeight){
389			$(this).addClass('lineanime');// 画面内に入ったらlineanimeというクラス名を追記
390		}else{
391			$(this).removeClass('lineanime');// 画面外に出たらlineanimeというクラス名を外す
392		}
393	});	
394	
395}
396
397// 画面をスクロールをしたら動かしたい場合の記述
398	$(window).scroll(function (){
399		fadeAnime();/* アニメーション用の関数を呼ぶ*/
400	});// ここまで画面をスクロールをしたら動かしたい場合の記述
401
402// ページが読み込まれたらすぐに動かしたい場合の記述
403	$(window).on('load', function(){
404		fadeAnime();/* アニメーション用の関数を呼ぶ*/
405	});// ここまでページが読み込まれたらすぐに動かしたい場合の記述
406
407
408
409
410
411// カーテンを開くようなスクロールアニメーション
412$(function(){
413  var setAnim = $('.animate');
414  $(window).on('scroll resize',function(){
415    var setHeight = 300;
416    setAnim.each(function(){
417      var setThis = $(this),
418          setElm = $(this).find('.animate-elm');
419      elmTop = setThis.offset().top,
420      scrTop = $(window).scrollTop(),
421      winHeight = $(window).height();
422      if (scrTop > elmTop - winHeight + setHeight){
423        setElm.addClass('show');
424      }
425    });
426  });
427});
428
429
430// rollAnimeにrollというクラス名を付ける定義 テキストくるくる出現
431function RollAnimeControl() {
432  $('.rollAnime').each(function () {

433    var elemPos = $(this).offset().top - 50;
434    var scroll = $(window).scrollTop();
435    var windowHeight = $(window).height();
436    var childs = $(this).children();  //rollAnimeの子要素を取得
437    if (scroll >= elemPos - windowHeight) {
438      $(childs).each(function (i) {   //子要素を1つ1つ処理をおこなう
439        if (i < 10) {         //10未満の場合
440        $(this).css("transition-delay","."+i+"s");  //子要素にcsstransition-delayを追加
441        }else {             //10以上の場合
442          var n = i / 10;       //ミリ秒指定なので10で割る
443          $(this).css("transition-delay",n+"s");  //子要素にcsstransition-delayを追加
444        }
445      });
446      
447      $(this).addClass("roll"); //rollというアニメーションクラスを付与
448
449    } else {
450      $(childs).each(function () {    //子要素を1つ1つ処理をおこなう
451        $(this).css("transition-delay","0s");//子要素にcsstransition-delayの秒を0とする
452      });
453      $(this).removeClass("roll");//rollというアニメーションクラスを除去
454    }
455  });
456}
457
458// 画面をスクロールをしたら動かしたい場合の記述
459$(window).scroll(function () {
460  RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
461});// ここまで画面をスクロールをしたら動かしたい場合の記述
462
463// 画面が読み込まれたらすぐに動かしたい場合の記述
464$(window).on('load', function () {
465  //spanタグを追加する
466  var element = $(".rollAnime");
467  element.each(function () {
468    var text = $(this).text();
469    var textbox = [];
470    text.split('').forEach(function (t, i) {
471      if (t !== " ") {
472        if (i < 10) {
473          textbox += '<span style="transition-delay:.' + i + 's;">' + t + '</span>';
474        } else {
475          var n = i / 10;
476          textbox += '<span style="transition-delay:' + n + 's;">' + t + '</span>';
477        }
478
479      } else {
480        textbox += t;
481      }
482    });
483    $(this).html(textbox);
484  });
485
486  RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
487});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述