回答編集履歴
1
コード追加
test
CHANGED
|
@@ -2,3 +2,37 @@
|
|
|
2
2
|
|
|
3
3
|
CSSアニメーションは諦めて、[`timeupdate`イベント](https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/timeupdate_event)を使って動画の経過時間に従ってJavaScriptでスタイルを変更するのがよいでしょう。
|
|
4
4
|
|
|
5
|
+
----
|
|
6
|
+
追記: `timeupdate` を使った具体的なコードです。
|
|
7
|
+
```js
|
|
8
|
+
const h1 = document.querySelector('h1');
|
|
9
|
+
document.querySelector('.mvvideo video').addEventListener('timeupdate', e => {
|
|
10
|
+
const percent = 100 * e.target.currentTime / e.target.duration;
|
|
11
|
+
if (percent <= 10) {
|
|
12
|
+
h1.style.opacity = 1 - percent / 10;
|
|
13
|
+
} else if (percent >= 90) {
|
|
14
|
+
h1.style.opacity = (percent - 90) / 10;
|
|
15
|
+
} else {
|
|
16
|
+
h1.style.opacity = 0;
|
|
17
|
+
}
|
|
18
|
+
});
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
実際に動かしてみるとイベントがあまり頻繁に発生しないみたいで、アニメーション用途には向かない感じでした。`requestAnimationFrame()` の方がよさそうです。
|
|
22
|
+
```js
|
|
23
|
+
function handleFrame() {
|
|
24
|
+
requestAnimationFrame(handleFrame);
|
|
25
|
+
const h1 = document.querySelector('h1');
|
|
26
|
+
const video = document.querySelector('.mvvideo video');
|
|
27
|
+
const percent = 100 * video.currentTime / video.duration;
|
|
28
|
+
if (percent <= 10) {
|
|
29
|
+
h1.style.opacity = 1 - percent / 10;
|
|
30
|
+
} else if (percent >= 90) {
|
|
31
|
+
h1.style.opacity = (percent - 90) / 10;
|
|
32
|
+
} else {
|
|
33
|
+
h1.style.opacity = 0;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
requestAnimationFrame(handleFrame);
|
|
37
|
+
```
|
|
38
|
+
|