анимация с использованием таймингом видео в HTML 5, CSS 3, JS

Question

есть некоторое видео, без разницы какое, мне нужна анимация, что бы при скролинге страницы покадрово шло видео. Образно 100px проскролил 10 кадров проигралось. Есть такой пример на сайте sonos.com.

на вот этом моменте. Это именно видео. Заранее спасибо за помощь.

Answer 1

const playbackConst = 500;
const height = document.getElementById("height");
const video = document.getElementById('video');

video.addEventListener('loadedmetadata', () => {
  height.style.height = Math.floor(video.duration) * playbackConst + "px";
});

function scroll() {
  const frameNumber = window.pageYOffset / playbackConst;
  video.currentTime = frameNumber;
  window.requestAnimationFrame(scroll);
}

window.requestAnimationFrame(scroll);

#video {
  position: fixed;
  width: 200px;
}

<video id="video" autoplay="" playsinline="" muted="" preload="auto">
  <source src="https://assets.sonos.com/im/default/images/products/roam/roam-exploded-view-black.mp4" type="video/mp4">
</video>
<div id="height"></div>

БЛОГ НА HUSL

анимация с использованием таймингом видео в HTML 5, CSS 3, JS

Ответы (1 шт):