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

Подписаться 303 тыс.

Просмотров 78 тыс.

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
В этом уроке мы создадим интересный крутой сайт-портфолио с диагональным плавным скроллом. Мы рассмотрим нестандартный способ синхронизации вертикальных слайдов на JS и инверсию движения в различных направлениях с помощью CSS. При наведении слайды будут увеличиваться с красивой анимацией. Также мы разработаем CSS анимацию инерции для скролла.
Страница урока: webdesign-master.ru/blog/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 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

Опубликовано:

3 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 51

@wdm Месяц назад

💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses

@AkramRahmanov 2 месяца назад

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

@fckincummer4934 Год назад

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

@game_m Год назад

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

@denzor8 Год назад

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

@user-gt6sv6wn7q Год назад

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

@user-dp8xc9tx8n 9 месяцев назад

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

@lazylion8379 Год назад

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

@funkypossum6403 Год назад

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

@FifaKisaKittens Год назад

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

@sergeytukhtarov1175 Год назад

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

@user-wy9bm9zk3p Год назад

Очень круто. Спасибо!

@ehmedovramin7516 10 месяцев назад

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

@dimkagera6955 Год назад

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

@kostiantynkolomiiets1248 Год назад

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

@MrSlavjon Год назад

спасибо за контент!

@relvirelaxingmusic4883 Год назад

Бесценные уроки.. Огромное спасибо!

@evgeniydubrovin Год назад

Как всегда офигенно!

@BryanskyM 10 месяцев назад

Боже. Ты волшебник

@TaimasovK Год назад

Круто !!! Респект !!!

@araara5332 Год назад

Очень понравилось

@user-ii4po4dc7g Год назад

Реально круто!

@uspick4167 Год назад

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

@user-hu1mk4tw2q Год назад

Очень круто, спасибо!!

@eerf2023 Год назад

очень впечатляет!

@ThePSDtut Год назад

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

@internationaluser86 Год назад

Супер

@vasilich4582 Год назад

Бомба проект!!!!

@akbgrv Год назад

Круто!

@monieKidd Год назад

тема темой 🥰

@-kpyc-1483 Год назад

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

@wdm Год назад

Здравствуйте, Денис. Да, есть параметр дополнительный для mousewheel. Писать логику прокрутки мышью тогда следует так: mousewheel: { enabled: true, sensitivity: 2, },

@-kpyc-1483 Год назад

@@wdm Спасибо огромное! пойду реализовывать :)

@piligrim_7 Год назад

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

@MushroomHumanoID Год назад

Спасибо за интересные идеи. Подталкивают к изучению js и css, ибо знания css поверхностные, а js - нулевые.

@GudgiJFm Год назад

а как сделать бесконечную прокрутку, плавную как в slick e?

@padimaik3162 Год назад

А как увеличить скорость скролла всех слайдов?

@chelovek0161 10 месяцев назад

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

@wdm 10 месяцев назад

Здравствуйте. На 180° мы поворачиваем картинки относительно соседних, чтобы они смотрели диаметрально в противоположную сторону, но обратите внимание, что у нас также имеется наклон всей композиции, как раз таки на разницу: 192,5° - 180° = 12,5°

@vershinata 10 месяцев назад

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

@wdm 10 месяцев назад

Методология БЭМ для разработки сайтов позволяет делать сайты быстро и поддерживать долгие годы. БЭМ позволяет создавать расширяемые и повторно используемые компоненты интерфейса. В нашем случае мы используем лишь часть методологии, а именно нейминг классов. Рекомендую почитать на официальном сайте БЭМ раздел "Соглашение по именованию".

@vershinata 10 месяцев назад

@@wdm большое спасибо.

@sardorbekuzbrasuljonov Год назад

ты крутой

@aleksandrasjarmalavicius7591 Год назад

Как можно купить все курсы в одном комплекте если я из Европы, уже пробовал со всеми карточками ничего не вышло?

@wdm Год назад

Здравствуйте. Напишите на почту courses@webdesign-master.ru

@user-fi4eh3un9i 7 месяцев назад

Автору добра и есть вопрос к знатокам у меня не работает bindSwipers Очень много времени перепроверял синтаксис, но толку нет:(

@wdm 7 месяцев назад

Здравствуйте. Рекомендация следующая. Запустите готовый пример из архива и посмотрите, работает он или нет. Затем сравните каждый символ и каждый пробел кода из готового примера с вашим кодом.

@oliodesign Год назад

Это как-будто пинок под зад, что вот оно - твое наглядное бесплатное объяснение, твой guidance, найди немного времени, вникни, буду начинать с верстки cv. И настройки vs конечно.