Перемещение видеоролика как прокрутки мыши

Вы видели сайт Кэти Перри? Это потрясающе (я серьезно, не спам)!Перемещение видеоролика как прокрутки мыши

У этого есть движущееся фоновое видео, и я не могу понять, как они его реализовали.

это домашняя страница:

http://www.katyperry.com/

и вы начинаете прокручивать вниз, фоновое изображение (на самом деле, видео) начинает играть.

Что мне удалось выяснить, что это само видео,

http://www.katyperry.com/wp-content/themes/katyperry-2/library/video/KATY_BG_21.mp4

и вертикальная прокрутка перемещает видео ползунка.

Я просто не могу показаться, чтобы выяснить, как они делают это, и это сводит меня с ума (потратил значительное количество времени, пытаясь перепроектировать его)

какие-нибудь идеи? вы уже делали/видели что-то подобное раньше?

Спасибо заранее, Жолт

источник

2013-10-25 Zsolt Balla

Фон не является видео. Это серия изображений, которые обновляются, когда увеличивается 'scrollTop'' document'. Это эффективно анимация стоп-кадра. –

«Фоновый» - это фактически ссылка @ZsoltBalla, а не анимация стоп-кадра. Вы можете увидеть файл JavaScript, связанный с эффектом здесь: http://d1qhhammy2egfp.cloudfront.net/wp-content/themes/katyperry-2/library/js/home.js?ver=1.1 – SombreErmine

Спасибо, оба! Мне очень нравится этот эффект, может быть, я попробую его когда-нибудь ... –

function updateVideo() { 
     var video = $('#video-bg').get(0); 
     var videoLength = video.duration; 
     var scrollPosition = $(document).scrollTop(); 
     video.currentTime = (scrollPosition/($(document).height() - $(window).height())) * videoLength;//(scrollPosition/SCROLL_SCRUB_SPEED) % videoLength; 
} 

$(window).scroll(function(e) { 
     if(videoReady && continueUpdatingVideo) { updateVideo(); } 
    });

Как прокручивать страницы, currentTime увеличивается/уменьшается эффективно очистки через видео.

Дополнительная информация: LINK

источник

2013-10-25 11:00:58 Turnip

Большое спасибо, что делает трюк :-) –

Мне очень хотелось бы увидеть скрипку этого, можете попробовать сделать это в эти выходные. – metaColin

@metaColin считают, что скрипт: http://jsfiddle.net/MrLuke/o79fkvn1/3/ – MrLewk

Перемещение видеоролика как прокрутки мыши

ответ

Смежные вопросы