https://www.aimservices.co.jp/assets/js/top_mv.js

1;(function($) {
2
3
4
5
6// main visual animation
7
8
9const Mv = {
10
11	copies: [
12		'<span>「健やか」</span>を願う人の',
13		'<span>「働く」</span>を楽しむ人の',
14		'<span>「憩う」</span>を大切にする人の',
15		'<span>「競う」</span>を応援する人の'
16	],
17
18	$container: $(),
19	$loading: $(),
20	$intro: $(),
21	$nav: $(),
22	$header: $(),
23	$slider: $(),
24	$sliderBody: $(),
25	$copy: $(),
26
27	images: [
28		'/images/top/kv/slider/spacer_1.png',
29		'/images/top/kv/slider/spacer_2.png',
30	],
31	imageLen: 0,
32	imageLoaded: 0,
33
34	visited: false,
35
36	init: function() {
37
38		const _this = this;
39
40		this.$container = $('#kv-bg');
41		this.$loading = this.$container.children('.loading');
42		this.$intro = $('<div class="intro"><div></div><p></p></div>');
43		this.$nav = $('.site-navigation');
44		this.$header = $('#wrapper > .header');
45		this.$slider = this.$container.find('.slider');
46		this.$sliderBody = this.$container.find('.slider-body');
47		this.$copy = $('#kv p');
48
49		this.$sliderBody.children().each(function() {
50
51			if ($(this).attr('class').charAt(12) == '1') {
52				$(this).append('<img src="/images/top/kv/slider/spacer_1.png" alt="">');
53			} else {
54				$(this).append('<img src="/images/top/kv/slider/spacer_2.png" alt="">');
55			}
56
57			_this.$sliderBody.append($(this).clone());
58
59		});
60
61		this.$sliderBody.find('img').each(function(idx) {
62			_this.images.push($(this).attr('src'));
63		});
64
65		if (Cookies.has('visited')) {
66			if (location.search != '?mv=always') {
67				this.visited = true;
68			}
69		} else {
70			Cookies.set('visited', 1);
71		}
72    
73    if ($('html').is(':lang(en)')) {
74      this.visited = true;
75    }
76
77		if (!this.visited) {
78			const n = Math.floor(Math.random() * 4);
79			const img = '/images/top/kv/intro/' + n + '.jpg';
80			this.images.push(img);
81			this.$intro.children('div').css({ backgroundImage: 'url(' + img + ')' });
82			this.$intro.children('p').html(this.copies[n]);
83			this.$loading.after(this.$intro);
84		}
85
86		this.imageLen = this.images.length;
87		this.loadImages();
88
89	},
90
91	loadImages: function() {
92
93		const _this = this;
94		let preloadImgs = [];
95
96		$.each(this.images, function(i, img) {
97			preloadImgs[i] = new Image();
98			preloadImgs[i].onload = _this.preloaded.bind(_this, i);
99			preloadImgs[i].src = img;
100		});
101
102		if (!this.visited) {
103
104			this.$loading.addClass('is_show').on('transitionend', function(e) {
105				if (e.originalEvent.propertyName == 'transform') {
106					$(this).off();
107					_this.animate.apply(_this);
108				}
109			});
110
111			setTimeout(function() {
112				_this.$loading.addClass('is_hide');
113			}, 2000);
114
115		}
116
117	},
118
119	preloaded: function(i) {
120
121		this.imageLoaded++;
122
123		if (this.imageLoaded == this.imageLen) {
124
125			this.setDuration();
126
127			if (!this.visited) {
128				this.$loading.addClass('is_loaded');
129			} else {
130				this.skip();
131			}
132
133		}
134
135	},
136
137	animate: function() {
138
139		const _this = this;
140
141		function showIntro() {
142			return new Promise(function(resolve) {
143				_this.$intro.addClass('is_show');
144				setTimeout(resolve, _isSP ? 3600 : 3200);
145			});
146		}
147
148		function hideIntro() {
149			return new Promise(function(resolve) {
150				_this.$container.addClass('is_started').on('transitionend', function(e) {
151					if (e.originalEvent.target.id == 'kv-bg') {
152						$(this).off();
153						resolve();
154					}
155				});
156			});
157		}
158
159		function start() {
160
161			const wait1 = _isSP ? 500 : 0;
162			const wait2 = _isSP ? 500 : 500;
163
164			setTimeout(function() {
165				_this.$container.addClass('is_pale');
166				_this.$nav.addClass('is_show');
167				_this.$slider.addClass('is_show');
168			}, wait1);
169
170			setTimeout(function() {
171				_this.$header.addClass('is_show');
172				_this.$copy.addClass('is_show');
173				$('#wrapper').addClass('is_unlocked');
174			}, wait2);
175
176		}
177
178		showIntro()
179			.then(function() {
180				return hideIntro();
181			})
182			.then(start);
183
184	},
185
186	setDuration: function() {
187
188		this.$sliderBody.css({ width: '10000px' });
189
190		const speed = _isSP ? .012 : .008;
191		let w = 0;
192
193		this.$sliderBody.children().each(function() {
194			w += $(this).width();
195		});
196
197		this.$sliderBody.css({
198			width: w + 'px',
199			animationDuration: Math.floor(w * speed) + 's',
200		});
201
202	},
203
204	skip: function() {
205
206		this.$container.addClass('skip');
207		this.$nav.addClass('skip');
208		this.$header.addClass('skip');
209		this.$copy.addClass('skip');
210		this.$slider.addClass('skip');
211
212		$('#wrapper').addClass('is_unlocked');
213
214	},
215
216};
217
218
219
220
221// cookie
222
223/*
224Cookies.get('key');

225Cookies.set('key', 'value', [options]);
226const hasCookie = Cookies.has('key');
227Cookies.del('key');
228*/
229
230const Cookies = {
231
232	get: function(key) {
233
234		if (!this.has(key)) return null;
235
236		return decodeURIComponent(document.cookie.replace(new RegExp('(?:^|.*;\\s*)' + encodeURIComponent(key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*'), '$1'));
237
238	},
239
240	set: function(key, value, days, path, domain, secure) {
241
242		let expires = '';
243
244		if (days) {
245			const expires = new Date();
246			expires.setMilliseconds(expires.getMilliseconds() + days * 864e+5);
247			expires = expires.toUTCString();
248		}
249
250		document.cookie = encodeURIComponent(key) + '=' + encodeURIComponent(value) + (expires ? '; expires=' + expires : '') + (domain ? '; domain=' + domain : '') + (path ? '; path=' + path : '') + (secure ? '; secure' : '');
251
252	},
253
254	has: function(key) {
255
256		return (new RegExp('(?:^|;\\s*)' + encodeURIComponent(key).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=')).test(document.cookie);
257
258	},
259
260	del: function(key) {
261
262		document.cookie = encodeURIComponent(key) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT';
263
264	}
265
266};
267
268
269
270
271// onload
272
273
274const _mediaQuerySp = window.matchMedia('(max-width: 767px)');
275let _isSP = false;
276
277
278$(function() {
279
280
281	_isSP = _mediaQuerySp.matches;
282
283
284  Mv.init();
285
286
287	let resizeTimer = false;
288
289	$(window).on('resize', function() {
290
291		if (resizeTimer !== false) {
292			clearTimeout(resizeTimer);
293		}
294
295		_isSP = _mediaQuerySp.matches;
296
297		resizeTimer = setTimeout(Mv.setDuration.bind(Mv), 500);
298
299	});
300
301
302});
303
304
305
306
307})(jQuery);