Все для веб-дизайнера
Прокрутка страницы с эффектом видео на HTML5
Сайты становятся все креативней, нововведения и разнообразность скриптов позволяет создавать по настоящему уникальные вещи, которые будут будоражить взор посетителя своей необыкновенностью к подходу поставленной задачи. Один из таких эффектов мы сегодня и постараемся реализовать. Наш сегодняшний урок будет посвящен построению прокрутки страницы с видео сопровождением, которые будет чувствительно к прокрутке, данный эффект позволит создать нам эффект полного контроля и создание объемной страницы.
Таким эффектом достаточно легко манипулировать и варьировать между видео-сопровождением. Применив такой эффект у себя на сайте вы получите достаточно мощный инструмент для привлечения посетителей.
Шаг 1. HTML
Реализовать разметку достаточно просто, нам просто необходимо подключить видеоматериалы, кроме этого мы делаем подстраховку, если браузер не будет поддерживать такую функцию, это относится к устаревшим браузерам.
|
1 2 3 4 5 6 7 8 9 |
<div id="set-height"> </div> <p id="time"></p> <video id="v0" tabindex="0" autobuffer="autobuffer" preload="preload"> <source type="video/webm; codecs="vp8, vorbis"" src="/video/basics/Chrome_ImF.webm"></source> <source type="video/ogg; codecs="theora, vorbis"" src="/video/basics/Chrome_ImF.ogv"></source> <source type="video/mp4; codecs="avc1.42E01E, mp4a.40.2"" src="/video/basics/Chrome_ImF.mp4"></source> <p>Извините, Ваш браузер не поддеривает данный <видео> эффект.</p> </video> |
Стили у нас отыгрывают малозначащую роль, они нам необходимы только для определения общих параметров контейнера и стилизации демо -страницы, по этому мы их решили пропустить.
Шаг 2. JS
Так как нам необходимо подхватить видео и кадрировать его по моменту прокрутки то мы будем использовать несколько функций js, которые нам помогут добиться желаемого результата.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// Выбираем видео элемент 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.
Вот и все. Готово!
Интересно:
| Опубликовал admin 18.09.2014 в 18:04, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...