Korbs revised this gist 11 months ago. Go to revision
3 files changed, 70 insertions
index.html(file created)
| @@ -0,0 +1,5 @@ | |||
| 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(file created)
| @@ -0,0 +1,53 @@ | |||
| 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) | |
style.css(file created)
| @@ -0,0 +1,12 @@ | |||
| 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 | + | } | |
Newer
Older