Skip to content

Yutaka Kobayashi / jsStudy

Go to a project
Commit 14ebb36f by Yutaka Kobayashi
Options

ファイルを外部からimport

1 parent 0ab81146
Expand all
Inline Side-by-side
Showing with 89 additions and 79 deletions
develop/.tmp/index.html
...@@ -32,7 +32,7 @@ ...@@ -32,7 +32,7 @@
<h2 class="modal__title">吾輩は猫である</h2> <h2 class="modal__title">吾輩は猫である</h2>
<p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p> <p class="modal__text">吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
...@@ -43,7 +43,7 @@ ...@@ -43,7 +43,7 @@
<h2 class="modal__title">銀河鉄道の夜</h2> <h2 class="modal__title">銀河鉄道の夜</h2>
<p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p> <p class="modal__text">「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
<h2 class="modal__title">風の歌を聴け</h2> <h2 class="modal__title">風の歌を聴け</h2>
<p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p> <p class="modal__text">「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。</p>
<p class="modal__button closeButton">閉じる</p> <p class="modal__button closeButton">閉じる</p>
<div class="close closeButton"> <div class="close__sign closeButton">
<div class="close__line --type01"></div> <div class="close__line --type01"></div>
<div class="close__line --type02"></div> <div class="close__line --type02"></div>
</div> </div>
......
develop/src/assets/js/fadeIn.js 0 → 100644
import { throttle } from "throttle-debounce";
export function fadeIn() {
// フェードイン
fadeIn() {
window.addEventListener(
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset;
var windowHeight = window.innerHeight;
var showTiming = 200;
for (var i = 0; i < element.length; i++) {
var elementClientRect = element[i].getBoundingClientRect();
var elementY = scrollY + elementClientRect.top;
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
develop/src/assets/js/home.js
import { throttle } from "throttle-debounce"; window.addEventListener("DOMContentLoaded", () => {
class Home { modal();
constructor() { fadeIn();
this.modal(); });
this.fadeIn();
}
modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(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 mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
// フェードイン // import { throttle } from "throttle-debounce";
fadeIn() { import { modal } from "./modal";
window.addEventListener( import { fadeIn } from "./fadeIn";
"scroll",
throttle(300, () => {
window.addEventListener("scroll", () => {
var element = document.getElementsByClassName("scrollUp");
if (!element) return;
var scrollY = window.pageYOffset; // class Home {
var windowHeight = window.innerHeight; // constructor() {
var showTiming = 200; // this.modal();
for (var i = 0; i < element.length; i++) { // this.fadeIn();
var elementClientRect = element[i].getBoundingClientRect(); // }
var elementY = scrollY + elementClientRect.top; // }
if (scrollY > elementY - windowHeight + showTiming) {
element[i].classList.add("is-show");
}
}
});
})
);
}
}
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
new Home(); new Home();
......
develop/src/assets/js/modal.js 0 → 100644
export function modal() {
const body = document.getElementsByTagName("body")[0];
const button = document.querySelectorAll(".novelList__button");
const modalBack = document.querySelector(".modalBackground");
const modal = document.querySelectorAll(".modal");
const closeButton = document.querySelector(".modal__button");
// モーダルを表示する
for (let i = 0; i < button.length; i++) {
button[i].addEventListener("click", addOpen);
function addOpen(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 mpdalElements = document.querySelectorAll(".modal");
mpdalElements.forEach((item) => {
item.classList.remove("open");
});
}
const closeTrigger = document.querySelectorAll(".closeButton");
closeTrigger.forEach((item) => {
item.addEventListener("click", menuClick);
});
}
develop/src/assets/styles/dist/modal.min.scss
...@@ -74,7 +74,7 @@ ...@@ -74,7 +74,7 @@
} }
/* クローズボタン */ /* クローズボタン */
.close { .close__sign {
width: 25px; width: 25px;
height: 25px; height: 25px;
position: absolute; position: absolute;
......
develop/src/html/index.pug
...@@ -9,7 +9,7 @@ block main ...@@ -9,7 +9,7 @@ block main
h2.modal__title 吾輩は猫である h2.modal__title 吾輩は猫である
p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 p.modal__text 吾輩わがはいは猫である。名前はまだ無い。どこで生れたかとんと見当けんとうがつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -18,7 +18,7 @@ block main ...@@ -18,7 +18,7 @@ block main
h2.modal__title 銀河鉄道の夜 h2.modal__title 銀河鉄道の夜
p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。 p.modal__text 「ではみなさんは、そういうふうに川だと云いわれたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。」先生は、黒板に吊つるした大きな黒い星座の図の、上から下へ白くけぶった銀河帯のようなところを指さしながら、みんなに問といをかけました。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
...@@ -27,7 +27,7 @@ block main ...@@ -27,7 +27,7 @@ block main
h2.modal__title 風の歌を聴け h2.modal__title 風の歌を聴け
p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。 p.modal__text 「完璧な文章などといったものは存在しない。完璧な絶望が存在しないようにね。」僕が大学生のころ偶然に知り合ったある作家は僕に向ってそう言った。僕がその本当の意味を理解できたのはずっと後のことだったが、少くともそれをある種の慰めとしてとることも可能であった。
p.modal__button.closeButton 閉じる p.modal__button.closeButton 閉じる
.close.closeButton .close__sign.closeButton
.close__line.--type01 .close__line.--type01
.close__line.--type02 .close__line.--type02
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!