Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 62edc9b6 by Yutaka Kobayashi
Options

コード全体の手直し

1 parent 8a103ee0
Inline Side-by-side
Showing with 16 additions and 16 deletions
develop/.tmp/assets/js/home.js
...@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac ...@@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\*********************************/ \*********************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Fade\": function() { return /* binding */ Fade; }\n/* harmony export */ });\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ \"./node_modules/throttle-debounce/esm/index.js\");\n\nclass Fade {\n fadeIn() {\n window.addEventListener(\n \"scroll\",\n (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n window.addEventListener(\"scroll\", () => {\n var element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n var scrollY = window.pageYOffset;\n var windowHeight = window.innerHeight;\n var showTiming = 200;\n for (var i = 0; i < element.length; i++) {\n var elementClientRect = element[i].getBoundingClientRect();\n var elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add(\"is-show\");\n }\n }\n });\n })\n );\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/fadeIn.js?"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"Fade\": function() { return /* binding */ Fade; }\n/* harmony export */ });\n/* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ \"./node_modules/throttle-debounce/esm/index.js\");\n\nclass Fade {\n fadeIn() {\n window.addEventListener(\n \"scroll\",\n (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n window.addEventListener(\"scroll\", () => {\n let element = document.getElementsByClassName(\"scrollUp\");\n if (!element) return;\n\n let scrollY = window.pageYOffset;\n let windowHeight = window.innerHeight;\n let showTiming = 200;\n for (let i = 0; i < element.length; i++) {\n let elementClientRect = element[i].getBoundingClientRect();\n let elementY = scrollY + elementClientRect.top;\n if (scrollY > elementY - windowHeight + showTiming) {\n element[i].classList.add(\"is-show\");\n }\n }\n });\n })\n );\n }\n}\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/fadeIn.js?");
/***/ }), /***/ }),
...@@ -36,7 +36,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac ...@@ -36,7 +36,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
\*******************************/ \*******************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) { /***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Modal_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.js */ \"./src/assets/js/Modal.js\");\n/* harmony import */ var _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fadeIn.js */ \"./src/assets/js/fadeIn.js\");\n\n\n\nconst modal = new _Modal_js__WEBPACK_IMPORTED_MODULE_0__.Modal();\nmodal.openModal();\n\nconst fadeIn = new _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__.Fade();\nfadeIn.fadeIn();\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?"); eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _Modal_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./Modal.js */ \"./src/assets/js/Modal.js\");\n/* harmony import */ var _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./fadeIn.js */ \"./src/assets/js/fadeIn.js\");\n\n\n\nconst modal = new _Modal_js__WEBPACK_IMPORTED_MODULE_0__.Modal();\nmodal.openModal();\n\nconst fade = new _fadeIn_js__WEBPACK_IMPORTED_MODULE_1__.Fade();\nfade.fadeIn();\n\n\n//# sourceURL=webpack://static-boilerplate/./src/assets/js/home.js?");
/***/ }), /***/ }),
......
develop/src/assets/js/fadeIn.js
...@@ -5,15 +5,15 @@ export class Fade { ...@@ -5,15 +5,15 @@ export class Fade {
"scroll", "scroll",
throttle(300, () => { throttle(300, () => {
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp"); let element = document.getElementsByClassName("scrollUp");
if (!element) return; if (!element) return;
var scrollY = window.pageYOffset; let scrollY = window.pageYOffset;
var windowHeight = window.innerHeight; let windowHeight = window.innerHeight;
var showTiming = 200; let showTiming = 200;
for (var i = 0; i < element.length; i++) { for (let i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect(); let elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top; let elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) { if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show"); element[i].classList.add("is-show");
} }
......
develop/src/assets/js/home.js
...@@ -4,5 +4,5 @@ import { Fade } from "./fadeIn.js"; ...@@ -4,5 +4,5 @@ import { Fade } from "./fadeIn.js";
const modal = new Modal(); const modal = new Modal();
modal.openModal(); modal.openModal();
const fadeIn = new Fade(); const fade = new Fade();
fadeIn.fadeIn(); fade.fadeIn();
develop/src/assets/js/modal.js
export class Modal { export class Modal {
openModal() { openModal() {
const body = document.getElementsByTagName("body")[0]; const body = document.querySelector("body");
const button = document.querySelectorAll(".novelList__button"); const button = document.querySelector(".novelList__button");
const modalBack = document.querySelector(".modalBackground"); const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal"); const modal = document.querySelector(".modal");
const closeButton = document.querySelector(".modal__button"); const closeButton = document.querySelector(".modal__button");
// モーダルを表示する // モーダルを表示する
...@@ -28,14 +28,14 @@ export class Modal { ...@@ -28,14 +28,14 @@ export class Modal {
function menuClick() { function menuClick() {
body.classList.remove("open"); body.classList.remove("open");
modalBack.classList.remove("open"); modalBack.classList.remove("open");
const modalElements = document.querySelectorAll(".modal"); const modalElements = document.querySelector(".modal");
modalElements.forEach((item) => { modalElements.forEach((item) => {
item.classList.remove("open"); item.classList.remove("open");
}); });
} }
const closeTrigger = document.querySelectorAll(".closeButton"); const closeTrigger = document.querySelector(".closeButton");
closeTrigger.forEach((item) => { closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick); 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!