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

Описание

Создание сайта от А до Я (комплексный курс): https://goo.gl/ankxq9
Создание интернет-магазина от А до Я: https://goo.gl/7mDqYD
Создание крутого слайдера (+посадка на CMS): https://bit.ly/jVLyQ8

Все курсы в одном комплекте: https://wd-m.ru/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:04 Что ещё изучить?

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