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

Поділитися
Вставка
  • Опубліковано 9 січ 2025

КОМЕНТАРІ • 149

  • @ertar0
    @ertar0 Рік тому +65

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

  • @m_mariya_mari
    @m_mariya_mari Рік тому +7

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

  • @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 добавить способы оплаты например юмани, чтобы при нажатии кнопки можно было купить товар или например систему регистрации пользователя на сайте, ты очень крут я подписался и с меня лайк

  • @helenarara8873
    @helenarara8873 Рік тому +13

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

  • @alijanulanov
    @alijanulanov Рік тому +6

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

    • @Aleksandr-w4e
      @Aleksandr-w4e Рік тому

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

    • @ElenaBabicheva
      @ElenaBabicheva Рік тому

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

  • @hotmitrofan
    @hotmitrofan Рік тому +3

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

  • @ferryterry1873
    @ferryterry1873 Рік тому +3

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

  • @burla4enko
    @burla4enko Рік тому +4

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

  • @wdm
    @wdm  Рік тому +41

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

    • @ghtuykshtywor
      @ghtuykshtywor Рік тому +5

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

    • @oleghamster2434
      @oleghamster2434 Рік тому +3

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

    • @doethis
      @doethis Рік тому +3

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

    • @NlCKY
      @NlCKY Рік тому +2

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

    • @yanesbn
      @yanesbn Рік тому +2

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

  • @тачми-й5б
    @тачми-й5б 9 місяців тому +1

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

  • @没有付出就没有收获
    @没有付出就没有收获 Рік тому +6

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

  • @nadejda_num5803
    @nadejda_num5803 Рік тому +4

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

  • @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"

  • @alenadecor5754
    @alenadecor5754 Рік тому +4

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

  • @MaciFree
    @MaciFree Рік тому +16

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

  • @Anastasia-if3bi
    @Anastasia-if3bi 7 місяців тому +1

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

  • @кортескортесович

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

  • @heathery2997
    @heathery2997 Рік тому +4

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

  • @ИльяСвиридов-ы2э

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

  • @ll_liiik
    @ll_liiik Рік тому +2

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

  • @blackhok1761
    @blackhok1761 Рік тому +1

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

  • @jefb3145
    @jefb3145 Рік тому +1

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

  • @vitalikchaikovsky4335
    @vitalikchaikovsky4335 Рік тому +2

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

  • @НиколайТвердохлеб-э1ш

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

  • @Alexei-rb9yy
    @Alexei-rb9yy Рік тому +5

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

  • @silae6483
    @silae6483 Рік тому +2

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

  • @alsusayfulina1865
    @alsusayfulina1865 Рік тому +1

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

  • @Sergey_D.
    @Sergey_D. Рік тому +3

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

  • @goe4t
    @goe4t Рік тому +5

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

  • @makc6878
    @makc6878 Рік тому +2

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

  • @kashif_i
    @kashif_i Рік тому +2

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

  • @ummaindast8986
    @ummaindast8986 Рік тому +1

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

  • @arslan-n
    @arslan-n Рік тому +3

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

  • @pajambient
    @pajambient Рік тому

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

  • @riga8393
    @riga8393 Рік тому +1

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

  • @marchwebTec
    @marchwebTec Рік тому +1

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

  • @andreylegkostup7112
    @andreylegkostup7112 Рік тому

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

  • @SvirkoSam
    @SvirkoSam Рік тому +2

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

  • @VysotskovaArt
    @VysotskovaArt Рік тому

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

  • @shameless-samurai
    @shameless-samurai Рік тому +1

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

  • @PymReX
    @PymReX Рік тому +1

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

  • @vimvexvimvex8780
    @vimvexvimvex8780 Рік тому +1

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

  • @ЯнаТимофеева-ш7и
    @ЯнаТимофеева-ш7и 5 місяців тому +1

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

  • @Max_Pl78
    @Max_Pl78 9 місяців тому +1

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

    • @wdm
      @wdm  9 місяців тому +2

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

  • @ritikmanta0028
    @ritikmanta0028 Рік тому +1

    Very helpful video love from India ❤

  • @yanesbn
    @yanesbn Рік тому +3

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

  • @palach_666
    @palach_666 Рік тому +2

    Урок супер!

  • @temikflookin
    @temikflookin Рік тому +1

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

  • @sonus4520
    @sonus4520 Рік тому

    awesome, hope there will be more tutorial series 🤩

  • @biscvie
    @biscvie Рік тому

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

  • @ВасилийТеркин-л4з2ф

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

  • @ЭльвираТобокеловна-ц6ю

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

  • @richthemat2970
    @richthemat2970 Рік тому

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

  • @dmitrychaiko8930
    @dmitrychaiko8930 Рік тому +1

    Огонь!

  • @almaz.kamaliev
    @almaz.kamaliev Рік тому +1

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

  • @UrDevDose
    @UrDevDose Рік тому +1

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

  • @Бегущаярысью
    @Бегущаярысью Рік тому

    Очень круто!

  • @PreVentivno
    @PreVentivno Рік тому

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

  • @bmlol
    @bmlol Рік тому +4

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

    • @wdm
      @wdm  Рік тому +9

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

  • @alexvimpel9015
    @alexvimpel9015 10 місяців тому +1

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

  • @rahim6821
    @rahim6821 Рік тому +1

    Очень круто

  • @webdesigncodefrance
    @webdesigncodefrance Рік тому +1

    Thank u! You are the best !

  • @noviy-zavet888
    @noviy-zavet888 Рік тому +1

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

  • @ms_craft4784
    @ms_craft4784 Рік тому +1

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

    • @wdm
      @wdm  Рік тому +1

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

  • @deepak8586
    @deepak8586 Рік тому +2

    Awesome!!

  • @flexWebStudio
    @flexWebStudio Рік тому

    Круто!

  • @ferliantino
    @ferliantino Рік тому +1

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

  • @МаксимБоле
    @МаксимБоле Рік тому

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

  • @простоСулейманов

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

  • @BoomKillazz
    @BoomKillazz Рік тому

    💣💣💣

  • @hell1207
    @hell1207 Рік тому +2

    From kerala😊❤

  • @Beljamin
    @Beljamin Рік тому

    Браво!

  • @elizabethdruzhinina
    @elizabethdruzhinina Рік тому

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

  • @МиржалолМирхомитов-г4о

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

  • @SamirSafarov-c9m
    @SamirSafarov-c9m Рік тому +1

    Спасибо ))

  • @DENDYTWOO
    @DENDYTWOO Рік тому

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

  • @reinhard3821
    @reinhard3821 Рік тому

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

    • @wdm
      @wdm  Рік тому

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

    • @reinhard3821
      @reinhard3821 Рік тому +1

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

  • @alenamitrofanova4361
    @alenamitrofanova4361 Рік тому +1

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

  • @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 или возможно какие то курсы посоветуйте? Спасибо большое)

  • @АндрейФионин-в1ъ

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

  • @Shukhratov
    @Shukhratov Рік тому

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

    • @wdm
      @wdm  Рік тому +1

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

  • @pungushe
    @pungushe Рік тому +1

    Спасибо

  • @nguyetluu2060
    @nguyetluu2060 Рік тому

    hope you make english vesion soon. thank u

  • @MicroDobb
    @MicroDobb Рік тому

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

  • @taraswww777
    @taraswww777 Рік тому +2

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

    • @wdm
      @wdm  Рік тому +2

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

    • @frizovshik
      @frizovshik Місяць тому

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

  • @deeze7096
    @deeze7096 Рік тому

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

    • @wdm
      @wdm  Рік тому

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

    • @soundofsoul8731
      @soundofsoul8731 Рік тому +1

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

  • @Xhami888
    @Xhami888 Рік тому

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

  • @og8946
    @og8946 Рік тому

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

    • @wdm
      @wdm  Рік тому +3

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

  • @ЯЛЮБЛЮТЕБЯ-й7х
    @ЯЛЮБЛЮТЕБЯ-й7х Рік тому

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

    • @wdm
      @wdm  Рік тому

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

    • @ЯЛЮБЛЮТЕБЯ-й7х
      @ЯЛЮБЛЮТЕБЯ-й7х Рік тому

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

    • @wdm
      @wdm  Рік тому +1

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

  • @unicoxr5tj417
    @unicoxr5tj417 Рік тому

    красиво

  • @I248
    @I248 Рік тому

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

  • @BryxOFF
    @BryxOFF Рік тому

    супер!😎🤓

  • @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

  • @lamer7905
    @lamer7905 Рік тому

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

    • @wdm
      @wdm  Рік тому

      Сомнительное решение для таких целей искать вдохновение в ТГ. Если есть Pinterest, специально для этого заточенный.

    • @lamer7905
      @lamer7905 Рік тому

      @@wdm Спасибо за совет

  • @ВладимирЛапин-т6и

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

  • @DJUtopia17
    @DJUtopia17 Рік тому

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

    • @wdm
      @wdm  Рік тому

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

  • @InnAlexRio
    @InnAlexRio Рік тому

    Superrr Gracias

  • @kosha9951
    @kosha9951 Рік тому

    😍😍😍