Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 3b78055d by Yutaka Kobayashi
Options

スクロールを間引くように変更

1 parent 54321859
Expand all
Inline Side-by-side
Showing with 27 additions and 36 deletions
develop/package-lock.json
...@@ -18,7 +18,6 @@ ...@@ -18,7 +18,6 @@
"imagemin-mozjpeg": "^9.0.0", "imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2", "imagemin-pngquant": "^9.0.2",
"imagemin-svgo": "^10.0.0", "imagemin-svgo": "^10.0.0",
"lodash": "^4.17.21",
"npm-run-all": "^4.1.5", "npm-run-all": "^4.1.5",
"postcss": "^8.3.11", "postcss": "^8.3.11",
"postcss-cli": "^9.1.0", "postcss-cli": "^9.1.0",
...@@ -34,8 +33,7 @@ ...@@ -34,8 +33,7 @@
"webpack-cli": "^4.9.1" "webpack-cli": "^4.9.1"
}, },
"devDependencies": { "devDependencies": {
"gsap": "^3.8.0", "gsap": "^3.8.0"
"jquery": "^3.6.0"
} }
}, },
"node_modules/@babel/helper-validator-identifier": { "node_modules/@babel/helper-validator-identifier": {
...@@ -5303,12 +5301,6 @@ ...@@ -5303,12 +5301,6 @@
"node": ">= 10.13.0" "node": ">= 10.13.0"
} }
}, },
"node_modules/jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"dev": true
},
"node_modules/js-stringify": { "node_modules/js-stringify": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz", "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
...@@ -13529,12 +13521,6 @@ ...@@ -13529,12 +13521,6 @@
"supports-color": "^8.0.0" "supports-color": "^8.0.0"
} }
}, },
"jquery": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
"integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
"dev": true
},
"js-stringify": { "js-stringify": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz", "resolved": "https://registry.npmjs.org/js-stringify/-/js-stringify-1.0.2.tgz",
......
develop/package.json
...@@ -45,6 +45,7 @@ ...@@ -45,6 +45,7 @@
"pug-cli": "github:pugjs/pug-cli#master", "pug-cli": "github:pugjs/pug-cli#master",
"rimraf": "^3.0.2", "rimraf": "^3.0.2",
"sass": "^1.43.5", "sass": "^1.43.5",
"throttle-debounce": "^5.0.0",
"ts-loader": "^9.2.6", "ts-loader": "^9.2.6",
"typescript": "^4.5.2", "typescript": "^4.5.2",
"webpack": "^5.64.1", "webpack": "^5.64.1",
...@@ -64,4 +65,4 @@ ...@@ -64,4 +65,4 @@
"android >= 4.4", "android >= 4.4",
"bb >= 10" "bb >= 10"
] ]
} }
\ No newline at end of file
develop/src/assets/js/home.js
import { throttle } from "throttle-debounce";
class Home { class Home {
constructor() { constructor() {
this.modal(); this.modal();
...@@ -23,7 +24,7 @@ class Home { ...@@ -23,7 +24,7 @@ class Home {
} }
// モーダルを非表示にする // モーダルを非表示にする
closebutton.addEventListener("click", function () { closebutton.addEventListener("click", () => {
body.classList.remove("open"); body.classList.remove("open");
modalBack.classList.remove("open"); modalBack.classList.remove("open");
for (let i = 0; i < modal.length; i++) { for (let i = 0; i < modal.length; i++) {
...@@ -34,37 +35,41 @@ class Home { ...@@ -34,37 +35,41 @@ class Home {
function menuClick() { function menuClick() {
body.classList.remove("open"); body.classList.remove("open");
modalBack.classList.remove("open"); modalBack.classList.remove("open");
const hogeElements = document.querySelectorAll(".modal"); const mpdalElements = document.querySelectorAll(".modal");
hogeElements.forEach((item) => { mpdalElements.forEach((item) => {
item.classList.remove("open"); item.classList.remove("open");
}); });
} }
const closeTrigger = document.querySelectorAll(".closeButton"); const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => { closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick, false); item.addEventListener("click", menuClick);
}); });
} }
// フェードイン // フェードイン
fadeIn() { fadeIn() {
function scroll_effect() { window.addEventListener(
var element = document.getElementsByClassName("scrollUp"); "scroll",
if (!element) return; throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset; var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight; var windowHeight = window.innerHeight;
var showTiming = 200; var showTiming = 200;
for (var i = 0; i < element.length; i++) { for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect(); var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top; var 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");
} }
} }
} });
window.addEventListener("scroll", scroll_effect); })
);
} }
} }
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!