index.html
· 146 B · HTML
Raw
<div class="video-container">
<canvas id="ambient-canvas-1"/>
<canvas id="ambient-canvas-2"/>
<video src="./video.mp4"></video>
</div>
| 1 | <div class="video-container"> |
| 2 | <canvas id="ambient-canvas-1"/> |
| 3 | <canvas id="ambient-canvas-2"/> |
| 4 | <video src="./video.mp4"></video> |
| 5 | </div> |
script.js
· 1.6 KiB · JavaScript
Raw
var Player = document.querySelector('#ambient-player')
var FirstCanvas = document.getElementById("ambient-canvas-1")
var SecondCanvas = document.getElementById("ambient-canvas-2")
var FirstCtx = FirstCanvas.getContext("2d")
var SecondCtx = SecondCanvas.getContext("2d")
const FrameInterval = 1600
const CanvasOpacity = "0.4"
let IntervalId
let FirstFrame = true
const Draw = () => {
if (FirstFrame) {
FirstCtx.drawImage(Player, 0, 0, FirstCanvas.width, FirstCanvas.height)
ToFirstCanvas()
} else {
SecondCtx.drawImage(Player, 0, 0, SecondCanvas.width, SecondCanvas.height)
ToSecondCanvas()
}
FirstFrame = !FirstFrame
}
const ToFirstCanvas = () => {
FirstCanvas.style.opacity = CanvasOpacity
SecondCanvas.style.opacity = "0"
}
const ToSecondCanvas = () => {
SecondCanvas.style.opacity = CanvasOpacity
FirstCanvas.style.opacity = "0"
}
const StartDrawing = () => {IntervalId = window.setInterval(Draw, FrameInterval)}
const PauseDrawing = () => {if (IntervalId) window.clearInterval(IntervalId)}
const init = () => {
Player.pause()
Player.play()
Player.addEventListener("play", StartDrawing, false)
Player.addEventListener("pause", PauseDrawing, false)
Player.addEventListener("ended", PauseDrawing, false)
FirstCanvas.style.transition = SecondCanvas.style.transition = `opacity ${FrameInterval}ms`
}
const cleanup = () => {
Player.removeEventListener("play", StartDrawing)
Player.removeEventListener("pause", PauseDrawing)
Player.removeEventListener("ended", PauseDrawing)
PauseDrawing()
}
window.addEventListener("load", init)
window.addEventListener("unload", cleanup)
| 1 | var Player = document.querySelector('#ambient-player') |
| 2 | var FirstCanvas = document.getElementById("ambient-canvas-1") |
| 3 | var SecondCanvas = document.getElementById("ambient-canvas-2") |
| 4 | var FirstCtx = FirstCanvas.getContext("2d") |
| 5 | var SecondCtx = SecondCanvas.getContext("2d") |
| 6 | |
| 7 | const FrameInterval = 1600 |
| 8 | const CanvasOpacity = "0.4" |
| 9 | |
| 10 | let IntervalId |
| 11 | let FirstFrame = true |
| 12 | const Draw = () => { |
| 13 | if (FirstFrame) { |
| 14 | FirstCtx.drawImage(Player, 0, 0, FirstCanvas.width, FirstCanvas.height) |
| 15 | ToFirstCanvas() |
| 16 | } else { |
| 17 | SecondCtx.drawImage(Player, 0, 0, SecondCanvas.width, SecondCanvas.height) |
| 18 | ToSecondCanvas() |
| 19 | } |
| 20 | FirstFrame = !FirstFrame |
| 21 | } |
| 22 | |
| 23 | const ToFirstCanvas = () => { |
| 24 | FirstCanvas.style.opacity = CanvasOpacity |
| 25 | SecondCanvas.style.opacity = "0" |
| 26 | } |
| 27 | |
| 28 | const ToSecondCanvas = () => { |
| 29 | SecondCanvas.style.opacity = CanvasOpacity |
| 30 | FirstCanvas.style.opacity = "0" |
| 31 | } |
| 32 | |
| 33 | const StartDrawing = () => {IntervalId = window.setInterval(Draw, FrameInterval)} |
| 34 | const PauseDrawing = () => {if (IntervalId) window.clearInterval(IntervalId)} |
| 35 | |
| 36 | const init = () => { |
| 37 | Player.pause() |
| 38 | Player.play() |
| 39 | Player.addEventListener("play", StartDrawing, false) |
| 40 | Player.addEventListener("pause", PauseDrawing, false) |
| 41 | Player.addEventListener("ended", PauseDrawing, false) |
| 42 | FirstCanvas.style.transition = SecondCanvas.style.transition = `opacity ${FrameInterval}ms` |
| 43 | } |
| 44 | |
| 45 | const cleanup = () => { |
| 46 | Player.removeEventListener("play", StartDrawing) |
| 47 | Player.removeEventListener("pause", PauseDrawing) |
| 48 | Player.removeEventListener("ended", PauseDrawing) |
| 49 | PauseDrawing() |
| 50 | } |
| 51 | |
| 52 | window.addEventListener("load", init) |
| 53 | window.addEventListener("unload", cleanup) |
| 1 | .video-container { |
| 2 | position: relative; |
| 3 | } |
| 4 | .video-container canvas { |
| 5 | top: 0px; |
| 6 | left: 0px; |
| 7 | width: 100%; |
| 8 | height: 100%; |
| 9 | object-fit: cover; |
| 10 | z-index: -1; |
| 11 | transition: 0.6s filter; |
| 12 | } |