回答編集履歴

1

別案

2020/07/19 14:44

投稿

Jon_do
Jon_do

スコア1373

test CHANGED
@@ -1,127 +1,53 @@
1
- 恐らくこういうことかと思ったので作成してみました。
1
+ 追記
2
2
 
3
- jqueryは使わず素のJavascript作成しています。
3
+ 画像1枚もそれっぽことも出来ます。
4
4
 
5
- ```HTML
5
+ あとこの場合、sectionタグは使わないほうが無難だと思います。
6
6
 
7
- <body>
7
+ https://developer.mozilla.org/ja/docs/Web/HTML/Element/section
8
8
 
9
- <div class="img01 modal"></div>
9
+ ```css
10
10
 
11
- <div class="img02 modal displayNone"></div>
11
+ .bg {
12
12
 
13
- <div class="img03 modal displayNone"></div>
13
+ background-image: url(https://i.imgur.com/EoMSvRb.png);
14
14
 
15
- <div class="img04 modal displayNone"></div>
16
-
17
- <div class="img05 modal displayNone"></div>
18
-
19
- <div class="img06 modal displayNone"></div>
20
-
21
- <div class="img07 modal displayNone"></div>
22
-
23
- <div class="img08 modal displayNone"></div>
24
-
25
- <div class="img09 modal displayNone"></div>
26
-
27
- <div class="img10 modal displayNone"></div>
28
-
29
- <div class="img11 modal displayNone"></div>
30
-
31
- <div class="img12 modal displayNone"></div>
32
-
33
- <div class="img13 modal displayNone"></div>
34
-
35
- <div class="img14 modal displayNone"></div>
36
-
37
- <div class="img15 modal displayNone"></div>
38
-
39
- <div class="img16 modal displayNone"></div>
40
-
41
- <div class="img17 modal displayNone"></div>
42
-
43
- <div class="img18 modal displayNone"></div>
44
-
45
- <div class="img19 modal displayNone"></div>
46
-
47
- <div class="img20 modal displayNone"></div>
48
-
49
- <div class="bg"></div>
50
-
51
- <div class="bg"></div>
52
-
53
- <div class="bg"></div>
54
-
55
- <div class="bg"></div>
56
-
57
- <div class="bg"></div>
58
-
59
- <div class="bg"></div>
60
-
61
- <div class="bg"></div>
62
-
63
- <div class="bg"></div>
64
-
65
- <div class="bg"></div>
66
-
67
- <div class="bg"></div>
68
-
69
- <div class="bg"></div>
70
-
71
- <div class="bg"></div>
72
-
73
- <div class="bg"></div>
74
-
75
- <div class="bg"></div>
76
-
77
- <div class="bg"></div>
78
-
79
- <div class="bg"></div>
80
-
81
- <div class="bg"></div>
82
-
83
- <div class="bg"></div>
84
-
85
- <div class="bg"></div>
86
-
87
- <div class="bg"></div>
88
-
89
- <script>
15
+ }
90
16
 
91
17
 
92
18
 
93
- const bg = document.getElementsByClassName("bg");
19
+ .bg._01 {
94
20
 
95
- const modal = document.getElementsByClassName("modal");
21
+ transform: scale(0.2);
22
+
23
+ }
96
24
 
97
25
 
98
26
 
99
- window.addEventListener("scroll", () => {
27
+ .bg._02 {
100
28
 
101
- for (let i = 0; i < 20; i++) {
29
+ transform: scale(0.4);
102
30
 
103
- if (bg[i].getBoundingClientRect().top <= 100) {
31
+ }
104
32
 
105
- modal[i].classList.remove("displayNone");
33
+ .bg._03 {
106
34
 
107
- } else {
35
+ transform: scale(0.6);
108
36
 
109
- modal[i].classList.add("displayNone");
37
+ }
110
38
 
111
- }
39
+ .bg._04 {
112
40
 
113
- }
41
+ transform: scale(0.8);
114
42
 
115
- });
43
+ }
44
+
45
+ .bg._05 {
46
+
47
+ transform: scale(1);
48
+
49
+ }
116
50
 
117
51
 
118
52
 
119
- </script>
120
-
121
- </body>
122
-
123
-
124
-
125
- </html>
126
-
127
53
  ```