Урок 21. Эффект parallax | Курс Веб разработчик | Академия верстки

Автор Nikita Stoianov
Урок 21. Эффект parallax | Курс Веб разработчик | Академия верстки

Привет.

На связи. Артем Исламов это. Академия верстки вы сейчас находитесь в плейлисте который называется web-разработчик 10 поток — это записи нашего закрытого курса мы их бесплатно в YouTube, но мы не выложили домашнее задание и дипломный проект от этого курса для того чтобы получить полный доступ ко всем домашка дипломом и так далее.

Вам необходимо перейти по ссылке в описании или вот там справа в углу будет значок информации.

Вы можете кинуть туда и перейти по ссылке, а затем вы оплачиваете полный доступ ко всем домашку дипломным проектом указывайте свою почту после этого получаете доступ полностью к записям курсы веб разработчик 1000 со всеми модулями со всеми заданиями дополнительными заданиями со всеми видео уроками которые здесь есть как мы обычно прикрепляем к каждому нашему уроку и дополнительные документы дополнительные материалы макеты дополнительные ссылки. Поэтому если вы хотите получить полный доступ ко всем записям и не ждать пока они выйдут на. Ютюбе Вы можете перейти по ссылке в описании и оплатить. Приятного просмотра этого урока. До скорой встречи. Всем привет на связи. Артем Исламов мы продолжаем изучать основы веб-разработки. Сегодня мы будем говорить про замечательный эффект параллакса на сайте. Что такое эффект параллакса. Это тот случай когда вы прокручивает страницу и из-за этого эффекта параллакса у вас складывается впечатление, что сайт представлен в виде 3D модель, а то есть какие-то элементы двигаются быстрее какие-то медленнее этого создается эффект присутствия например фон может прокручиваться медленнее чем всё остальное на сайте, тогда получается, что всё содержимое сайта как бы ближе к. Вам потому, что движется быстрее также при прокрутке можно увеличивать или уменьшать скорость отдельных элементов размытых и создать тем самым полноценный эффект присутствия мы будем рассматривать эффект параллакса на примере двух библиотека — это parallax.js которая помогает анимировать фон при скролле и эффект параллакса при помощи в библиотеке релакс GS здесь анимируется уже отдельные элементы, что долго не буду тянуть кота за причина вы перейдём сразу практическим примером и первая библиотека которые мы воспользуемся этом parallax.js находится на по адресу parallax.js. Ну вот собственно он будет прикреплён к этому уроку обычно ничего сложного нет мы сначала к нашему сайту подключаем библиотеку jquery так как этот плагин является plugins Mac этой библиотеке. Что за эффект из душа у меня запущены видео у меня может немного подтормаживает ли подлагивать. Но — это лишь потому, что у меня записывается ещё параллельно видео и создает большая нагрузка, но в будущем. Вы должны понимать и рассчитывать на то, что если у пользователя слабый компьютер эффект. Параллакс может затруднить пользования сайтом поэтому очень медленно применяется эффект. Параллакс если он не нужен то его применять лишний раз и везде совать не стоит. Но иногда эффект. Параллакс может служить хорошей визуальный дополняющие для сайта примеры параллаксов. Я постараюсь прикрепить к этому уроку найду самые интересные примеры и прикрепляю чтобы. Вы могли посмотреть, что — это вообще такое мы. Собственно как работает библиотека. Мы скачиваем архив с этой библиотекой и подключаемые к нашему сайту прежде чем. Мы — это сделаем в нашем индексным документе развернем какой-нибудь стартовый шаблон я использую быстро после snippet можно использовать свой сниппет которые вы когда ты уже написали суть от этого не нам нужно сделать несколько секций во-первых у нас должно быть подключена библиотека джейквери затем скачанную библиотеку. Параллакс Мы открываем и откуда берём пролактин я скопирую перехожу на рабочий стол в раздел сын папка гсв скачиваю сюда. Параллакс минут появляется он здесь дальше Script Source мы пишем JS parallax минус всё этого достаточно для того чтобы присоединить библиотеку к нашему сайту дальше нам необходимо создать несколько секций секции дети будут иметь всю высоту экрана собственно не будет во весь экран и ещё этих секций мы создадим несколько например будет трисекция три или четыре секция часть из них будет белый класс часть будет цветной поэтому мы присвоим только некоторым класс White вот таким вот образом и подключаем CSS файл style.css его откроем и напишу сюда. Что секции у нас идут высотой весь экран хорошо с этим разобрались, что ж то, что делать дальше чтобы правильно — это библиотеку помимо подключение самой библиотеке нужно повесить класс. Параллакс Windows. Ната Ната окно которые будут участвовать в parallaxe отлично и дальше так же должен быть атрибуту Data parallax Scroll точно также здесь ставим дата parallax Scroll и ещё. Добавляем еще один атрибут который будет отвечать за изображение которое будет у нас в качестве параллаксом то есть здесь будет путь до нашего изображения у нас — это будет изображён 12 находящиеся в папке. ОМК 1 и 2. Эх приготовлю. Сейчас скачаю и вернусь я скачал изображения. И теперь мы можем перейти к примеру, что у нас этот момент на сайте. На сайте пока ничего нет, но если мы начинаем крутить мы видим сразу, что получает появляется эффект параллакса то есть одна секция движется быстрее чем движется фон соответственно образом мы получаем вот такой вот интересный эффект то есть одно изображение смеяться очень мягкая сменяется другим изображением также здесь можно настроить эти изображения при помощи атрибутов например Data Image Source Data cable with nothing to Hide позицию позицию экспозицию Y спит то есть мы можем устанавливать скорость прокрутки нашего фона. То есть дата спит. Ну возьмем например 0 целых пример 0,9.

0 комментариев
0

Читайте также