https://rhythm.jp/cmn/js/top_v2.js

1$(function () {
2	browWidth = $(window).width();
3	browHeight = $(window).height();
4});
5
6
7
8$(window).on('load', function () {
9
10	//
11	//     main visual slick slider
12	// -------------------------------
13
14	var topMv = $('.page-toppage #main_visual');
15	var mvSlider = $('.page-toppage #main_visual .mv_slider');
16	var slideValue;
17	mvSlider.slick({
18		autoplay: true,
19		speed: 2000, // スライド、フェードアニメーションの速度2000ミリ秒
20		autoplaySpeed: 4000, // 次のスライドに行くスピード
21		dots: true,
22		arrows: false,
23		fade: true,
24		pauseOnFocus: false,//フォーカスで一時停止
25		pauseOnHover: false,//マウスホバーで一時停止
26		pauseOnDotsHover: false//ドットナビをマウスホバーで一時停止
27	}).on({
28		beforeChange: function (event, slick, currentSlide, nextSlide) {
29			// 表示されているスライドに"slide-animation"のclassをつける
30			$(".slick-slide", this).eq(nextSlide).addClass("slide-animation");
31			// あとで"slide-animation"のclassを消すための"remove-animation"classを付ける
32			$(".slick-slide", this).eq(currentSlide).addClass("remove-animation");
33
34			if (slideValue !== $(".slick-slide", this).eq(nextSlide).data('slide-product')) {
35				topMv.find('[data-txt-product],.btn').removeClass('on');
36			}
37
38		}, afterChange: function (event, slick, currentSlide, nextSlide) {
39			// 表示していないスライドはアニメーションのclassを外す
40			setTimeout(()=> {
41				$(".remove-animation", this).removeClass(
42					"remove-animation slide-animation"
43				);
44			},1500);
45
46			// テキストの表示変える
47			if (slideValue !== $(".slick-slide", this).eq(currentSlide).data('slide-product')) {
48				slideValue = $(".slick-slide", this).eq(currentSlide).data('slide-product');
49				$('#main_visual').attr('data-prod-value', slideValue);
50				topMv.find('[data-txt-product*=' + slideValue + '],.btn[data-btn-product*=' + slideValue + ']').addClass('on');
51			}
52		},
53	});
54
55	// slickが準備完了したか判断
56	$('.page-toppage #main_visual').addClass('js-slide_load');
57	// テキスト関係 最初の値を取得
58	slideValue = $('.page-toppage .slick-slide.slick-current').data('slide-product');
59	// 最初のアニメーション関係
60	$('.page-toppage .mv_slider .slide_img:first-of-type').addClass('slide-animation remove-animation');
61	// pagenation mv txtの下 作成
62	var pagenation = $('.page-toppage .js-mv_slide_pagenation');
63	// pagenation.html($('.slick-dots').html()).find('button').prepend('0');
64	pagenation.html($('.slick-dots').html());
65	pagenation.find('button').each(function (i, elem) {
66		$(this).val(i);
67	});
68	pagenation.find('li').each(function (i, elem) {
69		if (i !== 0) {
70			pagenation.find('li').eq(i).before('<span>/</span>');
71		}
72	});
73
74	$(pagenation.find('button')).on('click', function () {
75		mvSlider.slick('slickGoTo', $(this).val(), false);
76	});
77});
78
79
80// -------------------------------
81//     scroll
82// -------------------------------
83$(window).on('scroll', function () {
84	scrTop = $(window).scrollTop();
85
86	// nav fixed PCのみ
87	if (scrTop > $('.mv_txt_wrap').offset().top) {
88		$('.sp_device .nav_wrap').addClass('onmv');
89	} else {
90		$('.sp_device .nav_wrap').removeClass('onmv');
91	}
92});