Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit ec58005a by Yutaka Kobayashi
Options

一旦コミット

1 parent 0315452d
Expand all
Inline Side-by-side
Showing with 33 additions and 300 deletions
develop/src/assets/js/fadeIn.js
import { throttle } from "throttle-debounce";
export class Fade {
fadeIn() {
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
let element = document.getElementsByClassName("scrollUp");
if (!element) return;
constructor() {
this.elements = {
element: document.getElementsByClassName("scrollUp"),
scrollY: window.pageYOffset,
windowHeight: window.innerHeight,
showTiming: 200,
};
}
let scrollY = window.pageYOffset;
let windowHeight = window.innerHeight;
let showTiming = 200;
for (let i = 0; i < element.length; i++) {
let elementClientRect = element[i].getBoundingClientRect();
let elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
if (!element) return;
for (let i = 0; i < element.length; i++) {
let elementClientRect = element[i].getBoundingClientRect();
let elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
});
})
);
}
}
});
})
);
}
develop/src/assets/js/home.js
import { Modal } from "./Modal.js";
import { Modal } from "./modal.js";
import { Fade } from "./fadeIn.js";
// const modal = new Modal();
// modal.openModal();
// const fade = new Fade();
// fade.fadeIn();
// const variables1 = "e";
// const variables1 = "e";
class Home {
constructor() {
// 初期化時に必ず実行される関数
new Modal();
// new Fade();
new Fade();
}
}
document.addEventListener("DOMContentLoaded", () => {
new Home();
});
// // グローバル汚染をしないようにする
// class Home1 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// class Home2 {
// constructor() {
// this.variables1 = "from home";
// }
// }
// $(function () {
// const variables1 = 1;
// });
// window.addEventListener("DOMContentLoaded", () => {
// const variables1 = 1;
// });
develop/src/assets/js/modal copy.js deleted 100644 → 0
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
button: document.querySelectorAll(".novelList__button"),
modalBack: document.querySelector(".modalBackground"),
modal: document.querySelectorAll(".modal"),
closeTrigger: document.querySelectorAll(".closeButton"),
};
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
this.elements.button[i].addEventListener("click", () => {
this.open(i);
});
}
// モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
for (let i = 0; i < this.elements.modal.length; i++) {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
// openModal() {
// // モーダルを非表示にする
// closeButton.addEventListener("click", () => {});
// function menuClick() {
// body.classList.remove(this.openClassName);
// modalBack.classList.remove(this.openClassName);
// const modalElements = document.querySelector(".modal");
// modalElements.forEach((item) => {
// item.classList.remove(this.openClassName);
// });
// }
// closeTrigger.forEach((item) => {
// item.addEventListener("click", menuClick);
// });
// }
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal.js
// ドットシンタックス
const person = {
name: "小林勇太崇",
age: 24,
};
console.log(person.name);
export class Modal {
constructor() {
// this.body = document.querySelector("body");
// this.button = document.querySelector(".novelList__button");
// this.modalBack = document.querySelector(".modalBackground");
// this.modal = document.querySelector(".modal");
// this.closeButton = document.querySelector(".modal__button");
// DOM要素を取得している
this.elements = {
body: document.querySelector("body"),
......@@ -26,35 +12,29 @@ export class Modal {
// モーダルが開いた時のクラス名
this.openClassName = "open";
// モーダルを開く処理を登録
// ①モーダルを開く処理を登録
for (let i = 0; i < this.elements.button.length; i++) {
this.elements.button[i].addEventListener("click", () => {
this.open(i);
this.open();
});
}
// モーダルを閉じる処理を登録
// ②モーダルを閉じる処理を登録
for (let i = 0; i < this.elements.closeTrigger.length; i++) {
this.elements.closeTrigger[i].addEventListener("click", () => {});
// this.elements.closeTrigger[i].addEventListener("click", this.close())
this.elements.closeTrigger[i].addEventListener("click", () => {
this.close();
});
}
// for (let i = 0; i < button.length; i++) {
// button[i].addEventListener("click", (e) => {
// e.preventDefault(); //
// });
// }
}
// モーダルを開く処理
open(index) {
//　①モーダルを開く処理
open() {
this.elements.body.classList.add(this.openClassName);
this.elements.modalBack.classList.add(this.openClassName);
this.elements.modal[index].classList.add(this.openClassName);
}
// モーダルを閉じる処理
// ②モーダルを閉じる処理
close() {
this.elements.body.classList.remove(this.openClassName);
this.elements.modalBack.classList.remove(this.openClassName);
......@@ -62,55 +42,4 @@ export class Modal {
this.elements.modal[i].classList.remove(this.openClassName);
}
}
openModal() {
// モーダルを非表示にする
closeButton.addEventListener("click", () => {});
function menuClick() {
body.classList.remove(this.openClassName);
modalBack.classList.remove(this.openClassName);
const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => {
item.classList.remove(this.openClassName);
});
}
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
}
// class Modal {
// constructor() {}
// }
// // きほんの形
// class ClassBase {
// constructor() {
// // クラスフィールドの定義
// this.xxx = "xxx";
// this.person = "kobayashi"; // 使いまわしたいもの
// this.SPEED = 1000; // 定数
// this.method02(); // SPEED : 1000
// this.method01(); // SPEED : 1200
// this.method02(); // SPEED : 1200
// }
// method01() {
// this.SPEED = 1200;
// console.log(this.SPEED);
// }
// method02() {
// console.log(this.SPEED);
// }
// method03() {
// console.log(this.xxx);
// }
// }
develop/src/assets/js/modal_.js deleted 100644 → 0
export class Modal {
openModal() {
const body = document.querySelector("body");
const button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelector(".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.querySelector(".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!