teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問スライドインした後にマスクがスライドイン、その後画像がフェードインするアニメーションをつくりたい

編集履歴

質問編集履歴

7

問題の修正

2021/02/23 05:25

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -34,16 +34,6 @@
34
34
 
35
35
 
36
36
 
37
- ![レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。](e95a50e19d5306bf3e04620f7e5e294b.jpeg)
38
-
39
- レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
40
-
41
- itemListInnerをoverflow:hiddenすることで、解消されたが
42
-
43
- そうすると、画像のはみ出ている部分が消えてしまうため別の案を考えたいです。
44
-
45
-
46
-
47
37
  ### 該当のソースコード
48
38
 
49
39
 

6

CSS 文法の修正

2021/02/23 05:25

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -276,7 +276,7 @@
276
276
 
277
277
  }
278
278
 
279
- #home-itemList .itemList-01 .itemListInner .itemBox .itemImage .active {
279
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemImage.active {
280
280
 
281
281
  opacity: 1;
282
282
 

5

文法の修正

2021/02/23 04:02

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -74,6 +74,50 @@
74
74
 
75
75
  </section>
76
76
 
77
+ <section class="itemList-02">
78
+
79
+ <div class="itemListInner">
80
+
81
+ <div class="itemBox">
82
+
83
+ <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
84
+
85
+ <div class="itemnameBox">
86
+
87
+ <h2 class="category">タイトル2</h2>
88
+
89
+ <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
90
+
91
+ </div>
92
+
93
+ </div>
94
+
95
+ </div>
96
+
97
+ </section>
98
+
99
+ <section class="itemList-03">
100
+
101
+ <div class="itemListInner">
102
+
103
+ <div class="itemBox">
104
+
105
+ <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
106
+
107
+ <div class="itemnameBox">
108
+
109
+ <h2 class="category">タイトル3</h2>
110
+
111
+ <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
112
+
113
+ </div>
114
+
115
+ </div>
116
+
117
+ </div>
118
+
119
+ </section>
120
+
77
121
  </section>
78
122
 
79
123
  ```
@@ -226,6 +270,16 @@
226
270
 
227
271
  top: -100px;
228
272
 
273
+ opacity: 0;
274
+
275
+ transition: 1s;
276
+
277
+ }
278
+
279
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemImage .active {
280
+
281
+ opacity: 1;
282
+
229
283
  }
230
284
 
231
285
  #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
@@ -276,12 +330,18 @@
276
330
 
277
331
  }
278
332
 
333
+
334
+
279
335
  ```
280
336
 
281
337
 
282
338
 
283
339
  ```JavaScript
284
340
 
341
+ $(function() {
342
+
343
+
344
+
285
345
  $('.itemListInner').on('inview', function() {
286
346
 
287
347
  var elem = $('.itemListInner');
@@ -312,4 +372,20 @@
312
372
 
313
373
  });
314
374
 
375
+
376
+
377
+ $('.itemListInner').on('animationend', (e) => {
378
+
379
+ if (e.originalEvent.animationName === 'maskOut') {
380
+
381
+ $('.itemImage', this).addClass('active');
382
+
383
+ };
384
+
385
+ });
386
+
387
+
388
+
389
+ });
390
+
315
391
  ```

4

問題の図の追加

2021/02/22 08:37

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -34,6 +34,8 @@
34
34
 
35
35
 
36
36
 
37
+ ![レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。](e95a50e19d5306bf3e04620f7e5e294b.jpeg)
38
+
37
39
  レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
38
40
 
39
41
  itemListInnerをoverflow:hiddenすることで、解消されたが

3

誤字の修正、参考ページの追加

2021/02/22 07:03

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
@@ -1 +1 @@
1
- スライドインした後にマスクがスライドイン、その保画像がフェードインするアニメーションをつくりたい
1
+ スライドインした後にマスクがスライドイン、その後画像がフェードインするアニメーションをつくりたい
test CHANGED
@@ -16,6 +16,10 @@
16
16
 
17
17
 
18
18
 
19
+ 参考ページ
20
+
21
+ [https://into-the-program.com/slidein/](https://into-the-program.com/slidein/)
22
+
19
23
 
20
24
 
21
25
  ### 発生している問題・エラーメッセージ

2

問題の追記

2021/02/22 01:17

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -30,6 +30,14 @@
30
30
 
31
31
 
32
32
 
33
+ レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
34
+
35
+ itemListInnerをoverflow:hiddenすることで、解消されたが
36
+
37
+ そうすると、画像のはみ出ている部分が消えてしまうため別の案を考えたいです。
38
+
39
+
40
+
33
41
  ### 該当のソースコード
34
42
 
35
43
 

1

発生している問題の追加

2021/02/22 01:02

投稿

onakapecomaru
onakapecomaru

スコア10

test CHANGED
File without changes
test CHANGED
@@ -22,286 +22,280 @@
22
22
 
23
23
 
24
24
 
25
+ Scrollreveal.jsを使い、上からフェードインするアニメーションを追加してみたところ
26
+
27
+ スライドインと同じタイミングでスライドイン
28
+
29
+ また、フェードインしない場合がある。
30
+
31
+
32
+
33
+ ### 該当のソースコード
34
+
35
+
36
+
37
+ ```HTML
38
+
39
+ <section id="home-itemList">
40
+
41
+ <section class="itemList-01">
42
+
43
+ <div class="itemListInner">
44
+
45
+ <div class="itemBox">
46
+
47
+ <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
48
+
49
+ <div class="itemnameBox">
50
+
51
+ <h2 class="category">タイトル1</h2>
52
+
53
+ <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
54
+
55
+ </div>
56
+
57
+ </div>
58
+
59
+ </div>
60
+
61
+ </section>
62
+
63
+ </section>
64
+
25
65
  ```
26
66
 
67
+
68
+
69
+ ```CSS
70
+
71
+ @charset "UTF-8";
72
+
73
+
74
+
75
+ //itemListInnerをスライドインする
76
+
77
+ @keyframes play {
78
+
79
+ from {
80
+
81
+ transform: translateX(-100%);
82
+
83
+ }
84
+
85
+ to {
86
+
87
+ transform: translateX(0);
88
+
89
+ }
90
+
91
+ }
92
+
93
+
94
+
95
+
96
+
97
+ //マスク要素をスライドアウト
98
+
99
+ @keyframes maskOut {
100
+
101
+ from {
102
+
103
+ transform: translateX(0);
104
+
105
+ }
106
+
107
+ to {
108
+
109
+ transform: translateX(100%);
110
+
111
+ }
112
+
113
+ }
114
+
115
+ .isPlay {
116
+
117
+ animation-name: play;
118
+
119
+ animation-duration: 0.5s;
120
+
121
+ animation-fill-mode: forwards;
122
+
123
+ animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
124
+
125
+ position: relative;
126
+
127
+ opacity: 1 !important;
128
+
129
+ }
130
+
131
+
132
+
133
+ .isPlay:before {
134
+
135
+ animation-name: maskOut;
136
+
137
+ animation-duration: 0.5s;
138
+
139
+ animation-delay: 0.5s;
140
+
141
+ animation-fill-mode: forwards;
142
+
143
+ animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
144
+
145
+ content: "";
146
+
147
+ position: absolute;
148
+
149
+ top: 0;
150
+
27
- エラーメッセージ
151
+ left: 0;
152
+
153
+ z-index: 1;
154
+
155
+ width: 100%;
156
+
157
+ height: 100%;
158
+
159
+ background-image: linear-gradient(109.6deg, #f5e7d6 11.2%, #ffdca2 91.1%);
160
+
161
+ }
162
+
163
+
164
+
165
+
166
+
167
+ #home-itemList {
168
+
169
+ width: 100%;
170
+
171
+ height: auto;
172
+
173
+ }
174
+
175
+ #home-itemList .itemList-01 {
176
+
177
+ width: 100%;
178
+
179
+ height: 480px;
180
+
181
+ margin-bottom: 10%;
182
+
183
+ }
184
+
185
+ #home-itemList .itemList-01 .itemListInner {
186
+
187
+ width: inherit;
188
+
189
+ height: inherit;
190
+
191
+ background: #F5E7D6;
192
+
193
+ opacity: 0;
194
+
195
+ }
196
+
197
+ #home-itemList .itemList-01 .itemListInner .itemBox {
198
+
199
+ width: 100%;
200
+
201
+ display: flex;
202
+
203
+ justify-content: center;
204
+
205
+ }
206
+
207
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemImage {
208
+
209
+ position: relative;
210
+
211
+ overflow: hidden;
212
+
213
+ top: -100px;
214
+
215
+ }
216
+
217
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
218
+
219
+ height: 480px;
220
+
221
+ display: flex;
222
+
223
+ flex-direction: column;
224
+
225
+ justify-content: center;
226
+
227
+ align-items: flex-start;
228
+
229
+ }
230
+
231
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category {
232
+
233
+ font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
234
+
235
+ color: #515151;
236
+
237
+ font-size: 4rem;
238
+
239
+ text-align: left;
240
+
241
+ margin: 0;
242
+
243
+ opacity: 0;
244
+
245
+ }
246
+
247
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category span {
248
+
249
+ opacity: 0;
250
+
251
+ }
252
+
253
+ #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox p {
254
+
255
+ font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
256
+
257
+ color: #515151;
258
+
259
+ font-size: 1.6rem;
260
+
261
+ line-height: 1.9;
262
+
263
+ }
28
264
 
29
265
  ```
30
266
 
31
267
 
32
268
 
33
- ### 該当のソースコード
269
+ ```JavaScript
34
-
35
-
36
-
37
- ```HTML
270
+
38
-
39
- <section id="home-itemList">
40
-
41
- <section class="itemList-01">
271
+ $('.itemListInner').on('inview', function() {
42
-
272
+
43
- <div class="itemListInner">
273
+ var elem = $('.itemListInner');
44
-
45
- <div class="itemBox">
274
+
46
-
47
- <figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
275
+
48
-
49
- <div class="itemnameBox">
276
+
50
-
51
- <h2 class="category">タイトル1</h2>
52
-
53
- <p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
54
-
55
- </div>
56
-
57
- </div>
58
-
59
- </div>
60
-
61
- </section>
277
+ elem.each(function() {
62
-
278
+
279
+
280
+
63
- </section>
281
+ var isPlay = 'isPlay';
282
+
283
+ var elemOffset = $(this).offset().top;
284
+
285
+ var scrollPos = $(window).scrollTop();
286
+
287
+ var wh = $(window).height();
288
+
289
+
290
+
291
+ if (scrollPos > elemOffset - wh + (wh / 4)) {
292
+
293
+ $(this).addClass(isPlay);
294
+
295
+ }
296
+
297
+ });
298
+
299
+ });
64
300
 
65
301
  ```
66
-
67
-
68
-
69
- ```CSS
70
-
71
- @charset "UTF-8";
72
-
73
-
74
-
75
- //itemListInnerをスライドインする
76
-
77
- @keyframes play {
78
-
79
- from {
80
-
81
- transform: translateX(-100%);
82
-
83
- }
84
-
85
- to {
86
-
87
- transform: translateX(0);
88
-
89
- }
90
-
91
- }
92
-
93
-
94
-
95
-
96
-
97
- //マスク要素をスライドアウト
98
-
99
- @keyframes maskOut {
100
-
101
- from {
102
-
103
- transform: translateX(0);
104
-
105
- }
106
-
107
- to {
108
-
109
- transform: translateX(100%);
110
-
111
- }
112
-
113
- }
114
-
115
- .isPlay {
116
-
117
- animation-name: play;
118
-
119
- animation-duration: 0.5s;
120
-
121
- animation-fill-mode: forwards;
122
-
123
- animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
124
-
125
- position: relative;
126
-
127
- opacity: 1 !important;
128
-
129
- }
130
-
131
-
132
-
133
- .isPlay:before {
134
-
135
- animation-name: maskOut;
136
-
137
- animation-duration: 0.5s;
138
-
139
- animation-delay: 0.5s;
140
-
141
- animation-fill-mode: forwards;
142
-
143
- animation-timing-function: cubic-bezier(0.8, 0, 0.5, 1);
144
-
145
- content: "";
146
-
147
- position: absolute;
148
-
149
- top: 0;
150
-
151
- left: 0;
152
-
153
- z-index: 1;
154
-
155
- width: 100%;
156
-
157
- height: 100%;
158
-
159
- background-image: linear-gradient(109.6deg, #f5e7d6 11.2%, #ffdca2 91.1%);
160
-
161
- }
162
-
163
-
164
-
165
-
166
-
167
- #home-itemList {
168
-
169
- width: 100%;
170
-
171
- height: auto;
172
-
173
- }
174
-
175
- #home-itemList .itemList-01 {
176
-
177
- width: 100%;
178
-
179
- height: 480px;
180
-
181
- margin-bottom: 10%;
182
-
183
- }
184
-
185
- #home-itemList .itemList-01 .itemListInner {
186
-
187
- width: inherit;
188
-
189
- height: inherit;
190
-
191
- background: #F5E7D6;
192
-
193
- opacity: 0;
194
-
195
- }
196
-
197
- #home-itemList .itemList-01 .itemListInner .itemBox {
198
-
199
- width: 100%;
200
-
201
- display: flex;
202
-
203
- justify-content: center;
204
-
205
- }
206
-
207
- #home-itemList .itemList-01 .itemListInner .itemBox .itemImage {
208
-
209
- position: relative;
210
-
211
- overflow: hidden;
212
-
213
- top: -100px;
214
-
215
- }
216
-
217
- #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
218
-
219
- height: 480px;
220
-
221
- display: flex;
222
-
223
- flex-direction: column;
224
-
225
- justify-content: center;
226
-
227
- align-items: flex-start;
228
-
229
- }
230
-
231
- #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category {
232
-
233
- font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
234
-
235
- color: #515151;
236
-
237
- font-size: 4rem;
238
-
239
- text-align: left;
240
-
241
- margin: 0;
242
-
243
- opacity: 0;
244
-
245
- }
246
-
247
- #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox .category span {
248
-
249
- opacity: 0;
250
-
251
- }
252
-
253
- #home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox p {
254
-
255
- font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho Pro", serif;
256
-
257
- color: #515151;
258
-
259
- font-size: 1.6rem;
260
-
261
- line-height: 1.9;
262
-
263
- }
264
-
265
- ```
266
-
267
-
268
-
269
- ```JavaScript
270
-
271
- $('.itemListInner').on('inview', function() {
272
-
273
- var elem = $('.itemListInner');
274
-
275
-
276
-
277
- elem.each(function() {
278
-
279
-
280
-
281
- var isPlay = 'isPlay';
282
-
283
- var elemOffset = $(this).offset().top;
284
-
285
- var scrollPos = $(window).scrollTop();
286
-
287
- var wh = $(window).height();
288
-
289
-
290
-
291
- if (scrollPos > elemOffset - wh + (wh / 4)) {
292
-
293
- $(this).addClass(isPlay);
294
-
295
- }
296
-
297
- });
298
-
299
- });
300
-
301
- ```
302
-
303
- ### 試したこと
304
-
305
-
306
-
307
- ここに問題に対して試したことを記載してください。