質問編集履歴
7
問題の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,11 +16,6 @@
|
|
|
16
16
|
スライドインと同じタイミングでスライドイン
|
|
17
17
|
また、フェードインしない場合がある。
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
|
|
21
|
-
itemListInnerをoverflow:hiddenすることで、解消されたが
|
|
22
|
-
そうすると、画像のはみ出ている部分が消えてしまうため別の案を考えたいです。
|
|
23
|
-
|
|
24
19
|
### 該当のソースコード
|
|
25
20
|
|
|
26
21
|
```HTML
|
6
CSS 文法の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
opacity: 0;
|
|
138
138
|
transition: 1s;
|
|
139
139
|
}
|
|
140
|
-
#home-itemList .itemList-01 .itemListInner .itemBox .itemImage
|
|
140
|
+
#home-itemList .itemList-01 .itemListInner .itemBox .itemImage.active {
|
|
141
141
|
opacity: 1;
|
|
142
142
|
}
|
|
143
143
|
#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
|
5
文法の修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -36,6 +36,28 @@
|
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
38
|
</section>
|
|
39
|
+
<section class="itemList-02">
|
|
40
|
+
<div class="itemListInner">
|
|
41
|
+
<div class="itemBox">
|
|
42
|
+
<figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
|
|
43
|
+
<div class="itemnameBox">
|
|
44
|
+
<h2 class="category">タイトル2</h2>
|
|
45
|
+
<p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
|
|
46
|
+
</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
</section>
|
|
50
|
+
<section class="itemList-03">
|
|
51
|
+
<div class="itemListInner">
|
|
52
|
+
<div class="itemBox">
|
|
53
|
+
<figure class="itemImage"><img src="https://placehold.jp/520x660.png"></figure>
|
|
54
|
+
<div class="itemnameBox">
|
|
55
|
+
<h2 class="category">タイトル3</h2>
|
|
56
|
+
<p>後ろで大きな爆発音がした。俺は驚いて振り返った。</p>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</section>
|
|
39
61
|
</section>
|
|
40
62
|
```
|
|
41
63
|
|
|
@@ -112,7 +134,12 @@
|
|
|
112
134
|
position: relative;
|
|
113
135
|
overflow: hidden;
|
|
114
136
|
top: -100px;
|
|
137
|
+
opacity: 0;
|
|
138
|
+
transition: 1s;
|
|
115
139
|
}
|
|
140
|
+
#home-itemList .itemList-01 .itemListInner .itemBox .itemImage .active {
|
|
141
|
+
opacity: 1;
|
|
142
|
+
}
|
|
116
143
|
#home-itemList .itemList-01 .itemListInner .itemBox .itemnameBox {
|
|
117
144
|
height: 480px;
|
|
118
145
|
display: flex;
|
|
@@ -137,9 +164,12 @@
|
|
|
137
164
|
font-size: 1.6rem;
|
|
138
165
|
line-height: 1.9;
|
|
139
166
|
}
|
|
167
|
+
|
|
140
168
|
```
|
|
141
169
|
|
|
142
170
|
```JavaScript
|
|
171
|
+
$(function() {
|
|
172
|
+
|
|
143
173
|
$('.itemListInner').on('inview', function() {
|
|
144
174
|
var elem = $('.itemListInner');
|
|
145
175
|
|
|
@@ -155,4 +185,12 @@
|
|
|
155
185
|
}
|
|
156
186
|
});
|
|
157
187
|
});
|
|
188
|
+
|
|
189
|
+
$('.itemListInner').on('animationend', (e) => {
|
|
190
|
+
if (e.originalEvent.animationName === 'maskOut') {
|
|
191
|
+
$('.itemImage', this).addClass('active');
|
|
192
|
+
};
|
|
193
|
+
});
|
|
194
|
+
|
|
195
|
+
});
|
|
158
196
|
```
|
4
問題の図の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -16,6 +16,7 @@
|
|
|
16
16
|
スライドインと同じタイミングでスライドイン
|
|
17
17
|
また、フェードインしない場合がある。
|
|
18
18
|
|
|
19
|
+
|
|
19
20
|
レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
|
|
20
21
|
itemListInnerをoverflow:hiddenすることで、解消されたが
|
|
21
22
|
そうすると、画像のはみ出ている部分が消えてしまうため別の案を考えたいです。
|
3
誤字の修正、参考ページの追加
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
スライドインした後にマスクがスライドイン、その
|
|
1
|
+
スライドインした後にマスクがスライドイン、その後画像がフェードインするアニメーションをつくりたい
|
body
CHANGED
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
画像を上からフェードインさせたいです。
|
|
8
8
|
ご教授いただければ幸いです。
|
|
9
9
|
|
|
10
|
+
参考ページ
|
|
11
|
+
[https://into-the-program.com/slidein/](https://into-the-program.com/slidein/)
|
|
10
12
|
|
|
11
13
|
### 発生している問題・エラーメッセージ
|
|
12
14
|
|
2
問題の追記
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,6 +14,10 @@
|
|
|
14
14
|
スライドインと同じタイミングでスライドイン
|
|
15
15
|
また、フェードインしない場合がある。
|
|
16
16
|
|
|
17
|
+
レスポンシブの場合、スライドアウトしたときにマスクが画面からはみ出て表示されてしまう。
|
|
18
|
+
itemListInnerをoverflow:hiddenすることで、解消されたが
|
|
19
|
+
そうすると、画像のはみ出ている部分が消えてしまうため別の案を考えたいです。
|
|
20
|
+
|
|
17
21
|
### 該当のソースコード
|
|
18
22
|
|
|
19
23
|
```HTML
|
1
発生している問題の追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -10,9 +10,9 @@
|
|
|
10
10
|
|
|
11
11
|
### 発生している問題・エラーメッセージ
|
|
12
12
|
|
|
13
|
+
Scrollreveal.jsを使い、上からフェードインするアニメーションを追加してみたところ
|
|
13
|
-
|
|
14
|
+
スライドインと同じタイミングでスライドイン
|
|
14
|
-
|
|
15
|
+
また、フェードインしない場合がある。
|
|
15
|
-
```
|
|
16
16
|
|
|
17
17
|
### 該当のソースコード
|
|
18
18
|
|
|
@@ -148,7 +148,4 @@
|
|
|
148
148
|
}
|
|
149
149
|
});
|
|
150
150
|
});
|
|
151
|
-
```
|
|
151
|
+
```
|
|
152
|
-
### 試したこと
|
|
153
|
-
|
|
154
|
-
ここに問題に対して試したことを記載してください。
|