WebDesign Master
Курсы
Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

Создание крутого 3D сайта с анимацией прокрутки | Материалы урока

В этом уроке мы рассмотрим создание сайта с потрясающей 3D анимацией скролла, используя возможности современного HTML, CSS и JavaScript. Мы разработаем модель движения слайдов в глубину, поработаем над кастомной анимацией, плавностью, красиво оформим композицию с помощью CSS, а также поработаем с аудио и видео контентом на странице.

Создание крутого 3D сайта с анимацией прокрутки | Материалы урока - Видеоурок
Смотреть урок на YouTube
Создание контентного сайта на Jekyll от А до Я

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

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

  • Настройка VS Code для верстки: Ознакомиться с уроком
  • Cubic-Bezier CSS Generator: Перейти на сайт

Настройки CSS анимации:

Настройки Cubic Bezier анимации

Code snippets, short and long-hand:

transition: all 500ms cubic-bezier(0.075, 0.500, 0.000, 1.000);
transition-timing-function: cubic-bezier(0.075, 0.500, 0.000, 1.000);

Скрыть скроллбар

body {
	scrollbar-width: none;  /* Firefox */
}
body::-webkit-scrollbar { 
	display: none;  /* Safari and Chrome */
}

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

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

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

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

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

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

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

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

  • Создание красивого сайта с горизонтальным Parallax эффектом | Материалы урока
  • Создание сайта портфолио с крутой анимацией | Материалы урока
  • Создание красивого сайта с Parallax эффектом при скролле | Материалы урока
  • Создание Parallax эффекта на сайте при движении мыши | Материалы урока
  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP) | Материалы урока

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

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

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

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp 4
2023 © WebDesign Master