https://shiso.or.jp/wpapp/wp-content/themes/shiso2022ver2/js/top.js

1$(function () {
2	//slick
3	$('.wrap_spots_contents').slick({
4		autoplay: true,
5		autoplaySpeed: 3000,
6		centerMode: true,
7		centerPadding: '10%',
8		dots: true,
9		slidesToShow: 3,
10		responsive: [
11			{
12				breakpoint: 769, //769px以下のサイズに適用
13				settings: {
14					arrows: false,
15					slidesToShow: 1,
16				},
17			},
18		],
19	});
20
21	$('.wrap_keyimage .slider').on('init', function () {
22		$('.wrap_keyimage .slick-slide[data-slick-index="0"]').addClass('slick-animation');
23	})
24		.slick({
25		infinite: true,
26		slidesToShow: 1,
27		slidesToScroll: 1,
28		arrows: true,
29		fade: true,
30		speed: 1500,
31		autoplaySpeed: 6000,
32		autoplay: true,
33		prevArrow: '<img src="https://shiso.or.jp/wpapp/wp-content/themes/shiso2022/images/top/slick_arrow01_pc.png" class="slide-arrow prev-arrow">',
34		nextArrow: '<img src="https://shiso.or.jp/wpapp/wp-content/themes/shiso2022/images/top/slick_arrow02_pc.png" class="slide-arrow next-arrow">',
35		responsive: [
36			{
37				breakpoint: 769, //769px以下のサイズに適用
38				settings: {
39					arrows: false,
40				},
41			},
42		],
43	})
44		.on({
45		// スライドが移動する前に発生するイベント
46		beforeChange: function (event, slick, currentSlide, nextSlide) {
47			//表示されているスライドに.slick-animationのクラスをつける
48			$(".slick-slide", this).eq(nextSlide).addClass("slick-animation");
49
50			//あとで、.slick-animationのクラスを消すための.stop-animationクラスを付ける
51			$(".slick-slide", this).eq(currentSlide).addClass("stop-animation");
52		},
53		// スライドが移動した後に発生するイベント
54		afterChange: function () {
55			//見えてないスライドにはアニメーションのクラスを外す
56			$(".stop-animation", this).removeClass("stop-animation slick-animation");
57		},
58	});
59
60	// タグ生成
61
62	$(".mask").wrap("<div class='mask-wrap'>");
63	$(".mask").append("<div class='mask-bg'></div>");
64
65	$(window).scroll(function(){
66		var top = $(".tour_contents01").offset().top; // ターゲットの位置取得
67		var position = top - $(window).height();  // 発火させたい位置
68		if($(window).scrollTop() > position){
69			$('.tour_contents01').find('.tour_text,.img_tour').fadeIn(3000);
70			$('.tour_contents01').find('.mask').stop().animate({
71				"top": "0%"
72			}, function () {
73				$(this).find(".mask-bg").stop().animate({
74					"top": "100%"
75				}, "fast");
76			});
77		}
78
79		var top = $(".tour_contents02").offset().top; // ターゲットの位置取得
80		var position = top - $(window).height();  // 発火させたい位置
81		if($(window).scrollTop() > position){
82			$('.tour_contents02').find('.tour_text,.img_tour').fadeIn(3000);
83			$('.tour_contents02').find('.mask').stop().animate({
84				"top": "0%"
85			}, function () {
86				$(this).find(".mask-bg").stop().animate({
87					"top": "100%"
88				}, "fast");
89			});
90		}
91
92		var top = $(".tour_contents03").offset().top; // ターゲットの位置取得
93		var position = top - $(window).height();  // 発火させたい位置
94		if($(window).scrollTop() > position){
95			$('.tour_contents03').find('.tour_text,.img_tour').fadeIn(3000);
96			$('.tour_contents03').find('.mask').stop().animate({
97				"top": "0%"
98			}, function () {
99				$(this).find(".mask-bg").stop().animate({
100					"top": "100%"
101				}, "fast");
102			});
103		}
104
105		var top = $(".tour_contents04").offset().top; // ターゲットの位置取得
106		var position = top - $(window).height();  // 発火させたい位置
107		if($(window).scrollTop() > position){
108			$('.tour_contents04').find('.tour_text,.img_tour').fadeIn(3000);
109			$('.tour_contents04').find('.mask').stop().animate({
110				"top": "0%"
111			}, function () {
112				$(this).find(".mask-bg").stop().animate({
113					"top": "100%"
114				}, "fast");
115			});
116		}
117	});
118
119});