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

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

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

50% 1

Все курсы в одном комплекте: wd-m.ru/bundle
Создание сайта от А до Я: goo.gl/ankxq9
Сегодня мы рассмотрим создание сайта с крутой анимацией скролла при помощи GSAP ScrollTrigger и GSAP ScrollSmoother.
Страница урока: webdesign-master.ru/blog/html...
Таймкоды:
00:00 Начало урока
02:20 Обзор материалов и подготовка графики
06:05 Приступаем к HTML верстке сайта
07:49 Подключаем файлы CSS и JavaScript
11:34 Создание главного экрана сайта
31:57 HTML верстка галереи портфолио
38:28 CSS стилизация портфолио на сайте
48:19 Плавная прокрутка страницы на JS
52:35 Управление эффектами при скролле
59:47 Работа сайта на мобильных устройствах
1:01:01 Анимация элементов при скролле
1:15:29 Что ещё изучить?
ВКонтакте: jediweb
Телеграм: t.me/jediweb
Дзен: dzen.ru/jediweb

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

15 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

@ertar0 Год назад

Мне кажется, что нужна какая-то кнопка для донатов на твоём сайте. Слишком крутые уроки

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

Я до сих пор помню ваши старые проекты. с которых я начинала. и даже некоторые специально искала на вашем канале. чтобы просмотреть еще раз. и каждый новый проект - еще одна ступень вверх! Здорово!!! удачи вам!

@alenadecor5754 Год назад

Красота! Все есть и уроки и картинки в одном месте, очень удобно! Спасибо!

@Alexei-rb9yy Год назад

Огромное спасибо за урок, как всегда все на высоте!!!💥👍

@helenarara8873 Год назад

В жизни не верстала сайты и не думала в эту сторону. Но ваши уроки вдохновляют. Рекомендации ютуба хорошо сработали🌸

@alsusayfulina1865 Год назад

Очень классный урок😃 Прошла его с большим удовольствием, впервые использовала библиотеку gsap. Порадовало качество материала. Спасибо!

@silae6483 Год назад

В изумлении от вашего урока, интересная тема, сайт, анимации, спасибо вам за прекрасный урок!

@kashif_i Год назад

Love the work, love to see more GSAP related videos. Keep it up.

@xgiha Год назад

Actually i couldn't understand any single word you said but I folowed the tutorial until end. This is an amazing one. I never ever saw such a tutorial like this. So in love with this. Thank you. Please do more like these 😍❤

@killd0z3r 9 месяцев назад

Use auto translation feature

@pajambient Год назад

Спасибо огромное за материалы! Приобрел полный курс!

@heathery2997 11 месяцев назад

Ваши видео очень вдохновляют, все объясняется максимлаьно доступным языком QwQ

@burla4enko Год назад

Блин, супер! Я только учусь и вот эти "модные" фишки просто супер для будущего портфолио и применения в каких-нибудь проектах! Спасибо, Мужик, очень крутые у тебя видосы!

@MaciFree Год назад

крутяк. давайте больше уроков по GSAP 💪

@user-ii9fz3be1r 6 месяцев назад

Просто космос! Большое спасибо за урок

@arslan-n Год назад

это восхитительно🙌 благодарю ✌✌😉😉

@andreylegkostup7112 Год назад

Каждый новый урок шедевр!

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

Спасибо большое за вашу работу! После того как увидела видео у вас на канале, сразу подписалась. Все очень классно и понятно.

@Sergey_D. Год назад

Лайк не глядя. Контент супер!

@shameless-samurai Год назад

Хоспаде, это шедевр! Спасибо!

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

Очень крутой урок, спасибо огромное и голос приятный )))

@user-px6bp3cr4l 5 месяцев назад

Спасибо большое за урок , все получилось очень круто делайте побольше таких видео. Так держать.

@goe4t Год назад

Очень красиво одновременно и круто спасибо

@virtuoz-ru Год назад

Спасибо за крутой урок. GSAP это очень интересная библиотека.

@BehindTheYellowTapeAF Год назад

Побольше бы таких видео, вообще взять бы сайты которые выиграли награды и разобрать как они сделаны

@riga8393 Год назад

Пушка бомба, все просто и доходчиво

@SvirkoSam Год назад

Годнота подъехала ! ❤

@blackhok1761 8 месяцев назад

zdarova bratan. mochni chotki polezni kontent )) Good job!!!

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

So Amazing! 😦 Wonderfull GSAP

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

просто супер, у меня все получилось. Html, css я знала уже, поэтому все поняла по этой части. Но сам джаваскрипт пока темный лес для меня, пришлось просто тупо пвоторить как на видео. Сайт заработал как надо, это очень красиво. Теперь конечно хочется изучить джаваскрипт и библиотеки, чтобы понимать что пишешь в скрипте. Канал супер!!

@vimvexvimvex8780 Год назад

Здорово. спасибо за доходчивое обьяснение и ваше время. лайк+подписка

@sonus4520 Год назад

awesome, hope there will be more tutorial series 🤩

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

Merci infiniment de partager vos connaissances pour ce magnifique tutoriel . continuez comme cela , merci .

@makc6878 Год назад

Все как всегда, прекрасная подача материала, и замечательный пример для вдохновения! Спасибо! P.S. Вчера мучали Chat GPT, что бы он написал верстку, стили и анимацию как у тебя. Я блин быстрее с урока твоего сверстал, долго его мучать пришлось, но не домучали )))

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

Круто! Еще пожалуйста)

@user-sh3np2rh5x 11 месяцев назад

Спасибо за интересный урок!

@temikflookin Год назад

Замечательный урок!

@MissisJ Год назад

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

@wdm Год назад

А зачем мне миллион подписчиков? У меня есть вы и я этому счастлив) Вам - успехов в обучении!)

@user-bq4bg9rl7t 3 месяца назад

Потому что саморазвитием занимаются не миллионы. Миллионы смотрят, как рандомный чел блюёт разноцветной блевотиной. А у подобных каналов очень мало подписчиков.

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

@ привет, сделай видео пожалуйста как на сайт html добавить способы оплаты например юмани, чтобы при нажатии кнопки можно было купить товар или например систему регистрации пользователя на сайте, ты очень крут я подписался и с меня лайк

@palach_666 Год назад

Урок супер!

@vitalikchaikovsky4335 Год назад

Я вже пару відео передивився і їх реалізував. Це просто amazing. Дякую вам за такі круті відеоуроки)

@good_asfuck Год назад

Круто ☺️

@richthemat2970 Год назад

просто ле-ген-да , большое спасибо !!!

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

Круто! Спасибо!

@ferryterry1873 9 месяцев назад

Случайно наткнулся на канал и понял , что на курсах не учат , вообще ничему )) . Спасибо за видео , очень полезно

@ll_liiik Год назад

Смотрю твои ролики когда кушаю, я такими темпами программистом стану

@Alaz21 Год назад

I'm From Ethiopia and I wish I understand Russian but All my respect goes to you bro amazing idea and best tutorial "Urraaa"

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

Очень круто!

@alijanulanov Год назад

на просторах ютуба впервые вижу что у такого офигенного ютубера так мало просмотров, не бросай канал!

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

для такой узкой тематики, у него очень хороший актив на канале

@ElenaBabicheva Год назад

Мало? Это шутка?

@marchwebTec 8 месяцев назад

incredible! I'm following you brother, thanks for showing me this! greetings from Argentina!!

@user-my1qg6wn8c Месяц назад

Спасибо я студент и ты очень сильно мне помог я за год все твои видео посмотрел

@user-fd4gq4zj8p 10 месяцев назад

😮😮😮😮 невероятно 👏👏👏👏

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

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

@sergeybezumanuy8690 Год назад

Спасибо тебе большое!

@almaz.kamaliev Год назад

Лайк не глядя!

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

спасибо мужик!

@elizabethdruzhinina Год назад

Спасибо большое!!

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

спасибо за урок

@webdesigncodefrance Год назад

Thank u! You are the best !

@Beljamin Год назад

Браво!

@oct-zt2hk 11 месяцев назад

Very helpful video love from India ❤

@rahim6821 Год назад

Очень круто

@flexWebStudio Год назад

Круто!

@user-ir5yf8en1e 5 месяцев назад

Для тех, у кого пропадает заголовок "Creative scroll": в css .main-title bottom: 12vh; заменить на отступ сверху "top: 40vh;" При работе wrapper считывает всю страницу целиком, соответственно .main-title с bottom падает вниз страницы. Тестировал Chrome, Edge Урок класс, спасибо!

@dmitrychaiko8930 6 месяцев назад

Огонь!

@BryxOFF Год назад

супер!😎🤓

@user-fe5hx3vx9r 11 месяцев назад

Спасибо ))

@user-ey8ys8on5p 11 месяцев назад

спасибо,огромное

@yanesbn Год назад

Вы Бог верстки точно.

@user-pq6gx2vo3b 8 месяцев назад

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

@deepak8586 Год назад

Awesome!!

@wdm Год назад

Друзья! Пишите, какие ещё крутые примеры хотели бы видеть)

@ghtuykshtywor Год назад

Привет, Алексей, записывай все что нравится, мы смотрим все уроки. Я лично в свое время прошел ваши платные курсы и их хватило что б устроится в вебстудию.

@oleghamster2434 Год назад

Интересно увидеть, как делать сложную svg анимацию.

@doethis Год назад

Доброго времени суток, хотелось бы увидеть как сделать так же как и в презентации айфон 14 на официальном сайте айфона

@NlCKY Год назад

Хотелось бы увидеть, анимации с сайта Hello Monday 😊

@yanesbn Год назад

А можешь сделать сайт ввиде игры ?

@pungushe Год назад

Спасибо

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

Кайф)

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

Просто огонь 🔥🔥🔥!!! Возможно у Вас есть уроки, с похожим сайтом, но чтобы вверху было неподвижное меню?)))

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

Спасибо! Навскидку не вспомню, есть или нет. Но делается это довольно легко. У полосы меню - position: fixed; top: 0; width: 100%

@unicoxr5tj417 Год назад

красиво

@SnookezChannel 8 месяцев назад

Боже у меня оргазм глаз, сделаю на Вашем примере, сайт визитку Поддержку подпиской и лайком.

@MicroDobb Год назад

можно брать примеры как из художественных сайтов тильды или очень интересна тема по созданию аудиоплееру (особенно с плейлистом) и всякими красивостями! Может что-то Вам из тем подойдет

@UrDevDose Год назад

Bro didn;t understand a word but still really amazing tutorial and project

@InnAlexRio Год назад

Superrr Gracias

@nguyetluu2060 Год назад

hope you make english vesion soon. thank u

@hell1207 9 месяцев назад

From kerala😊❤

@koshatskaya9951 Год назад

😍😍😍

@BoomKillazz Год назад

💣💣💣

@Xhami888 11 месяцев назад

I wonder what he is saying, intresting tutorial by the way 🤔

@I248 Год назад

как ты вопремя, спасибо!тт!

@bmlol Год назад

не плохо, а будет что-то связанное с анимацией, которая следует за мышкой с эффектом паралакса

@wdm Год назад

Да, такой урок есть в планах. Вообще, пишите, не стесняйтесь, что хотели бы видеть, всё покажу и расскажу)

@piligrim_7 Год назад

Привет, а как сделать такой же хороший звук ?

@ferliantino Год назад

Heyy hello, do you have english version of this video? I really need this

@DENDYTWOO Год назад

интересно, а как это во время дизайна анимируют?

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

Очень круто,но для новичков как я очень сложно.Что нибудь по проще и по подробнее.

@reinhard3821 Год назад

Подскажите пожалуйста, а чтобы работали плавный скрол и параллакс нужно отдельно скачивать плагин GSAP во вкладке расширения в vs Code? Потому что столкнулся с проблемой, что код написан так же как и у автора, только вот никаких эффектов нет, поэтому решил уточнить, заранее спасибо за ответ

@wdm Год назад

Здравствуйте. Нет, плагин GSAP для VS Code скачивать не нужно, просто выполняйте урок по инструкциям и у вас всё должно получиться. Еще посмотрите ошибки в консоли, возможно, там будет подсказка, где у вас ошибка. В целом, если вы по уроку подключили скрипты и пути правильные, никаких проблем быть не должно) Перепроверьте всё внимательно.

@reinhard3821 Год назад

@@wdm доброго времени суток, да действительно все получилось, пришлось немного покопаться, спасибо за ваш труд и ваши уроки, было очень интересно попробовать себя в новом деле, а то я раньше только рисовал дизайны, теперь вот и сверстал немного, ещё раз спасибо

@ninja9455 Год назад

Шаблон то сделать по таким шикарным видео - урокам легко и просто, а что делать с хостингом и доменом, как подобрать хороший хостинг и домен для сайта с таким крутым дизайном, желательно чтобы и хостинг и домен можно было получить бесплатно если это возможно

@wdm Год назад

На бесплатном хостинге вообще не рекомендую ничего размещать, потеряете всё, получите пессимизацию поисковых систем и кучу других проблем. Я использую уже много лет хостинг SpaceWeb для своих проектов, в том числе и для WebDesign Master: wd-m.ru/sweb

@YoungMorty 9 месяцев назад

в какой программе пишешь коды?

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

В основном работаю в Visual Studio Code. Вот в этом уроке изучали и настраивали его: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-JSGPd1E16-o.html

@alenamitrofanova4361 6 месяцев назад

Спасибо за урок! Узнала очень много новых фишек:) 😍😍 И у вас очень сексуальный голос😝

@Shukhratov 5 месяцев назад

А можно ли делать это --index для всех вещей для адаптации, просто дать и все на любой экране нормально?

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

Да, без проблем, он для того и нужен) Единственное, поработать с размером некоторых элементов интерфейса все равно придется индивидуально. Например, шрифт для чтения, обычный параграф или заголовки на малых разрешениях могут быть мелковаты.

@ms_craft4784 6 месяцев назад

Можете помочь пожалуйста, мы же на разные экраны оптимизировали css с помощью переменной, а как такое сделать в js? Просто если сайт который я делаю на ноуте откроют на пк то анимация будет другая (типо сменится цвет на 1000 стоит, но у них это будет как мои 800), помогите пожалуйста с такой переменной под js

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

Привяжите зависимые от ширины и высоты экрана значения к переменной --index

@og8946 Год назад

Можно что то полегче gsap? Например locomotive scroll

@wdm Год назад

Рекомендую именно Gsap, так как ядро и плагины очень хорошо друг в друга интегрируются, можно управлять любым параметром в процессе. Если полегче, да, можете конечно использовать locomotive scroll, но плавность абсолютно неуправляемая, метод движения совершенно другой, более резкий и никак это не пофиксить, параметры отсутствуют нужные.

@LenovoLenovo-lm1lh Год назад

Доброго времени суток. Объясните пожалуйста почему в скобках мы указываем два класса что пройтись циклом и gallery__left и gallery__item. В js мы же указываем массив и идём по нему, а не указываем дочерние элементы. Не много не поняла, спасибо за ранее..

@wdm Год назад

Здравствуйте. В JS мы работаем с двумя селекторами: .gallery__left .gallery__item .gallery__right .gallery__item Для того, чтобы создать 2 цикла и работать с правой и левой стороной отдельно.

@LenovoLenovo-lm1lh Год назад

@@wdm У вас супер канал. Вдохновлена вашими видео, уже не одно смогла реализовать и попробовать с коррекцией под свой pet проект.Вы очень большой молодец! Подскажите пожалуйста где можно больше информации визуальной получить как работать с gsap или возможно какие то курсы посоветуйте? Спасибо большое)