Эффект параллакса уроки. Создаём parallax scrolling эффект с помощью jQuery и CSS. Что такое «parallax»

Развернуть / Свернуть

• Урок 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

Собеседования могут быть безумно расстраивающим. Вопросы, как правило, выходят за пределы поля и, по-видимому, не имеют ничего общего с вашей потенциальной работой. Более того: вы должны писать на белой доске! Что за дело с этим миром! В этом выпуске Джон Ски и Роб Конери знакомят вас с концепциями,

Эффект параллакса - очень интересная техника. При прокручивании фоновое изображение перемещается медленнее чем, содержание, а в результате получается иллюзия 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 , чтобы все браузеры выводили страницу одинаково.

Здравствуйте дорогие друзья. Недавно мне попался один заказчик, который захотел иметь дизайн с параллакс эффектом (jquery.parallax).

Если кто не знает, то:

jQuery.Parallax – это библиотека jQuery, с помощью которой можно создавать эффект 3D движения на сайте, то есть дизайн получается более динамичным и запоминающимся.

А слово Параллакс, в науке, означает изменение видимого положения тела относительно заднего фона в зависимости от положения наблюдателя.

Отражение солнца в воде сдвинуто относительно столба, это и есть Параллакс в природе

Я сам никогда не сталкивался с параллакс эффектом и поэтому пришлось с нуля разбираться в этом вопросе, так как заказчик оказался очень настойчивым 🙂

Существует очень много разновидностей jQuery.parallax , но для моего макета нужен именно с эффектом горизонтального движения, когда разные части фона двигаются с разной скоростью, тем самым создавая эффект трёхмерности.

В этой статье, я вам покажу, как очень быстро подключить библиотеку parallax к своему сайту и как оживить дизайн. А теперь давайте начнём разбираться.

1. Принцип работы jQuery.Parallax

JParallax основан на перемещении слоёв, которые позиционируются абсолютно (position:absolute;), слои двигаются в ответ на перемещение мыши.

Основная фишка заключаться в том, что из-за разного размера слоёв, движения получаются с разной скоростью.

Пример параллакс эффекта:

А вот попроще пример с текстом:

2. Подключаем библиотеки и создаём базу для вывода

Для начала создайте два файла, в которых мы будем указывать оформление нашего параллакс эффекта — style.css и index.html .

jQuery(document).ready(function(){
jQuery(‘#parallax .parallax-layer’)

Mouseport: jQuery(‘#parallax’)
});
});

Как видите, мы подключили библиотеку jQuery с репозитория Гугла, затем сам скрипт jquery.parallax.js (скачать его можете или в конце статьи будет ссылка на архив с исходником). Далее мы подключаем обработчик, который фиксирует перемещение по обозначенным слоям.

Изображения (слои), поидеи должны быть разной ширины, чтобы перемещение было с разной скоростью, но можно сделать и с одинаковой шириной и изменять уже параметр width у каждого изображения в отдельности.

.parallax-viewport { /* Стили основного бокса */
width: 100%;
height: 20em;
background-image: url("images/1.jpg");
}
.parallax-viewport {
/* Тут не указана ширина, так как все слои в моём примере
имеют одинаковую width и height*/
position: relative;
overflow: hidden;
}
.parallax-layer {
/* Обязательное позиционирование для каждой картинки */
position: absolute;
}
.site_wrap {
max-width:48rem;
min-width:292px;
width:100%;
margin: 0px auto;
}

У нас слои разного размера и поэтому по ширине не будет чётких границ, чтобы сделать стиль отображения «из окна» (как в примере выше), надо обернуть дивы с картинками вот в такой класс:

Parallax-viewport
{position: relative; overflow: hidden; width:npx; height:npx;}

Мы указываем фиксированную ширину, высоту «окна» и обрезаем все части (overflow: hidden), которые выступают за грани нашего окна. Для наглядности я ещё оформил моё окно в рамку, простым бордером и отступом padding .

Итог

Вот в принципе и всё, настроить параллакс эффект очень просто. Скачать мои исходники второго примера вы можете по .

Библиотека jQuery.Parallax имеет очень много возможностей и вот такое смещение, только малая часть того, чего можно добиться с помощью этой замечательной библиотеки.

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

• tntrailsandbyways.com — Красивое горизонтальное смещение с задержкой по времени;
• www.housamz.com — точной такой же эффект, как мы с вами делали в этом уроке, только смещения по оси «y» нет. Чтобы отключить смещение по вертикали, в файле jquery.parallax.js измените параметр yparallax на false . Таким же макаром можно отключить и скроллинг по горизонтали.
• Одна из разновидностей Параллакс эффекта, у меня на странице « «. Если интерестно, то напишу как такое сделать.

На этом всё, до скорых встреч.

В последнее время, сайты с 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 эффекта, и надеюсь, мой опыт послужит отправной точкой для исследования этого метода.