質問編集履歴
2
タイトル編集
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
スナップスクロール内
|
|
1
|
+
スナップスクロール内でフェードインを実行したさいに、下からスクロールした時にもフェードインできるようにさせたいです。
|
body
CHANGED
|
File without changes
|
1
コードの追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
```html
|
|
9
9
|
<main class="container">
|
|
10
10
|
<section class="scroll-snap"> </section>
|
|
11
|
-
<section class="scroll-snap">
|
|
11
|
+
<section class="scroll-snap position">
|
|
12
12
|
<div class="text"> //この部分をフェードイン
|
|
13
13
|
<p>テキスト</p>
|
|
14
14
|
</div>
|
|
@@ -27,6 +27,19 @@
|
|
|
27
27
|
height: 100%;
|
|
28
28
|
scroll-snap-align: start;
|
|
29
29
|
}
|
|
30
|
+
|
|
31
|
+
.position{
|
|
32
|
+
position:relative;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.text{
|
|
36
|
+
position: absolute;
|
|
37
|
+
top: 50%;
|
|
38
|
+
left: 50%;
|
|
39
|
+
transform: translate(-50%, -50%);
|
|
40
|
+
width:200px;
|
|
41
|
+
height:200px;
|
|
42
|
+
}
|
|
30
43
|
```
|
|
31
44
|
```js
|
|
32
45
|
$(".container").scroll(function () {
|