Создание красивого сайта с Parallax эффектом при скролле | Материалы урока

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

Материалы урока и готовый результат: Скачать

Рекомендуемые уроки и инструменты

• Настройка VS Code для верстки: Ознакомиться с уроком
• Cubic-Bezier CSS Generator: Перейти на сайт
• Пипетка Instant Eyedropper: Скачать
• Урок по EMMET (быстрая верстка): Смотреть на YouTube
• Справочник EMMET (сокращения): Ознакомиться с уроком

Cubic-Bezier анимация для скролла:

Ниже представлен скриншот из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков на сайте сервиса, вы можете настроить анимации по своему вкусу.

--transition: transform .75s cubic-bezier(.075, .5, 0, 1);

Обновленный метод определения CSS переменной из JavaScript

Чтобы не заставлять браузер ежесекундно проверять cssText и снизить нагрузку, мы можем задать конкретное CSS свойство с переменной и сделать это не для «body», а непосредственно для «documentElement», то-есть для «html» (в CSS это :root). setProperty устанавливает и изменяет конкретное CSS свойство, поэтому в нашем случае, сложение с присваиванием +=, которое влечет за собой дополнительную проверку уже имеющегося набора свойств, использовать не обязательно.

	document.documentElement.style.setProperty('--scrollTop', `${this.scrollY}px`)