Создание сайта портфолио с крутой анимацией (HTML CSS JavaScript)

Описание

💥 Все курсы в одном комплекте: https://webdesign-master.ru/courses/bundle/

В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды на сайте будут увеличиваться с красивой анимацией. Также мы разработаем CSS анимацию инерции для скролла.

Страница урока: https://webdesign-master.ru/blog/html-css/amazing-scroll-portfolio.html

Таймкоды:
00:00 Начало урока
01:09 Обзор материалов урока
01:46 Приступаем к HTML верстке сайта
03:17 Подключаем файлы CSS и JavaScript
04:58 HTML верстка сайта (первый слайд)
08:51 Инициализация JavaScript библиотеки
11:03 Приступаем к CSS стилизации
12:00 Стилизация контейнера и элементов
13:36 HTML верстка сайта (вся разметка)
14:56 Оптимизация JavaScript кода
17:48 Синхронизация слайдеров Swiper
18:48 Определение переменных CSS
20:20 Стилизация слайдов портфолио
25:08 Анимация инерции cubic-bezier
26:10 Продолжаем CSS стилизацию
28:36 Анимация при наведении
30:46 Верстка изображений портфолио
32:08 Что ещё изучить?

ВКонтакте: https://vk.com/jediweb
Телеграм: https://t.me/jediweb
Дзен: https://dzen.ru/jediweb