Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 93cc70e6 by Yutaka Kobayashi
Options

modalが動いたので一旦保存

1 parent 0ab81146
Expand all
Inline Side-by-side
Showing with 160 additions and 78 deletions
develop/src/assets/js/fadeIn.js 0 → 100644
import { throttle } from "throttle-debounce";
class Home {
constructor() {
this.modal();
this.fadeIn();
}
modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(e) {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
}
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
const mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
// フェードイン
fadeIn() {
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight;
var showTiming = 200;
for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => {
new Home();
});
develop/src/assets/js/home.js
import { throttle } from "throttle-debounce";
class Home {
constructor() {
this.modal();
this.fadeIn();
}
modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(e) {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
}
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
const mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
// フェードイン
fadeIn() {
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight;
var showTiming = 200;
for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => {
new Home();
});
import { Modal } from "./Modal.js";
const modal = new Modal();
modal.openModal();
// class Home {
// constructor() {
// this.Modal();
// this.fadeIn();
// }
// // フェードイン
// fadeIn() {
// window.addEventListener(
// "scroll",
// throttle(300, () => {
// window.addEventListener("scroll", () => {
// var element = document.getElementsByClassName("scrollUp");
// if (!element) return;
// var scrollY = window.pageYOffset;
// var windowHeight = window.innerHeight;
// var showTiming = 200;
// for (var i = 0; i < element.length; i++) {
// var elementClientRect = element[i].getBoundingClientRect();
// var elementY = scrollY + elementClientRect.top;
// if (scrollY > elementY - windowHeight + showTiming) {
// element[i].classList.add("is-show");
// }
// }
// });
// })
// );
// }
// }
// window.addEventListener("DOMContentLoaded", () => {
// new Home();
// });
develop/src/assets/js/modal.js 0 → 100644
export class Modal {
openModal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", (e) => {
e.preventDefault();
body.classList.add("open");
modalBack.classList.add("open");
modal[i].classList.add("open");
});
}
// モーダルを非表示にする
closeButton.addEventListener("click", () => {
body.classList.remove("open");
modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) {
modal[i].classList.remove("open");
}
});
function menuClick() {
body.classList.remove("open");
modalBack.classList.remove("open");
const modalElements = document.querySelectorAll(".modal");
modalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!