質問編集履歴

3

コメントの記述方法を修正。

2022/10/01 13:10

投稿

lattesaurus
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

 

2022/10/01 06:51

投稿

lattesaurus
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 ```でコードを囲みました。

2022/10/01 06:50

投稿

lattesaurus
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