https://motherld.com/js/global.js

1console.log('global.js');
2
3// 日付※コピーライト
4var now = new Date(); //現在の日付
5var cpYear = now.getFullYear();
6
7// ユーザーエージェントフラグ
8var ua = navigator.userAgent,
9	smpFlag = false,
10	tabFlag = false,
11	mobMenuFlg = false;
12
13// デバイスフラグ
14if(ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0){
15	smpFlag = true; // スマートフォンフラグ
16}else if(ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0){
17	tabFlag = true; // タブレットフラグ
18}
19
20$(function(){
21  // #で始まるリンクをクリックした場合
22  $('a[href^="#"]').click(function() {
23    let speed = 1200;
24    let type = 'easeInOutQuart';
25    let href= $(this).attr("href");
26    let target = $(href == "#index" ? 'html' : href);
27		let offset = target.offset();
28    let position = target.offset().top;
29
30		console.log('href：' + href);
31		console.log('target：' + target);
32		console.log('offset：' + offset);
33		console.log('position：' + position);
34
35		$('body,html').animate({scrollTop:position}, speed, type);
36    return false;
37  });
38});
39
40$(document).ready(function(){
41  // アニメーション
42	var controller = new ScrollMagic.Controller(),
43    tween,
44    tween2,
45    tween3,
46    arrAnime1 = document.querySelectorAll("#reafAnime"),
47    arrAnime2 = document.querySelectorAll(".sepLeaf"),
48    arrAnime3 = document.querySelectorAll("#motto .itemBody .ItemBlock .image"),
49    arrAnime4 = document.querySelectorAll("#motto .itemBody .ItemBlock h3"),
50    arrAnime5 = document.querySelectorAll("#motto .itemBody .ItemBlock p"),
51    arr_parallax2 = document.querySelectorAll(".parallax-fade"),
52    dlyV1 = 2.0,
53    dlyV = [0.4, 0.1, 0.1],
54    offset1 = 150,
55    offset2 = 1000,
56    oset2 = (window.innerHeight * 0.1);
57
58  if((smpFlag) || (tabFlag)){
59    // dlyV = 0;
60  }
61
62  if(smpFlag){
63    dlyV = [0, 0, 0];
64    offset1 = 0;
65    dlyV1 = 0;
66  }
67
68  // ヘッダ双葉アニメーション
69	for (var i = 0; i < arrAnime1.length; i++) {
70		tween = TweenMax.from(arrAnime1[i], 0.8, {
71      scaleX: 0.5,
72			scaleY: 1.2,
73      y: 100,
74			ease: Elastic.easeOut.config(1.2, 0.5),
75			delay: dlyV1,
76    });
77		new ScrollMagic.Scene({
78			triggerElement: arrAnime1[i],
79			triggerHook: "onEnter",
80		})
81		.setTween(tween)
82		.addTo(controller);
83	}
84	for (var i = 0; i < arrAnime2.length; i++) {
85		var dlyVal = 0.5 + (0.1 * i);
86		tween = TweenMax.from(arrAnime2[i], 0.6, {
87			scaleX: 0.1,
88			scaleY: 1.2,
89      y: 80,
90			ease: Elastic.easeOut.config(1.1, 0.6),
91			delay: dlyVal,
92    });
93		new ScrollMagic.Scene({
94			triggerElement: arrAnime2[i],
95			triggerHook: "onEnter",
96		})
97		.setTween(tween)
98		.addTo(controller);
99	}
100	for (var i = 0; i < arrAnime3.length; i++) {
101		tween = TweenMax.from(arrAnime3[i], .6, {
102      opacity: 0,
103      y: 100,
104			delay: dlyV[i],
105    });
106		new ScrollMagic.Scene({
107			triggerElement: arrAnime3[i],
108			triggerHook: "onEnter",
109			offset: offset1,
110		})
111		.setTween(tween)
112		.addTo(controller);
113
114		tween2 = TweenMax.from(arrAnime4[i], .6, {
115			opacity: 0,
116			y: 100,
117			delay: (dlyV[i] + 0.2),
118		});
119		new ScrollMagic.Scene({
120			triggerElement: arrAnime3[i],
121			triggerHook: "onEnter",
122			offset: offset1,
123		})
124		.setTween(tween2)
125		.addTo(controller);
126
127		tween3 = TweenMax.from(arrAnime5[i], .6, {
128			opacity: 0,
129			y: 100,
130			delay: (dlyV[i] + 0.4),
131		});
132		new ScrollMagic.Scene({
133			triggerElement: arrAnime3[i],
134			triggerHook: "onEnter",
135			offset: offset1,
136		})
137		.setTween(tween3)
138		.addTo(controller);
139	}
140  for (var i = 0; i < arr_parallax2.length; i++) {
141    tween = TweenMax.from(arr_parallax2[i], 1.8, {
142      // delay: 0.4,
143      opacity: 0,
144    });
145    new ScrollMagic.Scene({
146      triggerElement: arr_parallax2[i],
147      triggerHook: "onEnter",
148      offset: oset2,
149    })
150    .setTween(tween)
151    .addTo(controller);
152  }
153
154  /* モバイルナビ */
155	$('.menubtn a').click(function(){
156		if(!mobMenuFlg){
157			$('#mobileNavi').css({"display":"block"});
158			TweenMax.to($('#mobileNavi'),1,{
159				opacity: 1,
160			});
161			TweenMax.to($('.menubtn .top'),0.4,{
162				rotation: '45_cw',
163				y: 8,
164			});
165			TweenMax.to($('.menubtn .middle'),0.4,{
166				opacity: 0,
167			});
168			TweenMax.to($('.menubtn .bottom'),0.4,{
169				rotation: '-45_ccw',
170				y: -8,
171			});

172			$(window).on('touchmove.noScroll', function(e) {
173				e.preventDefault();
174			});
175			mobMenuFlg = true;
176		} else {
177			TweenMax.to($('#mobileNavi'),1,{
178				opacity: 0,
179				onComplete: function(){
180					$('#mobileNavi').css({"display":"none"});
181				}
182			});
183			TweenMax.to($('.menubtn .top'),0.4,{
184				rotation: '0_ccw',
185				y: 0,
186			});
187			TweenMax.to($('.menubtn .middle'),0.4,{
188				opacity: 1,
189			});
190			TweenMax.to($('.menubtn .bottom'),0.4,{
191				rotation: '0_cw',
192				y: 0,
193			});
194
195			$(window).off('.noScroll');
196			mobMenuFlg = false;
197		}
198	});
199
200	$('#mobileNavi ul li a').click(function(){
201		TweenMax.to($('#mobileNavi'),1,{
202			opacity: 0,
203			onComplete: function(){
204				$('#mobileNavi').css({"display":"none"});
205			}
206		});
207		TweenMax.to($('.menubtn .top'),0.4,{
208			rotation: '0_ccw',
209			y: 0,
210		});
211		TweenMax.to($('.menubtn .middle'),0.4,{
212			opacity: 1,
213		});
214		TweenMax.to($('.menubtn .bottom'),0.4,{
215			rotation: '0_cw',
216			y: 0,
217		});
218
219		$(window).off('.noScroll');
220		mobMenuFlg = false;
221	});
222
223});