てんとう虫

develop/.tmp/assets/js/home.js

@@ -16,7 +16,7 @@
   \*********************************/
   \*********************************/
 /***/ (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  constructor() {\n    this.scrollElements = {\n      element: document.getElementsByClassName(\"scrollUp\"),\n    };\n    this.scrollProperty = {\n      scrollY: window.pageYOffset,\n      windowHeight: window.innerHeight,\n      showTiming: 200,\n    };\n\n    window.addEventListener(\n      \"scroll\",\n      (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n        window.addEventListener(\"scroll\", () => {\n          for (let i = 0; i < this.scrollElements.element.length; i++) {\n            let elementClientRect =\n              this.scrollElements.element[i].getBoundingClientRect();\n            let elementY = this.scrollProperty.scrollY + elementClientRect.top;\n            if (\n              scrollY >\n              elementY -\n                this.scrollProperty.windowHeight +\n                this.scrollProperty.showTiming\n            ) {\n              this.scrollElements.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  constructor() {\n    let element = document.querySelectorAll(\".scrollUp\");\n    this.scrollProperty = {\n      scrollY: window.pageYOffset,\n      windowHeight: window.innerHeight,\n      showTiming: 200,\n    };\n\n    window.addEventListener(\n      \"scroll\",\n      (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, () => {\n        window.addEventListener(\"scroll\", () => {\n          for (let i = 0; i < element.length; i++) {\n            let elementClientRect = element[i].getBoundingClientRect();\n            let elementY = this.scrollProperty.scrollY + elementClientRect.top;\n            if (\n              scrollY >\n              elementY -\n                this.scrollProperty.windowHeight +\n                this.scrollProperty.showTiming\n            ) {\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?");
 
 
 /***/ }),
 /***/ }),
 
 

develop/src/assets/js/fadeIn.js

 import { throttle } from "throttle-debounce";
 import { throttle } from "throttle-debounce";
 export class Fade {
 export class Fade {
   constructor() {
   constructor() {
-    this.scrollElements = {
-      element: document.getElementsByClassName("scrollUp"),
-    };
+    let element = document.querySelectorAll(".scrollUp");
     this.scrollProperty = {
     this.scrollProperty = {
       scrollY: window.pageYOffset,
       scrollY: window.pageYOffset,
       windowHeight: window.innerHeight,
       windowHeight: window.innerHeight,
@@ -14,9 +12,8 @@ export class Fade {
       "scroll",
       "scroll",
       throttle(300, () => {
       throttle(300, () => {
         window.addEventListener("scroll", () => {
         window.addEventListener("scroll", () => {
-          for (let i = 0; i < this.scrollElements.element.length; i++) {
-            let elementClientRect =
-              this.scrollElements.element[i].getBoundingClientRect();
+          for (let i = 0; i < element.length; i++) {
+            let elementClientRect = element[i].getBoundingClientRect();
             let elementY = this.scrollProperty.scrollY + elementClientRect.top;
             let elementY = this.scrollProperty.scrollY + elementClientRect.top;
             if (
             if (
               scrollY >
               scrollY >
@@ -24,7 +21,7 @@ export class Fade {
                 this.scrollProperty.windowHeight +
                 this.scrollProperty.windowHeight +
                 this.scrollProperty.showTiming
                 this.scrollProperty.showTiming
             ) {
             ) {
-              this.scrollElements.element[i].classList.add("is-show");
+              element[i].classList.add("is-show");
             }
             }
           }
           }
         });
         });