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

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

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

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

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

  • Создание красивого сайта с поддержкой темной темы (HTML, CSS, GSAP)
  • Создание потрясающей галереи на HTML, CSS и JavaScript
  • Создание крутой 3D сцены (CSS + HTML) с эффектным дизайном
  • Создание крутого Swiper-слайдера от А до Я | Материалы курса
  • Создание пользовательского курсора с красивой анимацией. CSS / JavaScript / GSAP. Видеоурок и материалы

Разделы

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

Полезное

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