https://www.suit-select.com/ss_wp/wp-content/themes/suitselect2025/assets/js/top.js

1// Cookie操作：取得
2function getCookie(name) {
3    const value = `; ${document.cookie}`;
4    const parts = value.split(`; ${name}=`);
5    if (parts.length === 2) return parts.pop().split(';').shift();
6    return null;
7}
8
9// Cookie操作：設定
10function setCookie(name, value, days = 1) {
11    const expires = new Date(Date.now() + days * 864e5).toUTCString();
12    document.cookie = `${name}=${value}; expires=${expires}; path=/`;
13}
14
15window.addEventListener('DOMContentLoaded', function () {
16    const op = getCookie("opening");
17    const opening = document.getElementById("opening");
18    const logo = opening.querySelector("p");
19
20    if (op !== "end") {
21        // 初期状態
22        logo.style.display = "block";
23        logo.style.opacity = 0;
24
25        // 順番にアニメーションを実行
26        setTimeout(() => {
27            logo.style.transition = "opacity 0.8s ease";
28            logo.style.opacity = 1;
29
30            setTimeout(() => {
31                logo.style.transition = "width 0.6s ease-out, margin-left 0.6s ease-out";
32                logo.style.width = "180px";
33                logo.style.marginLeft = "-90px";
34
35                setTimeout(() => {
36                    logo.style.transition = "opacity 0.8s ease";
37                    logo.style.opacity = 0;
38
39                    setTimeout(() => {
40                        logo.style.display = "none";
41                        opening.style.transition = "opacity 1s ease";
42                        opening.style.opacity = 0;
43
44                        setTimeout(() => {
45                            opening.style.display = "none";
46                        }, 1000);
47
48                        setCookie("opening", "finish");
49                        // setCookie("opening", "end"); // 開発時に使う
50                    }, 1000);
51
52                }, 1000);
53
54            }, 600);
55
56        }, 200);
57
58    } else {
59        opening.style.display = "none";
60    }
61});
62
63//headerの配色部分の挙動
64gsap.registerPlugin(ScrollTrigger);
65
66const header = document.querySelector('header');
67
68// ページ読み込み時に scrollY が 0 なら top_sticky を付与
69window.addEventListener('load', () => {
70    if (window.scrollY === 0) {
71        header.classList.add('top_sticky');
72    }
73});
74
75// ScrollTriggerで、contents_groupが90%に入ったら削除
76ScrollTrigger.create({
77    trigger: ".header_trigger",
78    start: "center 60%",
79    onEnter: () => {
80        header.classList.remove('top_sticky');
81    },
82    onLeaveBack: () => {
83        if (window.scrollY === 0) {
84            header.classList.add('top_sticky');
85        }
86    }
87});
88
89// スクロールでトップに戻ったら再度追加（ページ上部判定）
90window.addEventListener('scroll', () => {
91    if (window.scrollY === 0) {
92        header.classList.add('top_sticky');
93    }
94});
95// メインビジュアル動き
96gsap.fromTo(".site_title",
97    {
98        opacity: 0,
99        scale: 0,
100    },
101    {
102        opacity: 1,
103        scale: 1,
104        scrollTrigger: {
105            trigger: ".mv_block",
106            start: "top top",
107            end: "center 25%",
108            scrub: true,
109        },
110    }
111);
112
113//コンセプト背景色の挙動
114gsap.fromTo(".concept_block",
115    {
116        backgroundColor: "rgba(0, 0, 0, 0)",
117        backdropFilter: "blur(0px)",
118    },
119    {
120        backgroundColor: "rgba(0, 0, 0, .6)",
121        backdropFilter: "blur(6px)",
122        webkitBackdropFilter: "blur(6px)", // Safari対応
123        scrollTrigger: {
124            trigger: ".concept_block",
125            start: "top bottom",
126            end: "center 25%",
127            scrub: true,
128        }
129    }
130);
131
132
133//スワイパー
134var swiper = new Swiper(".feature_bnr_swiper", {
135    navigation: {
136        nextEl: ".swiper-button-next",
137        prevEl: ".swiper-button-prev",
138    },
139    slidesPerView: 1.125,
140    breakpoints: {
141        640: {
142            slidesPerView: 1.55,
143        },
144        960: {
145            slidesPerView: 2.25,
146        }
147    },
148});
149
150/* 性別別コレクションの動画スタートの挙動 */
151// 画面幅が959px以下のときだけ実行
152if (window.innerWidth <= 959) {
153    // mens_collection に start_movie クラスを付与
154    ScrollTrigger.create({
155        trigger: ".mens_collection",
156        start: "top 65%",
157        onEnter: () => {
158            document.querySelector(".mens_collection").classList.add("start_movie");
159        }
160    });

161
162    // ladies_collection に start_movie クラスを付与
163    ScrollTrigger.create({
164        trigger: ".ladies_collection",
165        start: "top 65%",
166        onEnter: () => {
167            document.querySelector(".ladies_collection").classList.add("start_movie");
168        }
169    });
170}