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

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

Смотреть урок на YouTube

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

Стартовая HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

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

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

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

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

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

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

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

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

Большой комплексный курс по современному веб-дизайну

Веб-дизайн с нейросетями для начинающих

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

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

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

Стартовая HTML разметка

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

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

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

Другие уроки по теме «Веб-разработка»