https://kanagawasuido.jp/lib/mv2.js

1/* -----------------------------------------------
2mv2 js
3--------------------------------------------------
4
5/* ------------------------------------------------------------
6   1. userAgent判別
7 * ------------------------------------------------------------ */
8var ua = window.navigator.userAgent;
9var appVer = window.navigator.appVersion;
10
11//PC
12var isIE = ua.indexOf('MSIE') != -1 || ua.indexOf('Trident') != -1;
13var isIE6 = isIE && appVer.indexOf('MSIE 6') != -1;
14var isIE7 = isIE && appVer.indexOf('MSIE 7.') != -1;
15var isIE8 = isIE && ua.indexOf('Trident/4.') != -1 || appVer.indexOf('MSIE 8.') != -1;
16var isIE9 = isIE && ua.indexOf('Trident/5.') != -1;
17var isIE10 = isIE && ua.indexOf('Trident/6.') != -1;
18var isIE11 = ua.indexOf('Trident/7.') != -1;
19var isMicrosoftEdge = ua.indexOf('Windows NT') != -1;
20var isOldIE = isIE8 || isIE7 || isIE6;
21// *IEのUA情報： https://msdn.microsoft.com/ja-jp/library/hh869301(v=vs.85).aspx
22
23var isFirefox = ua.indexOf('Firefox') != -1;
24var isChrome = ua.indexOf('Chrome') != -1;
25var isSafari = ua.indexOf('Safari') != -1;
26
27//Mobile (smartphone + tablet)
28var isMobileSafari = ua.match(/iPhone|iPad|iPod/i) ? true : false;
29var isMobileSafariTypeT = ua.match(/ipad/i) ? true : false;
30var isMobileSafariTypeS = ua.match(/iphone|ipod/i) ? true : false;
31var isAndroid = ua.indexOf('Android') != -1;
32var isMobileAndroidTypeT = isAndroid && ua.indexOf('Mobile') == -1;
33var isMobileAndroidTypeS = isAndroid && ua.indexOf('Mobile') != -1;
34var isAndroidChrome = isChrome && isAndroid;
35var isAndroidFirefox = isFirefox && isAndroid;
36var isMobileFirefox = isFirefox && ua.indexOf('Mobile') != -1;
37var isTabletFirefox = isFirefox && ua.indexOf('Tablet') != -1;
38
39//PC or Mobile
40var isTablet = isMobileSafariTypeT || isMobileAndroidTypeT || isTabletFirefox;
41var isSmartPhone = isMobileSafariTypeS || isMobileAndroidTypeS || isMobileFirefox;
42var isMobile = isTablet && isSmartPhone && isAndroidChrome;
43var isPC = !isMobile;
44
45//APP
46var isFacebookAPP = ua.indexOf('FBAN') != -1;
47
48/* ------------------------------------------------------------
49
50 * ------------------------------------------------------------ */
51var animateInterval = 1000;
52var easingFunction = 'easeInOutQuint';
53// http://easings.net/ja
54var breakPoint = 768;
55var currentDirectory = window.location.pathname.split('/').slice(1, -1).join('/');
56
57var currentWidth = window.innerWidth;
58
59/* ------------------------------------------------------------
60
61 * ------------------------------------------------------------ */
62$(document).on('ready', function() {
63  var $window = $(window);
64
65  fixHeader();
66  imageFullBg();
67  if (isPC || $window.width() >= breakPoint) {
68    parallaxBg();
69  }
70
71  /* top main visual height */
72    function topMainVisualHeight() {
73        var winH = window.innerHeight;
74        var winH2 = $(window).height();
75        //var winH = $(window).height();
76        // headerが完全に読み込まれるまで待たせてる
77        setTimeout(function() {
78            
79          //var headerH = $('header').height();
80          if ($window.width() >= breakPoint){
81            var tmvH = winH ;//- headerH;
82          }
83          else{
84            var spH = 150;
85            var tmvH = winH - spH;//- headerH;
86          }
87          
88          $('.box-main-image').height(tmvH);
89          $('.main_box').height(tmvH);
90          $('.top-main').height(tmvH);
91          $('.top-main li').height(tmvH);
92          $('.slider-bg__inner-wrp').height(tmvH);
93          
94          var headerH = $('header').height();
95          var scrH = winH2 - headerH;
96          var scrH2 = winH - scrH;
97          $('.top-main-scroll').css('bottom',scrH2 / 2 + 'px');
98          
99        }, 500);
100    }
101    var tmvTimer2 = false;
102    /*
103        $(window).resize(function() {
104        if (tmvTimer2 !== false) {
105          clearTimeout(tmvTimer2);
106        }
107        tmvTimer2 = setTimeout(function() {
108          topMainVisualHeight();
109        }, 200);
110        });
111    */
112    topMainVisualHeight();
113  
114  /* top main visual animation */
115    var tmvInitFlg = false;
116    var tmvElm = $('.top-main').children('li');
117    var tmvTxtElm = $('.top-main-txt02');
118    var tmvLen = tmvElm.length - 1;
119    var tmvCount0 = 0;
120    var tmvCount0_2 = 0;
121    var tmvCount1 = 0;
122    var tmvCount2 = 1;

123    function topMainVisual() {
124        tmvTxtElm.removeClass('top-main-txt-init');
125        tmvTxtElm.removeClass('top-main-txt-end');
126        tmvTxtElm.removeClass('top-main-txt-next');
127        tmvTxtElm.removeClass('top-main-txt-show');
128        tmvElm.removeClass('top-main-active_next');
129        tmvElm.eq(tmvCount1).addClass('top-main-active').stop(true, true).queue(new Function).delay(1500).queue(function() {
130        if (tmvInitFlg) {
131            tmvElm.removeClass('top-main-init');
132            tmvElm.eq(tmvCount0).removeClass('top-main-active');
133            tmvCount0++;
134        }
135    }).dequeue();
136    if (tmvInitFlg) {
137      tmvTxtElm.eq(tmvCount0_2).addClass('top-main-txt-show').stop(true, true).queue(new Function).delay(1000).queue(function() {
138        $(this).addClass('top-main-txt-end');
139        tmvTxtElm.eq(tmvCount0_2).addClass('top-main-txt-next');
140      }).dequeue();
141      tmvCount0_2++;
142    } else {
143      $(tmvTxtElm).eq(0).addClass('top-main-txt-init');
144    }
145    tmvElm.eq(tmvCount2).addClass('top-main-active_next');
146
147    tmvCount1++;
148    tmvCount2++;
149    if (tmvCount0 > tmvLen) {
150      tmvCount0 = 0;
151    }
152    if (tmvCount0_2 > tmvLen) {
153      tmvCount0_2 = 0;
154    }
155    if (tmvCount1 > tmvLen) {
156      tmvCount1 = 0;
157    }
158    if (tmvCount2 > tmvLen) {
159      tmvCount2 = 0;
160    }
161  }
162  var tmvTimer = setInterval(function() {
163    tmvInitFlg = true;
164    topMainVisual();
165  }, 6000);
166  topMainVisual();
167
168  /* top main scroll effect */
169  
170  function topMainScroll() {
171    $('.top-main-scroll').addClass('top-main-scroll-active').stop(true, true).queue(new Function).delay(1000).queue(function() {
172      $(this).removeClass('top-main-scroll-active')
173    }).dequeue();
174  }
175  var tmvTimer = setInterval(function() {
176    topMainScroll();
177  }, 5000);
178  topMainScroll();
179  
180
181});
182
183$(window).on('load scroll',function (){
184	$(".no-over").each(function(){
185		var animePos = $(this).offset().top;	 
186		var scroll = $(window).scrollTop();
187		var windowHeight = $(window).height();
188		if (scroll > animePos - windowHeight + windowHeight/50){
189		$(this).removeClass('no-over').addClass('is-over');
190		$('.is-over').removeClass('is-over').addClass('is-end');
191		setTimeout(function() {
192		 	$('.is-end span.txt-wrp, .is-end span.image-wrp').css({
193			 	"opacity": "1",
194			 	"transition": "all .4s",
195			 	"transition-timing-function": "ease-in-out"
196			});
197		}, 700);
198		setTimeout(function() {
199			if($('.is-end').hasClass('anime-title--02')) {
200				$('.is-end'+'.anime-title--02').css({
201				 	 "background": "#1a88d1",
202				 	 "transition": "all .4s",
203				 	 "transition-timing-function": "ease-in-out"
204			});
205			}
206		}, 800);
207		// if($('.is-end').hasClass('anime-title--02')) {
208		// 	setTimeout(function() {
209		// 		$('.is-end'+'.anime-title--02').css({
210		//		 "background": "#1a88d1"
211		//	});
212		// 	}, 1000);
213		// }
214		} else {
215		}
216	});
217	$(".anime-btn").each(function(){
218		var animePos = $(this).offset().top;
219		var scroll = $(window).scrollTop();
220		var windowHeight = $(window).height();
221		if (scroll > animePos - windowHeight + windowHeight/50){
222			$(this).addClass('is-shown');
223		} else {
224		}
225	});
226	$('.circle').each(function(){
227		var animePos = $(this).offset().top;
228		var scroll = $(window).scrollTop();
229		var windowHeight = $(window).height();
230		if(scroll > animePos - windowHeight + windowHeight/10 && !($(this).hasClass('is-anime') || $(this).hasClass('end-anime'))) {
231			var min = 1;
232			var max = 3;
233			var rando_num = Math.floor(Math.random() * (max + 1 - min)) + min;
234			var anime_delay = '.5s'
235			var anime_dur = '3s'
236			if(rando_num == 1) {
237				anime_delay = '.4s';
238				anime_dur = '.6s';
239			}
240			else if(rando_num == 2) {
241				anime_delay = '.6s';
242				anime_dur = '.8s';
243			}
244			else {
245				anime_delay = '.8s';
246				anime_dur = '1.2s';
247			}
248			$(this).addClass('is-anime');
249			$(this).css({
250				'-webkit-animation-delay': anime_delay,
251				'animation-delay': anime_delay,
252				'-webkit-animation-duration': anime_dur,

253				'animation-duration': anime_dur
254			});
255		}
256	});
257});
258
259
260/* ------------------------------------------------------------
261   関数(プラグイン)複数
262 * ------------------------------------------------------------ */
263function animateElement() {
264  var wow = new WOW({
265    boxClass: 'js-fade',
266    // animated element css class (default is wow)
267    animateClass: 'animated',
268    // animation css class (default is animated)
269    offset: -300,
270    // distance to the element when triggering the animation (default is 0)
271    mobile: true,
272    // trigger animations on mobile devices (default is true)
273    live: true,
274    // act on asynchronously loaded content (default is true)
275    scrollContainer: null // optional scroll container selector, otherwise use window
276  });
277  wow.init();
278}
279function fixHeader() {
280  var $target = $('.l-header');
281  if ($(window).width() > 1024) {
282    $target.removeClass('is-fixed-sp');
283  } else {
284    $target.removeClass('is-fixed');
285  }
286  if ($target.get(0)) {
287    $(window).scroll(function() {
288      var elemBottomOffset = $target.offset().top;
289      if ($(window).width() > 1024) {
290        if ($(window).scrollTop() > 60) {
291          $target.addClass('is-fixed');
292        } else {
293          $target.removeClass('is-fixed');
294        }
295      } else {
296        if ($(window).scrollTop() > 63) {
297          $target.addClass('is-fixed-sp');
298        } else {
299          $target.removeClass('is-fixed-sp');
300        }
301      }
302    });
303  }
304}
305function headerHeight() {
306  // var header_height = $('header').height();
307  var header_height = $('header').outerHeight();
308  $('#l-container').css("padding-top", header_height);
309}
310
311/* ------------------------------------------------------------
312* [ imageFullBg ]
313* ------------------------------------------------------------ */
314function imageFullBg() {
315  $('.js-fullbg').each(function() {
316    var img = $(this).children('img')
317      , imgSrc = img.attr('src');
318    img.hide();
319    if ($(this).parent().hasClass('image-wrp')) {
320      $(this).css("display", "inline-block");
321    }
322    if ($(this).hasClass('bg-transition')) {
323      $(this).css({
324        'background': '#fff url(' + imgSrc + ')',
325        'background-size': 'cover',
326        'background-position': 'center'
327      });
328    } else if ($(this).hasClass('ngk-image')) {
329      $(this).css({
330        'background': '#ddd url(' + imgSrc + ')',
331        'background-size': 'auto',
332        'background-position': 'center',
333        'background-repeat': 'no-repeat'
334      });
335    } else if ($(this).hasClass('align_top')) {
336      $(this).css({
337        'background': 'url(' + imgSrc + ')',
338        'background-size': 'cover',
339        'background-position': 'top',
340      });
341    } else if ($(this).hasClass('align_bottom')) {
342      $(this).css({
343        'background': 'url(' + imgSrc + ')',
344        'background-size': 'cover',
345        'background-position': 'bottom'
346      });
347    } else {
348      $(this).css({
349        'background': 'url(' + imgSrc + ')',
350        'background-size': 'cover',
351        'background-position': 'center',
352      });
353    }
354    $(this).show(0);
355  });
356}
357
358/* ------------------------------------------------------------
359* [ parallaxBg ]
360* ------------------------------------------------------------ */
361
362function parallaxBg() {
363  $('.js-parallax-bg').each(function(index) {
364    var $self = $(this);
365    var offsetPositions = $self.offset();
366    $(window).on('resize scroll', function() {
367      if (($(window).scrollTop() + $(window).height()) > offsetPositions.top && ((offsetPositions.top + $self.height()) > $(window).scrollTop())) {
368        var offsetY = $(window).scrollTop() - offsetPositions.top;
369        var self_height = $self.height() / 2;
370        if ($('.js-parallax-bg').hasClass('js-parallax-bg--02')) {
371          var calc_height = 50 - (((offsetY) / 5) / self_height * 100);
372          if (764 < currentWidth && currentWidth < 1024) {
373            var calc_height = 50 - (((offsetY) / 70) / self_height * 100);
374          }
375          if (currentWidth < 764) {
376            var calc_height = 50 - (((offsetY) / 25) / self_height * 100);
377          }
378        } else {
379          var calc_height = 50 - (((offsetY) / 3) / self_height * 100);
380        }
381
382        var positions = '50%' + '50%';
383
384        $self.css('backgroundPosition', positions);
385        var item_calc_height = 50 - ((offsetY / 12) / self_height * 100);
386        var item_position = 100 - item_calc_height;
387        $self.closest('.box-main-image').find('.js-parallax-item').css("top", item_position + '%');
388
389      }
390    });

391  });
392}