Создание сайта с крутой анимацией скролла (HTML CSS JavaScript)
Рет қаралды 287,824
Күн бұрынВсе курсы в одном комплекте: 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
@wdm Ай бұрын
💥 Все курсы в одном комплекте 👇👇👇 webdesign-master.ru/bundle_courses
@ertar0 Жыл бұрын
Мне кажется, что нужна какая-то кнопка для донатов на твоём сайте. Слишком крутые уроки
@user-kh7fv5rn1g Жыл бұрын
Я до сих пор помню ваши старые проекты. с которых я начинала. и даже некоторые специально искала на вашем канале. чтобы просмотреть еще раз. и каждый новый проект - еще одна ступень вверх! Здорово!!! удачи вам!
@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 10 ай бұрын
Use auto translation feature
@alenadecor5754 Жыл бұрын
Красота! Все есть и уроки и картинки в одном месте, очень удобно! Спасибо!
@alsusayfulina1865 Жыл бұрын
Очень классный урок😃 Прошла его с большим удовольствием, впервые использовала библиотеку gsap. Порадовало качество материала. Спасибо!
@helenarara8873 Жыл бұрын
В жизни не верстала сайты и не думала в эту сторону. Но ваши уроки вдохновляют. Рекомендации ютуба хорошо сработали🌸
@Alexei-rb9yy Жыл бұрын
Огромное спасибо за урок, как всегда все на высоте!!!💥👍
@heathery2997 Жыл бұрын
Ваши видео очень вдохновляют, все объясняется максимлаьно доступным языком QwQ
@silae6483 Жыл бұрын
В изумлении от вашего урока, интересная тема, сайт, анимации, спасибо вам за прекрасный урок!
@Anastasia-if3bi 7 күн бұрын
Огромное спасибо за такую ценную работу!!! Все объясняется очень доступно и понятно!!! Мне очень нравится учиться именно по вашим видео!!! Они ❤🔥❤🔥❤🔥🔥🔥🔥
@burla4enko Жыл бұрын
Блин, супер! Я только учусь и вот эти "модные" фишки просто супер для будущего портфолио и применения в каких-нибудь проектах! Спасибо, Мужик, очень крутые у тебя видосы!
@MaciFree Жыл бұрын
крутяк. давайте больше уроков по GSAP 💪
@kashif_i Жыл бұрын
Love the work, love to see more GSAP related videos. Keep it up.
@pajambient Жыл бұрын
Спасибо огромное за материалы! Приобрел полный курс!
@arslan-n Жыл бұрын
это восхитительно🙌 благодарю ✌✌😉😉
@andreylegkostup7112 Жыл бұрын
Каждый новый урок шедевр!
@nadejda_num5803 8 ай бұрын
Очень крутой урок, спасибо огромное и голос приятный )))
@wdm Жыл бұрын
Друзья! Пишите, какие ещё крутые примеры хотели бы видеть)
@ghtuykshtywor Жыл бұрын
Привет, Алексей, записывай все что нравится, мы смотрим все уроки. Я лично в свое время прошел ваши платные курсы и их хватило что б устроится в вебстудию.
@oleghamster2434 Жыл бұрын
Интересно увидеть, как делать сложную svg анимацию.
@doethis Жыл бұрын
Доброго времени суток, хотелось бы увидеть как сделать так же как и в презентации айфон 14 на официальном сайте айфона
@NlCKY Жыл бұрын
Хотелось бы увидеть, анимации с сайта Hello Monday 😊
@yanesbn Жыл бұрын
А можешь сделать сайт ввиде игры ?
@BehindTheYellowTapeAF Жыл бұрын
Побольше бы таких видео, вообще взять бы сайты которые выиграли награды и разобрать как они сделаны
@blackhok1761 9 ай бұрын
zdarova bratan. mochni chotki polezni kontent )) Good job!!!
@hotmitrofan Жыл бұрын
просто супер, у меня все получилось. Html, css я знала уже, поэтому все поняла по этой части. Но сам джаваскрипт пока темный лес для меня, пришлось просто тупо пвоторить как на видео. Сайт заработал как надо, это очень красиво. Теперь конечно хочется изучить джаваскрипт и библиотеки, чтобы понимать что пишешь в скрипте. Канал супер!!
@user-ii9fz3be1r 6 ай бұрын
Просто космос! Большое спасибо за урок
@virtuoz-ru Жыл бұрын
Спасибо за крутой урок. GSAP это очень интересная библиотека.
@user-px6bp3cr4l 6 ай бұрын
Спасибо большое за урок , все получилось очень круто делайте побольше таких видео. Так держать.
@Sergey_D. Жыл бұрын
Лайк не глядя. Контент супер!
@VysotskovaArt 11 ай бұрын
Спасибо большое за вашу работу! После того как увидела видео у вас на канале, сразу подписалась. Все очень классно и понятно.
@riga8393 Жыл бұрын
Пушка бомба, все просто и доходчиво
@MissisJ Жыл бұрын
Не знаю почему у Вас еще нет миллионов подписчиков, этот канал - это нечто шикарное и невероятно полезное! Спасибо за Вашу работу! Надеюсь, что с Вашими уроками осуществлю мечту стать веб-дизайнером)
@wdm Жыл бұрын
А зачем мне миллион подписчиков? У меня есть вы и я этому счастлив) Вам - успехов в обучении!)
@user-bq4bg9rl7t 4 ай бұрын
Потому что саморазвитием занимаются не миллионы. Миллионы смотрят, как рандомный чел блюёт разноцветной блевотиной. А у подобных каналов очень мало подписчиков.
@asus99 3 ай бұрын
@ привет, сделай видео пожалуйста как на сайт html добавить способы оплаты например юмани, чтобы при нажатии кнопки можно было купить товар или например систему регистрации пользователя на сайте, ты очень крут я подписался и с меня лайк
@goe4t Жыл бұрын
Очень красиво одновременно и круто спасибо
@makc6878 Жыл бұрын
Все как всегда, прекрасная подача материала, и замечательный пример для вдохновения! Спасибо! P.S. Вчера мучали Chat GPT, что бы он написал верстку, стили и анимацию как у тебя. Я блин быстрее с урока твоего сверстал, долго его мучать пришлось, но не домучали )))
@shameless-samurai Жыл бұрын
Хоспаде, это шедевр! Спасибо!
@vimvexvimvex8780 Жыл бұрын
Здорово. спасибо за доходчивое обьяснение и ваше время. лайк+подписка
@sonus4520 Жыл бұрын
awesome, hope there will be more tutorial series 🤩
@draftermyself 11 ай бұрын
So Amazing! 😦 Wonderfull GSAP
@SvirkoSam Жыл бұрын
Годнота подъехала ! ❤
@temikflookin Жыл бұрын
Замечательный урок!
@palach_666 Жыл бұрын
Урок супер!
@user-sh3np2rh5x Жыл бұрын
Спасибо за интересный урок!
@jefb3145 11 ай бұрын
Merci infiniment de partager vos connaissances pour ce magnifique tutoriel . continuez comme cela , merci .
@ferryterry1873 10 ай бұрын
Случайно наткнулся на канал и понял , что на курсах не учат , вообще ничему )) . Спасибо за видео , очень полезно
@alijanulanov Жыл бұрын
на просторах ютуба впервые вижу что у такого офигенного ютубера так мало просмотров, не бросай канал!
@user-wh9mc2po7g Жыл бұрын
для такой узкой тематики, у него очень хороший актив на канале
@ElenaBabicheva Жыл бұрын
Мало? Это шутка?
@ll_liiik Жыл бұрын
Смотрю твои ролики когда кушаю, я такими темпами программистом стану
@user-my1qg6wn8c 2 ай бұрын
Спасибо я студент и ты очень сильно мне помог я за год все твои видео посмотрел
@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"
@vitalikchaikovsky4335 Жыл бұрын
Я вже пару відео передивився і їх реалізував. Це просто amazing. Дякую вам за такі круті відеоуроки)
@biscvie 8 ай бұрын
Круто! Еще пожалуйста)
@marchwebTec 9 ай бұрын
incredible! I'm following you brother, thanks for showing me this! greetings from Argentina!!
@ummaindast8986 8 ай бұрын
Супер познавательно! Отличный урок! Спасибо за видос! Да к дополнению! можно было бы к заголовку использовать эффект выхода с лева и право! Ну попробую сам! Ещё раз благодарю, не каждый делиться ценными знаниями!
@richthemat2970 Жыл бұрын
просто ле-ген-да , большое спасибо !!!
@user-fd4gq4zj8p 11 ай бұрын
😮😮😮😮 невероятно 👏👏👏👏
@good_asfuck Жыл бұрын
Круто ☺️
@user-ir5yf8en1e 6 ай бұрын
Для тех, у кого пропадает заголовок "Creative scroll": в css .main-title bottom: 12vh; заменить на отступ сверху "top: 40vh;" При работе wrapper считывает всю страницу целиком, соответственно .main-title с bottom падает вниз страницы. Тестировал Chrome, Edge Урок класс, спасибо!
@oct-zt2hk Жыл бұрын
Very helpful video love from India ❤
@user-ww4zr8et6i Жыл бұрын
Круто! Спасибо!
@user-vv7ic5pr9d Жыл бұрын
Очень круто!
@almaz.kamaliev Жыл бұрын
Лайк не глядя!
@yanesbn Жыл бұрын
Вы Бог верстки точно.
@webdesigncodefrance Жыл бұрын
Thank u! You are the best !
@user-fs4kl6bg7e Жыл бұрын
спасибо за урок
@sergeybezumanuy8690 Жыл бұрын
Спасибо тебе большое!
@Max_Pl78 Ай бұрын
Просто огонь 🔥🔥🔥!!! Возможно у Вас есть уроки, с похожим сайтом, но чтобы вверху было неподвижное меню?)))
@wdm Ай бұрын
Спасибо! Навскидку не вспомню, есть или нет. Но делается это довольно легко. У полосы меню - position: fixed; top: 0; width: 100%
@alexvimpel9015 3 ай бұрын
спасибо мужик!
@rahim6821 Жыл бұрын
Очень круто
@Beljamin Жыл бұрын
Браво!
@dmitrychaiko8930 6 ай бұрын
Огонь!
@elizabethdruzhinina Жыл бұрын
Спасибо большое!!
@flexWebStudio Жыл бұрын
Круто!
@deepak8586 Жыл бұрын
Awesome!!
@SnookezChannel 9 ай бұрын
Боже у меня оргазм глаз, сделаю на Вашем примере, сайт визитку Поддержку подпиской и лайком.
@pungushe Жыл бұрын
Спасибо
@user-fe5hx3vx9r Жыл бұрын
Спасибо ))
@BryxOFF Жыл бұрын
супер!😎🤓
@unicoxr5tj417 Жыл бұрын
красиво
@user-ey8ys8on5p Жыл бұрын
спасибо,огромное
@UrDevDose Жыл бұрын
Bro didn;t understand a word but still really amazing tutorial and project
@piligrim_7 Жыл бұрын
Привет, а как сделать такой же хороший звук ?
@user-pq6gx2vo3b 9 ай бұрын
ребят, спасибо вам большое, вы очень крутые))) можете подсказать, как сделать размер слов заголовка титульной страницы разного размера и нижнее слово разместить по центру главного слова?
@MicroDobb Жыл бұрын
можно брать примеры как из художественных сайтов тильды или очень интересна тема по созданию аудиоплееру (особенно с плейлистом) и всякими красивостями! Может что-то Вам из тем подойдет
@InnAlexRio Жыл бұрын
Superrr Gracias
@evolution_31 3 ай бұрын
Кайф)
@bmlol Жыл бұрын
не плохо, а будет что-то связанное с анимацией, которая следует за мышкой с эффектом паралакса
@wdm Жыл бұрын
Да, такой урок есть в планах. Вообще, пишите, не стесняйтесь, что хотели бы видеть, всё покажу и расскажу)
@DENDYTWOO Жыл бұрын
интересно, а как это во время дизайна анимируют?
@nguyetluu2060 Жыл бұрын
hope you make english vesion soon. thank u
@koshatskaya9951 Жыл бұрын
😍😍😍
@hell1207 10 ай бұрын
From kerala😊❤
@I248 Жыл бұрын
как ты вопремя, спасибо!тт!
@BoomKillazz Жыл бұрын
💣💣💣
@reinhard3821 Жыл бұрын
Подскажите пожалуйста, а чтобы работали плавный скрол и параллакс нужно отдельно скачивать плагин GSAP во вкладке расширения в vs Code? Потому что столкнулся с проблемой, что код написан так же как и у автора, только вот никаких эффектов нет, поэтому решил уточнить, заранее спасибо за ответ
@wdm Жыл бұрын
Здравствуйте. Нет, плагин GSAP для VS Code скачивать не нужно, просто выполняйте урок по инструкциям и у вас всё должно получиться. Еще посмотрите ошибки в консоли, возможно, там будет подсказка, где у вас ошибка. В целом, если вы по уроку подключили скрипты и пути правильные, никаких проблем быть не должно) Перепроверьте всё внимательно.
@reinhard3821 Жыл бұрын
@@wdm доброго времени суток, да действительно все получилось, пришлось немного покопаться, спасибо за ваш труд и ваши уроки, было очень интересно попробовать себя в новом деле, а то я раньше только рисовал дизайны, теперь вот и сверстал немного, ещё раз спасибо
@alenamitrofanova4361 6 ай бұрын
Спасибо за урок! Узнала очень много новых фишек:) 😍😍 И у вас очень сексуальный голос😝
@ferliantino Жыл бұрын
Heyy hello, do you have english version of this video? I really need this
@Xhami888 Жыл бұрын
I wonder what he is saying, intresting tutorial by the way 🤔
@Shukhratov 5 ай бұрын
А можно ли делать это --index для всех вещей для адаптации, просто дать и все на любой экране нормально?
@wdm 5 ай бұрын
Да, без проблем, он для того и нужен) Единственное, поработать с размером некоторых элементов интерфейса все равно придется индивидуально. Например, шрифт для чтения, обычный параграф или заголовки на малых разрешениях могут быть мелковаты.
@LenovoLenovo-lm1lh Жыл бұрын
Доброго времени суток. Объясните пожалуйста почему в скобках мы указываем два класса что пройтись циклом и gallery__left и gallery__item. В js мы же указываем массив и идём по нему, а не указываем дочерние элементы. Не много не поняла, спасибо за ранее..
@wdm Жыл бұрын
Здравствуйте. В JS мы работаем с двумя селекторами: .gallery__left .gallery__item .gallery__right .gallery__item Для того, чтобы создать 2 цикла и работать с правой и левой стороной отдельно.
@LenovoLenovo-lm1lh Жыл бұрын
@@wdm У вас супер канал. Вдохновлена вашими видео, уже не одно смогла реализовать и попробовать с коррекцией под свой pet проект.Вы очень большой молодец! Подскажите пожалуйста где можно больше информации визуальной получить как работать с gsap или возможно какие то курсы посоветуйте? Спасибо большое)
@user-dp8xc9tx8n Жыл бұрын
Спасибо за отличный контент на русском языке. Ждем еще таких видосиков
@og8946 Жыл бұрын
Можно что то полегче gsap? Например locomotive scroll
@wdm Жыл бұрын
Рекомендую именно Gsap, так как ядро и плагины очень хорошо друг в друга интегрируются, можно управлять любым параметром в процессе. Если полегче, да, можете конечно использовать locomotive scroll, но плавность абсолютно неуправляемая, метод движения совершенно другой, более резкий и никак это не пофиксить, параметры отсутствуют нужные.
@ms_craft4784 7 ай бұрын
Можете помочь пожалуйста, мы же на разные экраны оптимизировали css с помощью переменной, а как такое сделать в js? Просто если сайт который я делаю на ноуте откроют на пк то анимация будет другая (типо сменится цвет на 1000 стоит, но у них это будет как мои 800), помогите пожалуйста с такой переменной под js
@wdm 7 ай бұрын
Привяжите зависимые от ширины и высоты экрана значения к переменной --index
@user-vr6hj2ed3x Жыл бұрын
Очень круто,но для новичков как я очень сложно.Что нибудь по проще и по подробнее.
@ninja9455 Жыл бұрын
Шаблон то сделать по таким шикарным видео - урокам легко и просто, а что делать с хостингом и доменом, как подобрать хороший хостинг и домен для сайта с таким крутым дизайном, желательно чтобы и хостинг и домен можно было получить бесплатно если это возможно
@wdm Жыл бұрын
На бесплатном хостинге вообще не рекомендую ничего размещать, потеряете всё, получите пессимизацию поисковых систем и кучу других проблем. Я использую уже много лет хостинг SpaceWeb для своих проектов, в том числе и для WebDesign Master: wd-m.ru/sweb
@taraswww777 Жыл бұрын
Почему многие используют border-radius:8px ? Почему не 10?
@wdm Жыл бұрын
Выглядит хорошо в большинстве кейсов) Почему не 9 или не 7 вопрос риторический.
WebDesign Master
Рет қаралды 144 М.
BalcevMMA_BOXING
Рет қаралды 10 МЛН
Pomazkov JS
Рет қаралды 247 М.
Ranch Easy | Информатика ЕГЭ
Рет қаралды 9 М.