質問編集履歴
3
コメントの記述方法を修正。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -5,53 +5,53 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
```javascript
|
|
8
|
-
/要素を取得
|
|
8
|
+
//要素を取得
|
|
9
9
|
const scrollElements = document.querySelectorAll(".js-scroll");
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
/定数elementInViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
|
|
12
|
+
//定数elementInViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
|
|
13
13
|
const elementInView = (el, dividend = 1) => {
|
|
14
14
|
const elementTop = el.getBoundingClientRect().top;
|
|
15
15
|
|
|
16
|
-
/ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、elememntTopがその数値以下ならそれを戻り値とする。
|
|
16
|
+
//ウィンドウの高さ、またはドキュメントの高さをdividend（デフォルト値は1）で割った数値を出し、elememntTopがその数値以下ならそれを戻り値とする。
|
|
17
17
|
return (elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend);
|
|
18
18
|
};
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
/定数elementOutofViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
|
|
21
|
+
//定数elementOutofViewに関数を代入。引数からel要素を取得し、ビューポートから取得した要素の真上までの長さを定数elementTopに入れる。
|
|
22
22
|
const elementOutofView = (el) => {
|
|
23
23
|
const elementTop = el.getBoundingClientRect().top;
|
|
24
24
|
|
|
25
|
-
/elementTopよりウィンドウの高さ、またはドキュメントの高さが大きいならそれを戻り値とする。
|
|
25
|
+
//elementTopよりウィンドウの高さ、またはドキュメントの高さが大きいならそれを戻り値とする。
|
|
26
26
|
return (elementTop > (window.innerHeight || document.documentElement.clientHeight));
|
|
27
27
|
};
|
|
28
28
|
|
|
29
|
-
/この関数が実行された場合、el要素にscrolledクラスを追加する
|
|
29
|
+
//この関数が実行された場合、el要素にscrolledクラスを追加する
|
|
30
30
|
const displayScrollElement = (element) => {
|
|
31
31
|
element.classList.add("scrolled");
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
/この関数が実行された場合、el要素からscrolledクラスを外す
|
|
35
|
+
//この関数が実行された場合、el要素からscrolledクラスを外す
|
|
36
36
|
const hideScrollElement = (element) => {
|
|
37
37
|
element.classList.remove("scrolled");
|
|
38
38
|
};
|
|
39
39
|
|
|
40
40
|
|
|
41
41
|
const handleScrollAnimation = () => {
|
|
42
|
-
/scrollElementsの各要素に対して、if文を実行する
|
|
42
|
+
//scrollElementsの各要素に対して、if文を実行する
|
|
43
43
|
scrollElements.forEach((el) => {
|
|
44
|
-
/el要素の上部がelementInView(el, 1.25)以下の場合、関数displayScrollElementを実行する
|
|
44
|
+
//el要素の上部がelementInView(el, 1.25)以下の場合、関数displayScrollElementを実行する
|
|
45
45
|
if (elementInView(el, 1.25)) {
|
|
46
46
|
displayScrollElement(el);
|
|
47
|
-
/もしel要素の上部がel要素より小さい場合、関数hideScrollElementを実行する
|
|
47
|
+
//もしel要素の上部がel要素より小さい場合、関数hideScrollElementを実行する
|
|
48
48
|
} else if (elementOutofView(el)) {
|
|
49
49
|
hideScrollElement(el)
|
|
50
50
|
}
|
|
51
51
|
})
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
-
/スクロールした場合、handleScrollAnimation関数を実行する
|
|
54
|
+
//スクロールした場合、handleScrollAnimation関数を実行する
|
|
55
55
|
window.addEventListener("scroll", () => {
|
|
56
56
|
handleScrollAnimation();
|
|
57
57
|
});
|
2
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
コードを完全に理解できるようになりたいです。
|
|
63
63
|
|
|
64
64
|
### 該当のソースコード
|
|
65
|
-
|
|
65
|
+
```javascript
|
|
66
66
|
const scrollElements = document.querySelectorAll(".js-scroll");
|
|
67
67
|
|
|
68
68
|
const elementInView = (el, dividend = 1) => {
|
|
@@ -98,3 +98,4 @@
|
|
|
98
98
|
window.addEventListener("scroll", () => {
|
|
99
99
|
handleScrollAnimation();
|
|
100
100
|
});
|
|
101
|
+
```
|
1
コードを見やすくするために、 ```javascript ```でコードを囲みました。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -3,10 +3,8 @@
|
|
|
3
3
|
JSを学習中です。以下のスクロールアニメーションを学んでいます。
|
|
4
4
|
私の解釈で間違っていないか、また間違っている部分を教えてほしいです。
|
|
5
5
|
|
|
6
|
-
＊
|
|
7
|
-
＊
|
|
8
|
-
＊
|
|
9
6
|
|
|
7
|
+
```javascript
|
|
10
8
|
/要素を取得/
|
|
11
9
|
const scrollElements = document.querySelectorAll(".js-scroll");
|
|
12
10
|
|
|
@@ -57,6 +55,7 @@
|
|
|
57
55
|
window.addEventListener("scroll", () => {
|
|
58
56
|
handleScrollAnimation();
|
|
59
57
|
});
|
|
58
|
+
```
|
|
60
59
|
|
|
61
60
|
### 実現したいこと
|
|
62
61
|
|