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

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ม.ค. 2025

ความคิดเห็น •

  • @ertar0
    @ertar0 ปีที่แล้ว +65

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

  • @xgiha
    @xgiha ปีที่แล้ว +91

    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
      @killd0z3r ปีที่แล้ว +5

      Use auto translation feature

  • @MissisJ
    @MissisJ ปีที่แล้ว +66

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

    • @wdm
      @wdm  ปีที่แล้ว +34

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

    • @СтудияЯЛ
      @СтудияЯЛ 11 หลายเดือนก่อน +1

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

    • @asus99
      @asus99 10 หลายเดือนก่อน +2

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

  • @m_mariya_mari
    @m_mariya_mari ปีที่แล้ว +7

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

  • @helenarara8873
    @helenarara8873 ปีที่แล้ว +13

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

  • @Anastasia-if3bi
    @Anastasia-if3bi 7 หลายเดือนก่อน +1

    Огромное спасибо за такую ценную работу!!! Все объясняется очень доступно и понятно!!! Мне очень нравится учиться именно по вашим видео!!! Они ❤‍🔥❤‍🔥❤‍🔥🔥🔥🔥

  • @alijanulanov
    @alijanulanov ปีที่แล้ว +6

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

    • @Aleksandr-w4e
      @Aleksandr-w4e ปีที่แล้ว

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

    • @ElenaBabicheva
      @ElenaBabicheva ปีที่แล้ว

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

  • @alenadecor5754
    @alenadecor5754 ปีที่แล้ว +4

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

  • @hotmitrofan
    @hotmitrofan ปีที่แล้ว +3

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

  • @Alaz21
    @Alaz21 ปีที่แล้ว +1

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

  • @burla4enko
    @burla4enko ปีที่แล้ว +4

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

  • @nadejda_num5803
    @nadejda_num5803 ปีที่แล้ว +4

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

  • @тачми-й5б
    @тачми-й5б 9 หลายเดือนก่อน +1

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

  • @ferryterry1873
    @ferryterry1873 ปีที่แล้ว +3

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

  • @vitalikchaikovsky4335
    @vitalikchaikovsky4335 ปีที่แล้ว +2

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

  • @кортескортесович
    @кортескортесович ปีที่แล้ว +1

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

  • @blackhok1761
    @blackhok1761 ปีที่แล้ว +1

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

  • @heathery2997
    @heathery2997 ปีที่แล้ว +4

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

  • @没有付出就没有收获
    @没有付出就没有收获 ปีที่แล้ว +6

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

  • @MaciFree
    @MaciFree ปีที่แล้ว +16

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

  • @jefb3145
    @jefb3145 ปีที่แล้ว +1

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

  • @alsusayfulina1865
    @alsusayfulina1865 ปีที่แล้ว +1

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

  • @НиколайТвердохлеб-э1ш
    @НиколайТвердохлеб-э1ш ปีที่แล้ว +1

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

  • @Alexei-rb9yy
    @Alexei-rb9yy ปีที่แล้ว +5

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

  • @kashif_i
    @kashif_i ปีที่แล้ว +2

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

  • @ll_liiik
    @ll_liiik ปีที่แล้ว +2

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

  • @makc6878
    @makc6878 ปีที่แล้ว +2

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

  • @SvirkoSam
    @SvirkoSam ปีที่แล้ว +2

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

  • @Sergey_D.
    @Sergey_D. ปีที่แล้ว +3

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

  • @silae6483
    @silae6483 ปีที่แล้ว +2

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

  • @ЯнаТимофеева-ш7и
    @ЯнаТимофеева-ш7и 5 หลายเดือนก่อน +1

    Спасибо за видео. Все получилось. 🍥🎡🎠

  • @arslan-n
    @arslan-n ปีที่แล้ว +3

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

  • @ИльяСвиридов-ы2э
    @ИльяСвиридов-ы2э ปีที่แล้ว

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

    • @rustam6128
      @rustam6128 3 หลายเดือนก่อน

      спасибо!

  • @ummaindast8986
    @ummaindast8986 ปีที่แล้ว +1

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

  • @marchwebTec
    @marchwebTec ปีที่แล้ว +1

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

  • @VysotskovaArt
    @VysotskovaArt ปีที่แล้ว

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

  • @goe4t
    @goe4t ปีที่แล้ว +5

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

  • @pajambient
    @pajambient ปีที่แล้ว

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

  • @ritikmanta0028
    @ritikmanta0028 ปีที่แล้ว +1

    Very helpful video love from India ❤

  • @riga8393
    @riga8393 ปีที่แล้ว +1

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

  • @andreylegkostup7112
    @andreylegkostup7112 ปีที่แล้ว

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

  • @ЭльвираТобокеловна-ц6ю
    @ЭльвираТобокеловна-ц6ю ปีที่แล้ว +1

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

  • @shameless-samurai
    @shameless-samurai ปีที่แล้ว +1

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

  • @yanesbn
    @yanesbn ปีที่แล้ว +3

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

  • @vimvexvimvex8780
    @vimvexvimvex8780 ปีที่แล้ว +1

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

  • @Max_Pl78
    @Max_Pl78 8 หลายเดือนก่อน +1

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

    • @wdm
      @wdm  8 หลายเดือนก่อน +2

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

  • @sonus4520
    @sonus4520 ปีที่แล้ว

    awesome, hope there will be more tutorial series 🤩

  • @biscvie
    @biscvie ปีที่แล้ว

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

  • @wdm
    @wdm  ปีที่แล้ว +41

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

    • @ghtuykshtywor
      @ghtuykshtywor ปีที่แล้ว +5

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

    • @oleghamster2434
      @oleghamster2434 ปีที่แล้ว +3

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

    • @doethis
      @doethis ปีที่แล้ว +3

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

    • @NlCKY
      @NlCKY ปีที่แล้ว +2

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

    • @yanesbn
      @yanesbn ปีที่แล้ว +2

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

  • @PymReX
    @PymReX ปีที่แล้ว +1

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

  • @dmitrychaiko8930
    @dmitrychaiko8930 ปีที่แล้ว +1

    Огонь!

  • @palach_666
    @palach_666 ปีที่แล้ว +2

    Урок супер!

  • @temikflookin
    @temikflookin ปีที่แล้ว +1

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

  • @ВасилийТеркин-л4з2ф
    @ВасилийТеркин-л4з2ф ปีที่แล้ว

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

  • @deepak8586
    @deepak8586 ปีที่แล้ว +2

    Awesome!!

  • @almaz.kamaliev
    @almaz.kamaliev ปีที่แล้ว +1

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

  • @webdesigncodefrance
    @webdesigncodefrance ปีที่แล้ว +1

    Thank u! You are the best !

  • @alexvimpel9015
    @alexvimpel9015 10 หลายเดือนก่อน +1

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

  • @hell1207
    @hell1207 ปีที่แล้ว +2

    From kerala😊❤

  • @richthemat2970
    @richthemat2970 ปีที่แล้ว

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

  • @rahim6821
    @rahim6821 ปีที่แล้ว +1

    Очень круто

  • @Бегущаярысью
    @Бегущаярысью ปีที่แล้ว

    Очень круто!

  • @PreVentivno
    @PreVentivno ปีที่แล้ว

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

  • @UrDevDose
    @UrDevDose ปีที่แล้ว +1

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

  • @SamirSafarov-c9m
    @SamirSafarov-c9m ปีที่แล้ว +1

    Спасибо ))

  • @ferliantino
    @ferliantino ปีที่แล้ว +1

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

  • @noviy-zavet888
    @noviy-zavet888 ปีที่แล้ว +1

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

  • @flexWebStudio
    @flexWebStudio ปีที่แล้ว

    Круто!

  • @bmlol
    @bmlol ปีที่แล้ว +4

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

    • @wdm
      @wdm  ปีที่แล้ว +9

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

  • @простоСулейманов
    @простоСулейманов ปีที่แล้ว

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

  • @BoomKillazz
    @BoomKillazz ปีที่แล้ว

    💣💣💣

  • @alenamitrofanova4361
    @alenamitrofanova4361 ปีที่แล้ว +1

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

  • @МаксимБоле
    @МаксимБоле ปีที่แล้ว

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

  • @elizabethdruzhinina
    @elizabethdruzhinina ปีที่แล้ว

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

  • @BryxOFF
    @BryxOFF ปีที่แล้ว

    супер!😎🤓

  • @АндрейФионин-в1ъ
    @АндрейФионин-в1ъ ปีที่แล้ว

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

  • @pungushe
    @pungushe ปีที่แล้ว +1

    Спасибо

  • @ms_craft4784
    @ms_craft4784 ปีที่แล้ว +1

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

    • @wdm
      @wdm  ปีที่แล้ว +1

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

  • @Beljamin
    @Beljamin ปีที่แล้ว

    Браво!

  • @evolution_31
    @evolution_31 10 หลายเดือนก่อน

    Кайф)

  • @nguyetluu2060
    @nguyetluu2060 ปีที่แล้ว

    hope you make english vesion soon. thank u

  • @InnAlexRio
    @InnAlexRio ปีที่แล้ว

    Superrr Gracias

  • @Xhami888
    @Xhami888 ปีที่แล้ว

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

  • @buziyborni
    @buziyborni ปีที่แล้ว

    Wow i love your channel but I don't understand the language. Please can you make English versions too this may bring more people to like your channel just like i did

  • @unicoxr5tj417
    @unicoxr5tj417 ปีที่แล้ว

    красиво

  • @kosha9951
    @kosha9951 ปีที่แล้ว

    😍😍😍

  • @reinhard3821
    @reinhard3821 ปีที่แล้ว

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

    • @wdm
      @wdm  ปีที่แล้ว

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

    • @reinhard3821
      @reinhard3821 ปีที่แล้ว +1

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

  • @Shukhratov
    @Shukhratov ปีที่แล้ว

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

    • @wdm
      @wdm  ปีที่แล้ว +1

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

  • @DENDYTWOO
    @DENDYTWOO ปีที่แล้ว

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

  • @MicroDobb
    @MicroDobb ปีที่แล้ว

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

  • @LenovoLenovo-lm1lh
    @LenovoLenovo-lm1lh ปีที่แล้ว

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

    • @wdm
      @wdm  ปีที่แล้ว

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

    • @LenovoLenovo-lm1lh
      @LenovoLenovo-lm1lh ปีที่แล้ว

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

  • @МиржалолМирхомитов-г4о
    @МиржалолМирхомитов-г4о ปีที่แล้ว +4

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

  • @I248
    @I248 ปีที่แล้ว

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

  • @og8946
    @og8946 ปีที่แล้ว

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

    • @wdm
      @wdm  ปีที่แล้ว +3

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

  • @deeze7096
    @deeze7096 ปีที่แล้ว

    Почему то на создание скрола в js пропадает ползунок для скола, с чем это может быть связано?

    • @wdm
      @wdm  ปีที่แล้ว

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

    • @soundofsoul8731
      @soundofsoul8731 ปีที่แล้ว +1

      Можливо ви задали висоту в блоку .content height: 100%; в мене таке було (було потрібно), але потім прибрав і запрацювало. Gsap сам обирає адаприну висоту яка змінюється.
      .content {
      width: 100%;
      height: 100%
      display: flex;
      flex-direction: column;
      position: relative;
      }

  • @taraswww777
    @taraswww777 ปีที่แล้ว +2

    Почему многие используют border-radius:8px ?
    Почему не 10?

    • @wdm
      @wdm  ปีที่แล้ว +2

      Выглядит хорошо в большинстве кейсов) Почему не 9 или не 7 вопрос риторический.

    • @frizovshik
      @frizovshik หลายเดือนก่อน

      ​ @wdm Потому что многие дизайнеры и разработчики используют систему отступов, скруглений и т.п, и так уж прижилось, что самая практичная это 0-4-8-12 и так далее.

  • @DJUtopia17
    @DJUtopia17 ปีที่แล้ว

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

    • @wdm
      @wdm  ปีที่แล้ว

      В основном работаю в Visual Studio Code. Вот в этом уроке изучали и настраивали его: th-cam.com/video/JSGPd1E16-o/w-d-xo.html

  • @ВладимирЛапин-т6и
    @ВладимирЛапин-т6и ปีที่แล้ว

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

  • @ЯЛЮБЛЮТЕБЯ-й7х
    @ЯЛЮБЛЮТЕБЯ-й7х ปีที่แล้ว

    Как сделать чтобы также текст плавно вводился и удалялся?

    • @wdm
      @wdm  ปีที่แล้ว

      В редакторе кода?

    • @ЯЛЮБЛЮТЕБЯ-й7х
      @ЯЛЮБЛЮТЕБЯ-й7х ปีที่แล้ว

      @@wdm да у вас там плавно старается и плавно вводится буквы/символы

    • @wdm
      @wdm  ปีที่แล้ว +1

      В Visual Studio Code зайдите в Файл - Настройки - Параметры
      Найдите параметр cursorSmoothCaretAnimation и выберите значение on