teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

2

HTMLとCSSのソースコードを追加

2020/12/17 04:08

投稿

HayatoKamiyama
HayatoKamiyama

スコア8

title CHANGED
File without changes
body CHANGED
@@ -7,6 +7,20 @@
7
7
 
8
8
  https://codepen.io/kami8ma8810/pen/KKgmQgr
9
9
 
10
+ ```HTML
11
+ <div class="js-trigger">
12
+ <img class="js-fadeIn" src="https://picsum.photos/seed/1/200/300" alt="">
13
+ <img class="js-fadeIn" src="https://picsum.photos/seed/2/200/300" alt="">
14
+ <img class="js-fadeIn" src="https://picsum.photos/seed/3/200/300" alt="">
15
+ </div>
16
+ ```
17
+
18
+ ```CSS
19
+ .js-fadeIn {
20
+ opacity: 0;
21
+ }
22
+ ```
23
+
10
24
  ```JavaScript
11
25
  // 監視対象
12
26
  const targets = document.querySelectorAll(".js-trigger");

1

jsソースコードを追加

2020/12/17 04:08

投稿

HayatoKamiyama
HayatoKamiyama

スコア8

title CHANGED
File without changes
body CHANGED
@@ -5,4 +5,45 @@
5
5
 
6
6
  よろしくお願いします。
7
7
 
8
- https://codepen.io/kami8ma8810/pen/KKgmQgr
8
+ https://codepen.io/kami8ma8810/pen/KKgmQgr
9
+
10
+ ```JavaScript
11
+ // 監視対象
12
+ const targets = document.querySelectorAll(".js-trigger");
13
+
14
+ // オプション
15
+ const options = {
16
+ root: null,
17
+ rootMargin: "-50% 0px",
18
+ threshold: 0
19
+ };
20
+
21
+ // オブジェクト生成
22
+ const observer = new IntersectionObserver(doWhenIntersect, options);
23
+
24
+ // targetを監視
25
+ targets.forEach((target) => {
26
+ observer.observer(target);
27
+ });
28
+
29
+ const doWhenIntersect = (entries) => {
30
+ entries.forEach((entry) => {
31
+ if (entry.isIntersecting) {
32
+ document.querySelectorAll(".js-fadeIn").forEach(function () {
33
+ gsap.fromTo(
34
+ ".js-fadeIn",
35
+ { y: 50 },
36
+ {
37
+ delay: 1,
38
+ duration: 1.5,
39
+ y: 0,
40
+ opacity: 1,
41
+ ease: "power2.out",
42
+ stagger: 0.5
43
+ }
44
+ );
45
+ });
46
+ }
47
+ });
48
+ };
49
+ ```