Главная страница » Веб-дизайн » Прокрутка страницы с эффектом видео на HTML5

Прокрутка страницы с эффектом видео на HTML5

Сайты становятся все креативней, нововведения и разнообразность скриптов позволяет создавать по настоящему уникальные вещи, которые будут будоражить взор посетителя своей необыкновенностью к подходу поставленной задачи. Один из таких эффектов мы сегодня и постараемся реализовать. Наш сегодняшний урок будет посвящен построению прокрутки страницы с видео сопровождением, которые будет чувствительно к прокрутке, данный эффект позволит создать нам эффект полного контроля и создание объемной страницы.

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

Таким эффектом достаточно легко манипулировать и варьировать между видео-сопровождением. Применив такой эффект у себя на сайте вы получите достаточно мощный инструмент для привлечения посетителей.

Шаг 1. HTML

Реализовать разметку достаточно просто, нам просто необходимо подключить видеоматериалы, кроме этого мы делаем подстраховку, если браузер не будет поддерживать такую функцию, это относится к устаревшим браузерам.

</div>

<p>Извините, Ваш браузер не поддеривает данный <видео> эффект.</p>

</video>

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

Прокрутка страницы с эффектом видео на HTML5

Шаг 2. JS

Так как нам необходимо подхватить видео и кадрировать его по моменту прокрутки то мы будем использовать несколько функций js, которые нам помогут добиться желаемого результата.

// Выбираем видео элемент

var vid = document.getElementById('v0');

//var vid = $('#v0')[0]; // jquery опция

// остановка видео при загрузке

vid.pause();

// Пошаговое воспроизведение видео при прокрутке страницы

window.onscroll = function(){

vid.pause();

};

// Обновления видеокадров для плавного воспроизведения при прокрутке

setInterval(function(){

vid.currentTime = window.pageYOffset/400;

}, 40);

Надеюсь данный урок станет Вам полезным, и с его помощью вы создадите нечто новое и уникальное. За основу была взята реклама Google популярного браузера Chrome.