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

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

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

Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока - Видеоурок
Смотреть урок на YouTube
Все курсы канала WebDesign Master

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

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

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

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

Ниже представлен скриншот из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков на сайте сервиса, вы можете настроить анимации по своему вкусу.
--transition: 1.75s cubic-bezier(.2, .6, 0, 1);
CSS анимация Cubic-Bezier

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «Верстка»

  • Создание красивого сайта с анимацией заголовка | Материалы урока
  • Создание сайта с красивой анимацией фона | Материалы урока
  • Создание красивого сайта с 3D эффектом при скролле | Материалы урока
  • Создание красивого сайта с 3D анимацией волны | Материалы урока
  • Создание красивого сайта с 3D эффектом Parallax | Материалы урока
  • Создание сайта с крутой анимацией скролла (GSAP) | Материалы урока

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Работа с хостингом от А до Я
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp
2024 © WebDesign Master