https://www.nitoms.com/nitreat/app/js/script.js

1;(function ($) {
2  "use strict";
3
4function delayedCall(second, callBack){
5 setTimeout(callBack, second * 1000);
6}
7function showClass(elm){
8 elm.addClass('is-show');
9}
10function effectClass(elm){
11 elm.addClass('is-effect');
12}
13function transitionEnd01(elm){
14 elm.on('transitionend',function(){
15		$(this).addClass('is-effect');
16	});
17}
18function transitionEnd02(elm,target){
19 elm.on('transitionend',function(){
20		target.addClass('is-show')
21	});
22}
23
24var $mv = $('#mv'),
25				$t_c = $('#t-c'),
26				$howtouse = $('#howtouse'),
27				$club = $('#club'),
28				$download = $('#download');
29
30window.addEventListener('DOMContentLoaded',function(){
31	$mv.find('.m-img').addClass('is-show');
32});
33
34window.addEventListener('load',function(){
35	delayedCall(.25,function(){
36  $mv.find('.block').addClass('is-show');
37	});
38});
39
40$(window).on("load scroll", function () {
41	var isSP = window.innerWidth < 769  ? true : false,
42					offset = $(this).height() + $(this).scrollTop() - 100,
43					$t_cT = $t_c.offset().top,
44					$howtouseT = $howtouse.offset().top,
45					$howtouseBox = $howtouse.find('.oneBox'),
46					$howtouseBox01 = $howtouse.find('.oneBox').eq(0),
47					$howtouseBox02 = $howtouse.find('.oneBox').eq(1),
48					$howtouseBox03 = $howtouse.find('.oneBox').eq(2),
49					$clubT = $club.offset().top,
50					$downloadT = $download.offset().top;
51
52		if(offset > $t_cT + 100){
53			showClass($t_c.find('.logo'));
54		}
55		if(offset > $t_cT + 300){
56			showClass($t_c.find('.row'));
57		}
58		if(offset > $howtouseT){
59			showClass($howtouse.find('.m-ttl'));
60			transitionEnd02($howtouse.find('.m-ttl'),$howtouse.find('.sub'));
61		}
62		if(offset > $howtouseBox01.offset().top){
63			showClass($howtouseBox01.find('.img'));
64			transitionEnd01($howtouseBox01.find('.img'));
65			delayedCall(.8,function(){
66		  $howtouseBox01.find('.block').addClass('is-show');
67			});
68			transitionEnd01($howtouseBox01.find('.block'));
69		}
70		if(offset > $howtouseBox02.offset().top){
71			showClass($howtouseBox02.find('.img'));
72			transitionEnd01($howtouseBox02.find('.img'));
73			delayedCall(.8,function(){
74		  $howtouseBox02.find('.block').addClass('is-show');
75			});
76			transitionEnd01($howtouseBox02.find('.block'));
77		}
78		if(offset > $howtouseBox03.offset().top){
79			showClass($howtouseBox03.find('.img'));
80			transitionEnd01($howtouseBox03.find('.img'));
81			delayedCall(.8,function(){
82		  $howtouseBox03.find('.block').addClass('is-show');
83			});
84			transitionEnd01($howtouseBox03.find('.block'));
85		}
86		if(offset > $clubT){
87			showClass($club.find('.m-ttl'));
88			transitionEnd02($club.find('.m-ttl'),$club.find('.sub'));
89			transitionEnd02($club.find('.sub'),$club.find('.row'));
90		}
91		if(offset > $downloadT){
92			showClass($download.find('.m-ttl'));
93			transitionEnd02($download.find('.m-ttl'),$download.find('.txt'));
94			transitionEnd02($download.find('.m-ttl'),$download.find('.btn'));
95		}
96});
97
98})(jQuery);