Video by Записки фронтендера: JS, CSS, HTML

Создание сайта от А до Я (комплексный курс): Создание интернет-магазина от А до Я: Создание крутого слайдера ( посадка на CMS): Все курсы в одном комплекте: В этом уроке мы создадим интересный крутой сайт-портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды будут увеличиваться с красивой анимацией. Также мы разработаем CSS анимацию инерции для скролла. Данный пример выглядит потрясающе, однако он довольно прост в реализации. В этом уроке я покажу, как происходит создание таких сайтов на реальном примере, здесь собрано очень много различных техник и приемов разработки, которые пригодятся вам в реальной работе над подобными проектами. Страница урока: Таймкоды: 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 Что ещё изучить? ВКонтакте: Телеграм: Дзен: