https://www.harezack.com/common/js/top.js?2024080601

1/* ===================================================================
2JavaScript information
3 file name  :  top.js
4 script info :  トップページ設定
5=================================================================== */
6
7
8
9var slider;
10var sliderFlag = false;
11var breakpoint = 768; //768px以下の場合
12
13function sliderSet() {
14	var windowWidth = window.innerWidth;
15	if (windowWidth >= breakpoint && !sliderFlag) { //768px以上は1行でスライダー表示
16		slider = $('.news-slider').bxSlider({
17			touchEnabled: false, //リンクを有効にするためスライドをマウスでドラッグした際にスライドの切り替えを可能にする機能を無効化
18			mode: 'vertical', //縦スライド指定
19			controls: false, //前後のコントロールを表示させない。
20			auto: 'true', //自動的にスライド
21			pager: false //ページ送り無効化
22		});
23		sliderFlag = true;
24	} else if (windowWidth < breakpoint && sliderFlag) {
25		slider.destroySlider(); //bxSliderのOptionであるdestroySliderを使用してスライダーの動きを除去
26		sliderFlag = false;
27	}
28}
29
30$(window).on('load resize', function () {
31	sliderSet();
32});
33
34
35
36
37$('.special-collection-slider').slick({
38	infinite: true,
39	loop: true,
40	slidesToShow: 1,
41	slidesToScroll: 1,
42	fade: false,
43	dots: true,
44	arrows: false,
45	autoplay: true, // 自動再生
46	autoplaySpeed: 3000, // 1枚3秒
47	pauseOnHover: false, // マウスを触っても停止しない
48	asNavFor: ".special-collection-slider-thumbnail",
49});
50$(".special-collection-slider-thumbnail").slick({
51	slidesToShow: 4,
52	asNavFor: ".special-collection-slider",

53	focusOnSelect: true,
54});
55
56
57
58const hgslider = new Swiper('.hairstyle-gallery-slider', {
59	// オプション設定
60	loop: true, // ループさせる
61	loopAdditionalSlides: 10, // ループのときに作られるクローンの枚数。
62	parallax: true, // パパラックスさせる
63	speed: 1200,
64	allowTouchMove: false, // マウスでのスワイプを禁止speed: 1200,
65	autoplay: {
66		delay: 3000, // ３秒後に次のスライドへ
67		disableOnInteraction: false, // ユーザー側で操作してもスライドを止めない
68	},
69});
70
71
72
73/** new 202407 **/
74
75$('.mv-slider').slick({
76	accessibility: false,
77	arrows: false,
78	autoplay: true,
79	pauseOnHover: false,
80	pauseOnFocus: false,
81	slidesToShow: 1,
82	slidesToScroll: 1,
83	swipe: false,
84});
85$('.mv-slider-thumbnail').slick({
86	asNavFor: ".mv-slider",
87	slidesToShow: 10,
88	infinite: false,
89	focusOnSelect: true,
90	arrows: false,
91});
92$('.mv-slider').on('beforeChange', function (event, slick, currentSlide, nextSlide) {
93	var index = nextSlide;
94	$(".mv-slider-thumbnail .slick-slide").removeClass("slick-current").eq(index).addClass("slick-current");
95});
96
97
98$('.slider-top').slick({
99	accessibility: false, // 左右矢印ボタンでの切り替えなし
100	arrows: false, //左右矢印ボタン表示なし
101	autoplay: true, //自動的に動き出すか。初期値はfalse。
102	pauseOnHover: false, //オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
103	pauseOnFocus: false, //フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
104	slidesToShow: 1, //スライドを画面に1枚見せる
105	slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる
106	swipe: false, //タッチスワイプに対応しない
107});
108//スライド下の設定
109$('.slider-bottom').slick({
110	accessibility: false, // 左右矢印ボタンでの切り替えなし
111	arrows: false, //左右矢印ボタン表示なし
112	autoplay: true, //自動的に動き出すか。初期値はfalse。
113	pauseOnHover: false, //オンマウスでスライドを一時停止させるかどうか。初期値はtrue。
114	pauseOnFocus: false, //フォーカスした際にスライドを一時停止させるかどうか。初期値はtrue。
115	slidesToShow: 1, //スライドを画面に1枚見せる
116	slidesToScroll: 1, //1回のスクロールで1枚の写真を移動して見せる
117	swipe: false, //タッチスワイプに対応しない
118	rtl: true, //スライダの表示方向を左⇒右に変更する
119});
120
121$(function () {
122	$(window).on('load scroll', function () {
123		var anyElementActive = false;
124
125		$('.lineup-fade-in').each(function () {
126			var target = $(this).offset().top;
127			var scroll = $(window).scrollTop();
128			var height = $(window).height();
129
130			// ターゲットまでスクロールするとフェードインする
131			if (scroll > target - height) {
132				$(this).addClass('active');
133				anyElementActive = true; // 少なくとも1つの要素がアクティブ
134			} else {
135				$(this).removeClass('active');
136			}
137		});
138
139		// アクティブな要素があるかどうかに基づいて'head-join'に'active'クラスを追加または削除
140		if (anyElementActive) {
141			$('.head-join').addClass('active');
142		} else {
143			$('.head-join').removeClass('active');
144		}
145	});
146});