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

Поделиться
HTML-код
  • Опубликовано: 24 дек 2024

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

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

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

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

  • @m_mariya_mari
    @m_mariya_mari Год назад +6

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

  • @MissisJ
    @MissisJ Год назад +66

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

    • @wdm
      @wdm  Год назад +34

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

    • @СтудияЯЛ
      @СтудияЯЛ 10 месяцев назад +1

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

    • @asus99
      @asus99 9 месяцев назад +2

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

  • @wdm
    @wdm  Год назад +41

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

    • @ghtuykshtywor
      @ghtuykshtywor Год назад +5

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

    • @oleghamster2434
      @oleghamster2434 Год назад +3

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

    • @doethis
      @doethis Год назад +3

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

    • @NlCKY
      @NlCKY Год назад +2

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

    • @yanesbn
      @yanesbn Год назад +2

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

  • @helenarara8873
    @helenarara8873 Год назад +13

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

  • @alijanulanov
    @alijanulanov Год назад +6

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

    • @Aleksandr-w4e
      @Aleksandr-w4e Год назад

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

    • @ElenaBabicheva
      @ElenaBabicheva Год назад

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

  • @тачми-й5б
    @тачми-й5б 9 месяцев назад +1

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

  • @alenadecor5754
    @alenadecor5754 Год назад +4

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

  • @ferryterry1873
    @ferryterry1873 Год назад +3

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

  • @hotmitrofan
    @hotmitrofan Год назад +3

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

  • @ll_liiik
    @ll_liiik Год назад +2

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

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

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

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

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

  • @burla4enko
    @burla4enko Год назад +4

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

  • @没有付出就没有收获
    @没有付出就没有收获 Год назад +6

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

  • @кортескортесович
    @кортескортесович Год назад +1

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

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

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

  • @Anastasia-if3bi
    @Anastasia-if3bi 6 месяцев назад +1

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

  • @heathery2997
    @heathery2997 Год назад +4

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

  • @SvirkoSam
    @SvirkoSam Год назад +2

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

  • @Sergey_D.
    @Sergey_D. Год назад +3

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

  • @kashif_i
    @kashif_i Год назад +2

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

  • @goe4t
    @goe4t Год назад +5

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

  • @silae6483
    @silae6483 Год назад +2

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

  • @Alexei-rb9yy
    @Alexei-rb9yy Год назад +5

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

  • @pajambient
    @pajambient Год назад

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

  • @alsusayfulina1865
    @alsusayfulina1865 Год назад +1

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

  • @MaciFree
    @MaciFree Год назад +16

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

  • @riga8393
    @riga8393 Год назад +1

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

  • @yanesbn
    @yanesbn Год назад +3

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

  • @ummaindast8986
    @ummaindast8986 Год назад +1

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

  • @VysotskovaArt
    @VysotskovaArt Год назад

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

  • @shameless-samurai
    @shameless-samurai Год назад +1

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

  • @marchwebTec
    @marchwebTec Год назад +1

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

  • @PymReX
    @PymReX Год назад +1

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

  • @arslan-n
    @arslan-n Год назад +3

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

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

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

  • @palach_666
    @palach_666 Год назад +2

    Урок супер!

  • @andreylegkostup7112
    @andreylegkostup7112 Год назад

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

  • @makc6878
    @makc6878 Год назад +2

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

  • @dmitrychaiko8930
    @dmitrychaiko8930 Год назад +1

    Огонь!

  • @vimvexvimvex8780
    @vimvexvimvex8780 Год назад +1

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

  • @ritikmanta0028
    @ritikmanta0028 Год назад +1

    Very helpful video love from India ❤

  • @biscvie
    @biscvie Год назад

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

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

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

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

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

  • @almaz.kamaliev
    @almaz.kamaliev Год назад +1

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

  • @temikflookin
    @temikflookin Год назад +1

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

  • @vitalikchaikovsky4335
    @vitalikchaikovsky4335 Год назад +2

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

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

  • @deepak8586
    @deepak8586 Год назад +2

    Awesome!!

  • @rahim6821
    @rahim6821 Год назад +1

    Очень круто

  • @Бегущаярысью
    @Бегущаярысью Год назад

    Очень круто!

  • @richthemat2970
    @richthemat2970 Год назад

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

  • @flexWebStudio
    @flexWebStudio Год назад

    Круто!

  • @bmlol
    @bmlol Год назад +4

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

    • @wdm
      @wdm  Год назад +9

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

  • @alexvimpel9015
    @alexvimpel9015 10 месяцев назад +1

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

  • @PreVentivno
    @PreVentivno Год назад

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

  • @webdesigncodefrance
    @webdesigncodefrance Год назад +1

    Thank u! You are the best !

  • @UrDevDose
    @UrDevDose Год назад +1

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

  • @hell1207
    @hell1207 Год назад +2

    From kerala😊❤

  • @noviy-zavet888
    @noviy-zavet888 Год назад +1

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

  • @SamirSafarov-c9m
    @SamirSafarov-c9m Год назад +1

    Спасибо ))

  • @ferliantino
    @ferliantino Год назад +1

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

  • @Beljamin
    @Beljamin Год назад

    Браво!

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

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

  • @МаксимБоле
    @МаксимБоле Год назад

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

  • @ms_craft4784
    @ms_craft4784 Год назад +1

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

    • @wdm
      @wdm  Год назад +1

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

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

    Кайф)

  • @BoomKillazz
    @BoomKillazz Год назад

    💣💣💣

  • @pungushe
    @pungushe Год назад +1

    Спасибо

  • @elizabethdruzhinina
    @elizabethdruzhinina Год назад

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

  • @unicoxr5tj417
    @unicoxr5tj417 Год назад

    красиво

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

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

  • @nguyetluu2060
    @nguyetluu2060 Год назад

    hope you make english vesion soon. thank u

  • @DENDYTWOO
    @DENDYTWOO Год назад

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

  • @Shukhratov
    @Shukhratov Год назад

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

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

  • @reinhard3821
    @reinhard3821 Год назад

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

    • @wdm
      @wdm  Год назад

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

    • @reinhard3821
      @reinhard3821 Год назад +1

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

  • @taraswww777
    @taraswww777 Год назад +2

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

    • @wdm
      @wdm  Год назад +2

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

    • @frizovshik
      @frizovshik Месяц назад

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

  • @BryxOFF
    @BryxOFF Год назад

    супер!😎🤓

  • @deeze7096
    @deeze7096 Год назад

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

    • @wdm
      @wdm  Год назад

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

    • @soundofsoul8731
      @soundofsoul8731 Год назад +1

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

  • @ЯЛЮБЛЮТЕБЯ-й7х
    @ЯЛЮБЛЮТЕБЯ-й7х Год назад

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

    • @wdm
      @wdm  Год назад

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

    • @ЯЛЮБЛЮТЕБЯ-й7х
      @ЯЛЮБЛЮТЕБЯ-й7х Год назад

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

    • @wdm
      @wdm  Год назад +1

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

  • @Xhami888
    @Xhami888 Год назад

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

  • @DJUtopia17
    @DJUtopia17 Год назад

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

    • @wdm
      @wdm  Год назад

      В основном работаю в Visual Studio Code. Вот в этом уроке изучали и настраивали его: ruclips.net/video/JSGPd1E16-o/видео.html

  • @og8946
    @og8946 Год назад

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

    • @wdm
      @wdm  Год назад +3

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

  • @kosha9951
    @kosha9951 Год назад

    😍😍😍

  • @I248
    @I248 Год назад

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

  • @InnAlexRio
    @InnAlexRio Год назад

    Superrr Gracias

  • @MicroDobb
    @MicroDobb Год назад

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

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

  • @artcip5715
    @artcip5715 Год назад

    Для каких сайтов употребляются такие анимации?

    • @wdm
      @wdm  Год назад

      Для имиджевых. Это называется имиджевый сайт. Иногда и в других проектах, где это обосновано UX.

  • @lamer7905
    @lamer7905 Год назад

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

    • @wdm
      @wdm  Год назад

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

    • @lamer7905
      @lamer7905 Год назад

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

  • @alenamitrofanova4361
    @alenamitrofanova4361 Год назад +1

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