https://roshidere-puzzle.com/js/script.js

1//==================================
2// SWIPER character
3//==================================
4const character__slide = new Swiper(".character-swiper__swiper", {
5  loop: true,
6  effect: "fade",
7  speed: 600,
8  fadeEffect: {
9    crossFade: true,
10  },
11
12  pagination: {
13    el: ".character-swiper__pagination",
14    clickable: true,
15  },
16
17  navigation: {
18    nextEl: ".character-swiper__next",
19    prevEl: ".character-swiper__prev",
20  },
21});
22
23const GRAD_DATA = ["linear-gradient(to bottom, rgba(245, 114, 149, 0.9), rgba(245, 149, 152, 0.9))", "linear-gradient(to bottom, rgba(255, 181, 53, 0.9), rgba(255, 211, 92, 0.9))", "linear-gradient(to bottom, rgba(194, 126, 241, 0.9), rgba(238, 157, 243, 0.9))", "linear-gradient(to bottom, rgba(90, 57, 238, 0.9), rgba(134, 162, 243, 0.9))", "linear-gradient(to bottom, rgba(249, 85, 85, 0.9), rgba(243, 151, 136, 0.9))"
24, "linear-gradient(to bottom, rgba(255, 137, 65, 0.9), rgba(255, 162, 71, 0.9))"
25, "linear-gradient(to bottom, rgba(51, 176, 239, 0.9), rgba(119, 198, 234, 0.9))"
26
27];
28
29const bgChangeTarget = document.querySelector(".character");
30gsap.set(bgChangeTarget, {
31  background: GRAD_DATA[0],
32});
33character__slide.on("slideChange", function () {
34  gsap.to(bgChangeTarget, {
35    duration: 0.6,
36    background: GRAD_DATA[character__slide.realIndex],
37  });
38});
39//==================================
40// SWIPER game
41//==================================
42const game__slide = new Swiper(".game-swiper", {
43  loop: true,
44  effect: "fade",
45  speed: 1000,
46  fadeEffect: {
47    crossFade: true,
48  },
49
50  pagination: {
51    el: ".game-swiper__pagination",
52    clickable: true,
53  },
54
55  navigation: {
56    nextEl: ".game-swiper__next",
57    prevEl: ".game-swiper__prev",
58  },
59});
60
61//==================================
62// ふわっと登場IntersectionObserver
63//==================================
64const intersectionObserver = new IntersectionObserver(function (entries) {
65  entries.forEach(function (entry) {
66    if (entry.isIntersecting) {
67      entry.target.classList.add("is-in-view");
68    } else {
69      entry.target.classList.remove("is-in-view");
70    }
71  });
72});
73
74const inViewItems = document.querySelectorAll(".js-in-view");
75inViewItems.forEach(function (inViewItem) {
76  intersectionObserver.observe(inViewItem);
77});
78
79//==================================
80// movie modal
81//==================================
82const modal = document.querySelector("#videoModal");
83const modalButton = document.querySelector(".js-video-open");
84const modalClose = document.querySelector(".js-close-button");
85const modalinner = document.querySelector(".video-modal__inner");
86const video = document.querySelector("#modalVideo");
87
88let scrollPosition = 0; // スクロール位置を保存する変数
89
90const disableScroll = () => {
91  scrollPosition = window.scrollY; // 現在のスクロール位置を保存
92  document.body.style.position = "fixed";
93  document.body.style.top = `-${scrollPosition}px`; // スクロール位置を保持するためにtopを設定
94  document.body.style.width = "100%";
95
96  // touchmoveイベントを無効化
97  document.addEventListener("touchmove", preventScroll, { passive: false });
98};
99
100const enableScroll = () => {
101  document.body.style.position = "";
102  document.body.style.top = "";
103  document.body.style.width = "";
104  window.scrollTo(0, scrollPosition); // 保存したスクロール位置に戻す
105
106  // touchmoveイベントの無効化を解除
107  document.removeEventListener("touchmove", preventScroll);
108};
109
110const preventScroll = (event) => {
111  event.preventDefault();
112};
113
114const closeModal = () => {
115  modal.classList.remove("is-open");
116  enableScroll(); // スクロールを有効に戻す
117  video.pause(); // ビデオを停止
118  video.currentTime = 0; // 再生位置をリセット
119};
120
121modalButton.addEventListener("click", () => {
122  modal.classList.add("is-open");
123  disableScroll(); // スクロールを無効にする
124  video.play(); // モーダルが開いたらすぐにビデオを再生
125});
126
127modalClose.addEventListener("click", closeModal);
128
129modalinner.addEventListener("click", (event) => {
130  if (event.target === modalinner) {
131    closeModal();
132  }
133});
134
135document.addEventListener("DOMContentLoaded", () => {
136  // ページ読み込み時にモーダルを表示
137  modal.classList.add("is-open");
138  disableScroll(); // スクロールを無効にする
139  modalClose.addEventListener("click", closeModal);
140  modalinner.addEventListener("click", (event) => {
141    if (event.target === modalinner) {
142      closeModal();
143    }
144  });
145});