В последнее время, сайты с parallax scrolling эффектом стали появляться повсюду. Я не хотел это пропускать, поэтому я создал демонстрационную страницу с parallax scrolling эффектом с помощью jQuery и CSS.
Что такое «parallax» ? Даже если вы не знакомы с термином «parallax scrolling» , вы наверняка знакомы с техникой. Parallax scrolling - это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Когда вы наблюдаете за движущимся автомобилем, вам кажется, что объекты расположенные перед автомобилем, движутся быстрее, чем объекты расположенные за автомобилем. Parallax scrolling использует тот же принцип, чтобы заставить зрителя думать, что он наблюдает за 3D сценой.Вы можете скролить обычным способом, использовать меню навигации в правой части страницы или кнопки следующий/предыдущий, которые появляются под каждой статьёй.
Страница содержит четыре, независимо друг от друга анимированных слоя, для создания иллюзии глубины.
В Safari прокрутка происходит плавно (по крайней мере, у меня на компьютере), но демо должно работать в любом современной браузере.
Disclaimer 1: Так как это всё лишь эксперимент, я не проводил оптимицацию демо для работы на мобильных устройствах.
Disclaimer 2: Навигационное меню, которое используется в демонстрации, подсмотрено на сайте Nike Better World. Если вы планируете использовать аналогичную навигацию на своём сайте, имейте в виду её происхождение.
Как это работает Статьям и фоновому слою, с помошью CSS назначено фиксированное положение, также им назначено свойство z-index для того, чтобы новые слои появлялись выше фонового слоя. Используется четыре слоя: небольшие облака, большие облака, воздушный шар/изображение пейзажа, слой со статьями. /* передний слой (воздушный шар/изображение пейзажа) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* выравниваем левый край с центром окна */
top: 0;
width: 940px;
margin-left: -470px; /* двигаем влево на полширины элемента */
}
Каждый слой имеет абсолютное позиционирование. Это было самой сложной частью всего процесса, так как элементы должны располагаться таким образом, чтобы при прокрутке к любой из четырёх статей, было одинаковое выравнивание статьи относительно окна браузера. В данном случае, это было достигнуто методом проб и ошибок.
#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
/* и так далее… */
Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.
$(window).bind("scroll",function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$("#parallax-bg1").css("top",(0-(scrolled*.25))+"px");
$("#parallax-bg2").css("top",(0-(scrolled*.5))+"px");
$("#parallax-bg3").css("top",(0-(scrolled*.75))+"px");
}
Слой переднего плана всегда выравниваются по верхней части документа, в то время как движение других слоев регулируется в зависимости от их глубины.
Чем ниже слой, тем медленнее он движется.
Остальной jQuery код используется для управления навигацией. Когда пользователь нажимает навигационную кнопку, страница прокручивается до соответствующей статьи. В случае, если у пользователя отключен JavaScript, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.
Следующие шаги Я уверен, что есть много других способов создания parallax scrolling эффекта, и надеюсь, мой опыт послужит отправной точкой для исследования этого метода.Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 3D пространства. В данном уроке мы продемонстрируем простой и эффективный способ получить замечательный эффект.
РазметкаДанная техника базируется на управлении скоростью перемещения фонового изображения. Создадим разметку HTML, содержащую две секции с атрибутами "data-type" и "data-speed" . Назначение атрибутов раскроется чуть позже:
Теги с атрибутами data-type и data-speed позволяют сделать разметку простой и понятной.
В соответствии со спецификацией любые атрибуты, начинающиеся на data- будут обрабатываться как хранилище частных данных. Дополнительно, они не оказывают влияния на шаблон.
Так как нам нужно управлять скоростью прокручивания фоновых изображений, то для ключевых параметров мы будем использовать data-type="background" и data-speed="10" .
Затем добавим тег в каждый тег .
Абсолютное позиционирование Простой эффект параллакса
Мы будем прокручивать фон тега медленнее, чем его содержание, то есть . Таким образом создается иллюзия параллакса.
CSSПрежде, чем перейти к магии jQuery добавим фоновые изображения для каждого элемента в коде CSS.
#home { background: url(home.jpg) 50% 0 repeat fixed; min-height: 1000px; } #about { background: url(about.jpg) 50% 0 no-repeat min-height: 1000px; }
И определим стили для остальных элементов нашей демонстрационной страницы.
#home { background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; } #home article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; } #about { background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; height: 1000px; margin: 0 auto; width: 100%; max-width: 1920px; position: relative; -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); box-shadow: 0 0 50px rgba(0,0,0,0.8); } #about article { height: 458px; position: absolute; text-align: center; top: 150px; width: 100%; }
Магический кодИспользуем jQuery. Начнем со стандартного метода document.ready() , чтобы быть в уверенности о загрузке страницы и ее готовности к манипуляциям.
$(document).ready(function(){ });
Теперь нужно внимание. Первое, что здесь происходит - итерация по всем элементам с атрибутом data-type="background" на странице.
$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект }); });
В функцию.each() добавим другую функцию.scroll() , которая вызывается в момент начала прокрутки.
$(window).scroll(function () {
Нужно определить на сколько пользователь прокрутил страницу, и затем разделить полученное значение на величину, определяемую в атрибуте data-speed .
Var yPos = -($window.scrollTop() / $bgobj.data("speed"));
$window.scrollTop() - получаем текущее значение прокрутки сверху. $bgobj.data("speed") ссылается на атрибут data-speed в разметке. yPos - окончательное значение, которое используется для прокрутки. Однако, используется отрицательное значение, так как фон смещается в обратном направлении по отношению к прокрутке пользователя.
В нашем примере атрибут data-speed имеет значение 10. Предположим, что окно браузера прокручивается на 57px . Это означает, что 57px делится на 10 = 5.7px .
// Собираем положение фона var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords });
Теперь надо собрать все данные в одно значение. Чтобы сохранить горизонтальное положение фона статичным, мы используем значение 50% для его свойства xPosition . Затем добавляем yPos в качестве значения свойства yPosition , а затем присваиваем координаты фону : $bgobj.css({ backgroundPosition: coords }); .
В окончательном виде код будет выглядеть так:
$(document).ready(function(){ $("section").each(function(){ var $bgobj = $(this); // Назначаем объект $(window).scroll(function() { var yPos = -($window.scrollTop() / $bgobj.data("speed")); // Собираем значение координат фона вместе var coords = "50% "+ yPos + "px"; // Смещаем фон $bgobj.css({ backgroundPosition: coords }); }); }); });
Фиксатор для IEОстается один момент: старые версии IE не могут вывести теги и . Дело легко поправить, мы будем использовать стандартное решение для создания элементов, которое магическим образом заставит браузер распознавать теги HTML5.
// Создаем элементы для IE document.createElement("article"); document.createElement("section");
Дополнительно мы используем файл сброса CSS , чтобы все браузеры выводили страницу одинаково.
Развернуть / Свернуть- Урок 1. Что такое параллакс эффект 00:15:20
- Урок 2. Плагин Simple Parallax Scrolling 00:11:36
- Урок 3. Плагин jParallax 00:21:54
- Урок 4. Создаем свой эффект Parallax 00:22:51
- Урок 5. Создаем свой эффект Parallax. Эффект масштабирования 00:19:24
- Урок 6. Создаем свой эффект Parallax. Эффект прожектора 00:12:34
- Урок 7. Плагин jInvertScroll. Горизонтальный скролл страницы 00:13:01
- Урок 8. Появление картинок при скролле. Урок 1 00:22:36
- Урок 9. Появление картинок при скролле. Урок 2 00:12:31
- Урок 10. Плагин multiScroll.js 00:22:36
- Урок 11. Падающий снег 00:07:48
- Урок 12. Анимация при скролле 00:26:03
- Урок 13. Scroll Indicator - прогресс бар при скролле 00:14:40
Термин «параллакс» в первую очередь исходил из визуального эффекта двумерных видеоигр, которые использовали разные скорости движения фонового изображения, чтобы создать иллюзию глубины во время игрового процесса. Как правило, это делалось путем того, что фон игры двигался медленнее, чем передний план, чтобы заставить его казаться подальше. Эта же концепция применяется к дизайну сайта parallax, в котором фон веб-сайта движется с другой скоростью, так как остальная часть страницы обладает впечатляющим визуальным эффектом, который позволяет использовать бесчисленные творческие приложения.
В этом курсе мы познакомимься с готовыми решениями, плагинами, а также научимся писать собственный код для реализации параллакс эффектов на сайте.
15-12-2017 30-11--0001 en 19 уроков
Duration 02:51:59
09-03-2018 30-11--0001 en 16 уроков
Добро пожаловать на курс CSS Анимаций и Переходов (Transitions). В этом курсе вы не только изучите основные техники, но и глубоко погрузитесь в создание анимаций и переходов. Мы на практике создадим комплексные анимации, с помощью которых вы повысите свои знания анимаций и переходов на новый уровень.
Duration 02:09:35
07-05-2018 30-11--0001 en 30 уроков
Повысьте свои навыки анимации CSS! Этот видеокурс даст вам практический опыт, который вам нужно повысить и продать свои навыки анимации в качестве дизайнера или разработчика. В течение нескольких часов пошаговых руководств мы вместе создадим анимированную целевую страницу и узнаем, как анимация может оживить ее.Это практический курс, полный реальных загружаемых примеров кода. Вы сможете взять знания, а также реальный рабочий код, в свои проекты...
Duration 03:40:14
Последнее добавленное 
en
08-04-2019
Большие базы данных повсюду в наши дни. Facebook, Netflix, Uber, Airbnb используют базы данных на основе SQL - и это лишь некоторые из них. Итак, чтобы быть успешным разработчиком или специалистом по данным, вам нужно знать SQL наизнанку.
en
06-04-2019
MvRx - это библиотека Android, созданная на основе Jetpack, которая практична, забавна, проста в освоении, но достаточно мощна для масштабирования в большие приложения.
ru
06-04-2019
Курс по C# рассчитан на новичков, которые хотят изучить язык. Курс состоит из трёх частей, в которых вы научитесь: писать код на C#, создавать консольные программы, разрабатывать полноценные программы под Windows с дизайном и подключением к БД, а также создавать веб сайты на ASP.NET и публиковать..
ru
06-04-2019
На семинаре преподаватель расскажет о популярной NoSQL системе управления данными и об опыте ее практического применения.
ru
05-04-2019
Курс посвящен управленческой деятельности во всех её аспектах в контексте руководства командой разработчиков. Он будет полезен линейным руководителям, техническим и командным лидерам. В основе программы лежит более чем 10-летний опыт «набивания шишек» в управленческой деятельности. Речь идёт...
Данный курс позволит вам овладеть базовым набором знаний и навыков, необходимых для старта карьеры разработчика на Python и подготовки к основному курсу «Разработчик Python». Материалы курса представляют собой предварительно записанные в студии лекции с теоретической частью и наглядной...
en
04-04-2019
Хотите сбежать от корпоративного рабства? Ваш "Agile" процесс истощает вашу жизнь? Может быть, пришло время взять под контроль свою карьеру, выйдя самостоятельно на рынок в качестве фрилансера. В этой работе Роб Конери предоставляет вам основу для построения, план, который вам понадобится, чтобы...
en
04-04-2019
Наша бестселлерная книга, содержащая более 600 страниц основных знаний и навыков в области компьютерных наук. От нотации Big-O до нормализации базы данных, от Банды четырёх до машин Тьюринга. Это все здесь! Для тех, кто не имеет степени "Компьютерная инженерия", эта книга поможет вам оставаться...
en
04-04-2019
Собеседования могут быть безумно расстраивающим. Вопросы, как правило, выходят за пределы поля и, по-видимому, не имеют ничего общего с вашей потенциальной работой. Более того: вы должны писать на белой доске! Что за дело с этим миром! В этом выпуске Джон Ски и Роб Конери знакомят вас с концепциями,
