https://www.okinawa-chintai.jp/control/js/top.js

1$(document).ready(function() {
2	$(".header").each(function () {
3			$(this).css({
4				opacity: 1,
5				transform: 'translate(0, 0)'
6			});
7	});
8});
9
10
11/*=========================================================
12// slick01
13===========================================================*/
14//プログレスバーを付けているのでautoplay: trueを指定しない
15$(function(){
16	var run;
17	var percentTime;
18	var progress = $('.bar');
19	var slick = $('.slick01');
20	slick.slick({
21		pauseOnFocus: false,
22		pauseOnHover: false,
23		draggable: false,
24		fade: true
25	});
26	function start() {
27		reset();
28		percentTime = 0;
29		run = setInterval(interval, 10);//変数intervalの処理を10ミリ秒ごとに繰り返す
30	}
31	function interval() {
32		percentTime += .35;//この数字が大きいほど早い
33
34	progress.css({
35		width: percentTime+"%"
36	});
37	if(percentTime >= 100) {
38			slick.slick('slickNext');//スライドの切り替えはslickNextのオプションを利用
39			start();
40		}
41	}
42	function reset() {
43		progress.css({
44			width: 0+'%'
45		});
46		clearTimeout(run);//変数intervalの処理終わり
47	}
48	start();
49});
50
51
52
53
54
55
56/*=========================================================
57// slick02
58===========================================================*/
59$('.slick02').slick({
60		slidesToShow: 4,
61		autoplay: true,
62		autoplaySpeed: 3000,
63		pauseOnFocus: false,
64		pauseOnHover: false,
65		variableWidth: true,
66		responsive: [{
67			breakpoint: 1600,
68			settings: {
69				slidesToShow: 3,
70			}
71		},{
72			breakpoint: 786, //786以下無効
73			settings: 'unslick'
74		}
75	]
76});
77//786以下無効
78$(window).on('resize',function(){
79	$('.slick02').slick('resize');
80});
81
82
83/*=========================================================
84// ヘッダー
85===========================================================*/
86$(document).ready(function() {
87	$(".header").each(function () {
88		$(this).css({
89			opacity: 1,
90			/*transform: 'translate(0, 0)'*/
91		});
92	});
93	$(".slick01 .slick-dots").each(function () {
94		$(this).css({
95			opacity: 1
96		});
97	});
98});
99
100
101
102/*=========================================================
103// slick3
104===========================================================*/
105$(function(){
106	function sliderSetting(){
107		
108		var width3 = $(window).width();
109		
110		if(width3 <= 750){
111			$('.slick3').not('.slick-initialized').slick({
112				autoplaySpeed: 2000,
113				autoplay: true,
114				fade: true,
115				dots: false,
116				arrows: false
117			});
118		} else {
119			$('.slick3.slick-initialized').slick('unslick');
120		}
121	}
122	
123	sliderSetting();
124	
125	$(window).resize( function() {
126		sliderSetting();
127	});
128});
129
130/*=========================================================
131// MV
132===========================================================*/
133
134// パララックスのターゲット取得
135  const target = document.getElementsByClassName('js-parallax');
136  // パララックスを行うエリア
137  const activeArea = document.getElementById('js-parallaxArea');
138  // ウィンドウの中心の取得
139  const xCenter = window.innerWidth / 2;
140  const yCenter = window.innerHeight / 2;
141  // パララックスで移動させる距離
142  const parallaxVal = 12; //中心からマウスの距離の10分１移動
143
144  // マウスがパララックスエリアに入った時のイベント
145  activeArea.addEventListener('mousemove', (e) => {
146    // マウスの座標を取得して 中心からの距離取得、 そこからpararaxValで距離を調整
147    const x = (xCenter - e.pageX) / parallaxVal;
148    const y = (yCenter - e.pageY) / parallaxVal;
149    // パララックスさせる要素にstyleの指定
150    for (var i = 0; i < target.length; i++) {
151      target[i].style.transform = `translate(${-x}px, ${-y}px)`;
152    }
153  });
154