teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問javascriptでのpng透過画像のスクロールと同時にフェードインするやり方。

編集履歴

質問編集履歴

1

きちんと出来ているかどうかわかりませんが、修正しました。

2018/07/03 05:57

投稿

Navymac10
Navymac10

スコア8

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,134 @@
1
+ ```javascript
2
+
3
+ <script src="test/js/scrollreveal.js"></script>
4
+
5
+ <script>
6
+
7
+ window.sr = ScrollReveal({ reset: true });
8
+
9
+
10
+
11
+ // Distance
12
+
13
+ sr.reveal('.distanceHundred', { distance: "500px", origin: "left" });
14
+
15
+ // Distance
16
+
17
+ sr.reveal('.distanceHundred2', { distance: "500px", origin: "left", delay: "100"})
18
+
19
+ // Distance
20
+
21
+ sr.reveal('.distanceHundred3', { distance: "500px", origin: "left", delay: "200"})
22
+
23
+ // Distance
24
+
25
+ sr.reveal('.distanceHundred4', { distance: "500px", origin: "left", delay: "300"})
26
+
27
+ // Distance
28
+
29
+ sr.reveal('.distanceHundred5', { distance: "500px", origin: "left", delay: "400"})
30
+
31
+ // Distance
32
+
33
+ sr.reveal('.distanceHundred6', { distance: "500px", origin: "left", delay: "460"})
34
+
35
+ // Distance
36
+
37
+ sr.reveal('.distanceHundred7', { distance: "500px", origin: "left", delay: "600"})
38
+
39
+ // Distance
40
+
41
+ sr.reveal('.distanceHundred8', { distance: "500px", origin: "left", delay: "710"})
42
+
43
+ // Distance
44
+
45
+ sr.reveal('.distanceHundred9', { distance: "500px", origin: "left", delay: "750"})
46
+
47
+ // Origin
48
+
49
+ sr.reveal('.default');
50
+
51
+ // Origin
52
+
53
+ sr.reveal('.default2');
54
+
55
+ // Delay
56
+
57
+ sr.reveal('.delayOne', { delay: "500" });
58
+
59
+ // Delay
60
+
61
+ sr.reveal('.delayThree', { delay: "3000" });
62
+
63
+ </script>
64
+
65
+ ```css
66
+
67
+ .box12 {
68
+
69
+ width :100%; text-align:center;
70
+
71
+ position: absolute;
72
+
73
+ top: 11248px; /*ブラウザのウィンドウ基準*/
74
+
75
+ left: -16px; /*ブラウザのウィンドウ基準*/
76
+
77
+ background: #fff;
78
+
79
+ font-weight: bold;
80
+
81
+ padding: 1em;
82
+
83
+ margin: 0 auto;
84
+
85
+ text-align: center;
86
+
87
+ border-radius: 6px;
88
+
89
+ }
90
+
91
+ .box-small {
92
+
93
+ display: inline-block;
94
+
95
+ width: auto;
96
+
97
+ }
98
+
99
+ .some-content {
100
+
101
+ padding: 12em 0;
102
+
103
+ margin: 4em 0;
104
+
105
+ }
106
+
107
+ ```html
108
+
109
+ <div class="shashin">
110
+
111
+ <img class="sha" src="1476268_s_wi/voice-haikei.jpg">
112
+
113
+ </div>
114
+
115
+
116
+
117
+
118
+
119
+ <div class="box12 delayOne">
120
+
121
+ <img class="sha2" src="1476268_s_wi/voice-mae.jpg">
122
+
123
+ </div>
124
+
125
+
126
+
127
+ ```
128
+
129
+ ```
130
+
1
- ### 前提・実現したいこと
131
+ ```### 前提・実現したいこと
2
132
 
3
133
 
4
134
 
@@ -42,153 +172,15 @@
42
172
 
43
173
 
44
174
 
45
- ```html
175
+
46
-
47
- <div class="shashin">
176
+
48
-
49
- <img class="sha" src="1476268_s_wi/voice-haikei.jpg">
177
+
50
-
51
- </div>
178
+
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
-
60
-
61
- ```css
179
+
62
-
63
- .box12 {
180
+
64
-
65
- width :100%; text-align:center;
181
+
66
-
67
- position: absolute;
182
+
68
-
69
- top: 11248px; /*ブラウザのウィンドウ基準*/
183
+
70
-
71
- left: -16px; /*ブラウザのウィンドウ基準*/
72
-
73
- background: #fff;
74
-
75
- font-weight: bold;
76
-
77
- padding: 1em;
78
-
79
- margin: 0 auto;
80
-
81
- text-align: center;
82
-
83
- border-radius: 6px;
84
-
85
- }
86
-
87
- .box-small {
88
-
89
- display: inline-block;
90
-
91
- width: auto;
92
-
93
- }
94
-
95
- .some-content {
96
-
97
- padding: 12em 0;
98
-
99
- margin: 4em 0;
100
-
101
- }
102
-
103
-
104
-
105
-
106
-
107
-
108
-
109
-
110
-
111
-
112
-
113
- ```javascript
114
-
115
-
116
-
117
-
118
-
119
- <script src="test/js/scrollreveal.js"></script>
120
-
121
- <script>
122
-
123
- window.sr = ScrollReveal({ reset: true });
124
-
125
-
126
-
127
- // Distance
128
-
129
- sr.reveal('.distanceHundred', { distance: "500px", origin: "left" });
130
-
131
- // Distance
132
-
133
- sr.reveal('.distanceHundred2', { distance: "500px", origin: "left", delay: "100"})
134
-
135
- // Distance
136
-
137
- sr.reveal('.distanceHundred3', { distance: "500px", origin: "left", delay: "200"})
138
-
139
- // Distance
140
-
141
- sr.reveal('.distanceHundred4', { distance: "500px", origin: "left", delay: "300"})
142
-
143
- // Distance
144
-
145
- sr.reveal('.distanceHundred5', { distance: "500px", origin: "left", delay: "400"})
146
-
147
- // Distance
148
-
149
- sr.reveal('.distanceHundred6', { distance: "500px", origin: "left", delay: "460"})
150
-
151
- // Distance
152
-
153
- sr.reveal('.distanceHundred7', { distance: "500px", origin: "left", delay: "600"})
154
-
155
- // Distance
156
-
157
- sr.reveal('.distanceHundred8', { distance: "500px", origin: "left", delay: "710"})
158
-
159
- // Distance
160
-
161
- sr.reveal('.distanceHundred9', { distance: "500px", origin: "left", delay: "750"})
162
-
163
- // Origin
164
-
165
- sr.reveal('.default');
166
-
167
- // Origin
168
-
169
- sr.reveal('.default2');
170
-
171
- // Delay
172
-
173
- sr.reveal('.delayOne', { delay: "500" });
174
-
175
- // Delay
176
-
177
- sr.reveal('.delayThree', { delay: "3000" });
178
-
179
- </script>
180
-
181
-
182
-
183
-
184
-
185
-
186
-
187
- <div class="box12 delayOne">
188
-
189
- <img class="sha2" src="1476268_s_wi/voice.png">
190
-
191
- </div>
192
184
 
193
185
 
194
186