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

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

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

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

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

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

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 */
}