constructor内の名前変更

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

@@ -16,7 +16,7 @@
   \*********************************/
 /***/ (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.elements = {\n      element: document.getElementsByClassName(\"scrollUp\"),\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.elements.element.length; i++) {\n            let elementClientRect =\n              this.elements.element[i].getBoundingClientRect();\n            let elementY = this.elements.scrollY + elementClientRect.top;\n            if (\n              scrollY >\n              elementY - this.elements.windowHeight + this.elements.showTiming\n            ) {\n              this.elements.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    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?");
 
 /***/ }),
 

develop/src/assets/js/fadeIn.js

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