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

В этом уроке мы рассмотрим создание сайта портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на 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:08 Что ещё изучить?

[AkramRahmanov]

Ни разу не веб-верстальщик, попробовал по вашему видео сделать что-то, понравилось! Спасибо вам большое за урок!

[fckincummer]

Незаслуженно! Незаслуженно мало подписчиков у этого молодого человека! Очень качественная подача информации, спасибо тебе огромное друг
P.S лайк + подписка

[game_m]

Алексей, Вы волшебник! Только сегодня отрисовал дизайн слайдера с 3 линиями контента, которые должны быть связаны и двигаться в противоположную сторону друг от друга. И тут ваше видео... Спасибо большое!

[denzor]

Чел я тебя обожаю, выпускай почаще пожалуйста 🙏

[FifaKisaKittens]

Ты был прав, это пушка!!!
Лучшие креативные уроки в рунете!!!
Спасибо Алексей!

[МиржалолМирхомитов-го]

Шикарно. Круто. Ждем еще таких материалов

[fobiya-db]

Искал на ютубе информацию по кусочкам месяц. А тут все в одном канале, я тебя обожаю мужик)

[ЯнаТимофеева-ши]

Спасибо за видео. У меня все получилось 🧩

[lazylion]

Очень круто! Сколько смотрел видео по верстке сайтов ни разу такого не видел, только сегодня нашел вас когда ввёл в поиск как сделать параллакс эффект))) продолжайте снимать подобные видео, очень восхищает хочется повторить так же для своего портфолио

[funkypossum]

Спасибо, что делаете видео. После того, как наткнулась на Ваши видео, появилось очень много мотивации учиться :)

[sergeytukhtarov]

Алексей, благодарю за очередной качественный урок. Когда проходишь твои уроки, то получаешь не только уникальные знания и прикольные качественные детальки типа (8px  cкругления часто используются при веб-разработке), но и эстетическое удовольствие от их прохождения. У тебя очень классный вкус. Подскажи пожалуйста, когда можно ждать следующего урока, про который ты говорил в видео? Прям заинтриговал 😆

[ehmedovramin]

Премнооого Благодарен! Спасибо братан. И особенно за возможность скачивать готовый результат! За это с меня подписка и лайк, + комментарий! Спасибо за классные уроки и материалы.

[dimkagera]

Жду видосов с этого канала как свой День Рождения !
всегда что-то суперское делаешь )
респект )

[kos]

Алексей, спасибо за очередной шедевр!)

[uspick]

Спасибо Большое за не легкий ваш труд! Вы очень понятно объясняете и показываете на примере, приобрел ваш комплект курсов, начинаю изучать и понимать !
Спасибо за хорошее объяснение и понятность!

[Mgdrepair]

Спасибо за урок, очень интересно, еще бы увидеть как сделать чтобы при клике на ITEM открывался в полный формат просмотра того или иного изображения.

[noviy-zavet]

Привет, а как записать такой голос, ? Микрофон вроде купил неплохой, но нет такого звука

[-kpyc-]

Алексей, спасибо за бомбический урок! как всегда на высотеее!!! хотел задать вопросик, а можно как то увеличить скорость прокрутки слайдов при помощи колеса мыши? а то у тебя в видео быстро достаточно двигаются а у меня значительно медленнее.

[vershinata]

Прошу прощения, а что такое методология БМ. Вы в ролике упоминаете эту методологию.

[chelovek]

Спасибо за урок, но, к сожалению, я кое-что не понял: почему под конец, когда перевернули изображения на 180°, они снова встали как надо и ряды начали скроллиться в разные стороны? И почему именно на 180°, ведь изображения переворачивали на 192, 5°