Commit ff9e46a7 by Yutaka Kobayashi

モーダルとフェードインを動くように修正

1 parent ec58005a
...@@ -7,21 +7,24 @@ export class Fade { ...@@ -7,21 +7,24 @@ export class Fade {
windowHeight: window.innerHeight, windowHeight: window.innerHeight,
showTiming: 200, showTiming: 200,
}; };
}
window.addEventListener( window.addEventListener(
"scroll", "scroll",
throttle(300, () => { throttle(300, () => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
if (!element) return; for (let i = 0; i < this.elements.element.length; i++) {
for (let i = 0; i < element.length; i++) { let elementClientRect =
let elementClientRect = element[i].getBoundingClientRect(); this.elements.element[i].getBoundingClientRect();
let elementY = scrollY + elementClientRect.top; let elementY = this.elements.scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) { if (
element[i].classList.add("is-show"); scrollY >
elementY - this.elements.windowHeight + this.elements.showTiming
) {
this.elements.element[i].classList.add("is-show");
} }
} }
}); });
}) })
); );
}
} }
...@@ -13,9 +13,9 @@ export class Modal { ...@@ -13,9 +13,9 @@ export class Modal {
this.openClassName = "open"; this.openClassName = "open";
// ①モーダルを開く処理を登録 // ①モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) { for (let number = 0; number < this.elements.button.length; number++) {
this.elements.button[i].addEventListener("click", () => { this.elements.button[number].addEventListener("click", () => {
this.open(); this.open(number);
}); });
} }
...@@ -28,7 +28,7 @@ export class Modal { ...@@ -28,7 +28,7 @@ export class Modal {
} }
// ①モーダルを開く処理 // ①モーダルを開く処理
open() { open(index) {
this.elements.body.classList.add(this.openClassName); this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName); this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName); this.elements.modal[index].classList.add(this.openClassName);
......
...@@ -16,6 +16,6 @@ document.addEventListener("DOMContentLoaded", () => { ...@@ -16,6 +16,6 @@ document.addEventListener("DOMContentLoaded", () => {
// クラス // クラス
new Second(); new Second();
// 関数 // 関数Ç
second(); second();
}); });
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!