回答編集履歴
3
説明追記
answer
CHANGED
|
@@ -31,4 +31,6 @@
|
|
|
31
31
|
duration: 3000,
|
|
32
32
|
iterations: Infinity
|
|
33
33
|
})
|
|
34
|
-
```
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
ブラウザの幅を変えて高さが変化したときにも対応させる場合は、リサイズイベントからも呼び出すようにします。
|
2
コード追記
answer
CHANGED
|
@@ -16,4 +16,19 @@
|
|
|
16
16
|
transform: translatey(0);
|
|
17
17
|
}
|
|
18
18
|
}
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
---
|
|
22
|
+
|
|
23
|
+
ページの高さということらしいので、js の animateメソッドで。
|
|
24
|
+
|
|
25
|
+
```js
|
|
26
|
+
const el = document.querySelector('.title')
|
|
27
|
+
const h = document.documentElement.scrollHeight;
|
|
28
|
+
el.animate({
|
|
29
|
+
transform: ['translatey(' + h + 'px)', 'translatey(0px)']
|
|
30
|
+
}, {
|
|
31
|
+
duration: 3000,
|
|
32
|
+
iterations: Infinity
|
|
33
|
+
})
|
|
19
34
|
```
|
1
コード修正
answer
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
```css
|
|
5
5
|
/* CSSアニメーションの指定 */
|
|
6
6
|
.title{
|
|
7
|
-
animation: SlideIn 1.6s
|
|
7
|
+
animation: SlideIn 1.6s;
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
/* CSSアニメーションの設定 */
|