как управлять видео по продолжительности, чтобы создать анимацию при прокрутке - PullRequest
Новая
       17

как управлять видео по продолжительности, чтобы создать анимацию при прокрутке

0 голосов
/ 28 мая 2020

Я работаю над проектом, который включает видео-анимацию, как на этом сайте Apple . Мне понравилось, как ноутбук открывается и закрывается при прокрутке вверх и вниз по этому сайту.

Я попробовал и сделал своего рода рабочую демонстрацию, но не так, как ожидалось.

во время анимации анимация не плавная, как должна быть.

Я хочу знать почему это не анимируется плавно, как сайт Apple.

можно ли делать подобную анимацию с точки зрения производительности?

вот демонстрация 

const video = document.querySelector('video');
const videoWrapper = document.querySelector('.video__wrapper');
let duration;
video.onloadedmetadata = function () {
    duration = video.duration * 60;
}


function handleVideo() {
    const y = window.scrollY;
    const a = y > 800;
    const scrollPercentage = y / 8000 * 100;
    video.currentTime = duration * scrollPercentage / 100;

    a ?
        videoWrapper.classList.add('relative') :
        videoWrapper.classList.remove('relative');
}

window.addEventListener('scroll', handleVideo)
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f9f9f9;
  overflow-x: hidden;
}

.content {
  width: 1000px;
  height: 4000px;
  padding: 80px;
  margin: 0 auto 900px;
}

.content .video__wrapper {
  padding-top: 400px;
  width: 50%;
  position: fixed;
  bottom: 30px;
  transition: 5s;
}

.content .relative {
  position: relative;
}

.content video {
  width: 100%;
}
<main class="content">
    <div class="video__wrapper">
        <video id="myvideo">
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
            <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg"></source>
            Your browser does not support HTML5 video.
        </video>
        <!--        <video src="video/demo.mp4"></video>-->
    </div>
</main>
...