прокрутка от фиксированной ширины до полноэкранного изображения

Question

Попытка выяснить, как это работает. Изображение выглядит как фиксированное изображение, и при прокрутке оно отображается на весь экран и воспроизводится видео (я хочу оставить его как изображение), а затем вы можете прокручивать содержимое в нем. Как только содержание заканчивается, изображение прокручивается вверх. Работает и в обратном порядке!

Прокрутите страницу примерно до половины: https://www.dji.com/mavic-mini?site=brandsite&from=homepage

Answer 1

Если вы заметили код, видео в полноэкранном режиме. Разработчик создал наложение маскирующего кадра поверх видео, которое анимируется при событии прокрутки. Довольно гладкий ход:)

Также видео сделано таким образом что целевые элементы центрированы для кадрирования.