Пародия смены изображения как на лендинге iPhone X

Давайте рассмотрим как возможно реализовать проигрывание кадров видео при скроллинге страницы, как это было реализовано на лендинге IPhone X. По правде там не смена кадров видео и вообще не видео, а канвас, но мы же создаем пародию, так что простительно.

Все это мы будем делать на Vue, хотя данный пример не сильно будет отличаться в реализациии, если его делать на чистом js. Приступим.

Сначала создаем разметку с видео и ставим его на автозагрузку. В качестве теста я выбрал видео с моим коллегой, не судите строго :)

Класс js-video мы используем для обращения к этому объекту из js. Он не содержит в себе стилей и требуется лишь для выборки объектов. Так удобней для понимания — класс зависим от js, а если его убрать, то стили не сломаются.

В скриптах мы должны отлавливать событие wheel и в нем запускать нашу функцию смены кадров. В объекте с видео есть параметр currentTime, через который мы будем устанавливать активное время видео (перемотка). Т.к. видео грузится сразу при открытии страницы, мы сможем просто бегать по кадрам видео при прокрутке (не могу назвать это скролингом, это же не событие scroll)

Нам потребуются следующие параметры. Они все прокомментированы и в пояснении не нуждаются.

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

В иницилизаторе мы находим нужный объект и сохраняем его в переменную this.video, а так же создаем слушатель события wheel, в котором вызываем метод переключения кадров с передачей в него deltaY (длину/силу прокручивания). В методе videoStep мы проверяем ограничения выхода за рамки и определяем направление перемотки видео. После чего присваиваем видео активное время просмотра.

Данный пример является наглядным пособием и для использования в «боевых проектах» нужно много дорабатывать. Возможно было бы правильно не привязываться к поведению браузерного скролинга и вынести это все в отдельный цикл, который сам определяет время пролистывания видео. Так же есть множество заминок при работе с тачпадом и мышью.

Весь пример кода