Плавный переход между страницами сайта, barba.js, GSAP

Sdílet
Vložit
  • čas přidán 11. 01. 2024
  • Друзья, поезд тронулся )) сегодня будем делать переход между страницами сайта без перезагрузки, очень полезная штука для вашего развития как веб разработчика. После этого видео вы с легкостью сможете внедрять такое в своих проектах. Поработаем в основном с barba.js, заказчик будет в восторге.
    Ссылки из видоса:
    barba.js.org/
    gsap.com/
    Телеграм канал - t.me/from0to1com
    ----------------------------------------
    Сайт курса по верстке - from0to1.com.ua/
    ----------------------------------------
    Как в я в прошлом весртал этот сайт:
    czcams.com/users/livetx5Ne_Tb...
    Подпишитесь на канал, если вам понравилось данное видео:
    bit.ly/2IFzwBZ

Komentáře • 64

  • @bessonniy9208
    @bessonniy9208 Před 13 dny

    Большое спасибо! Благодаря твоим обучающим видео уже больше несколько лет работаю фронтенд-разработчиком, но продолжаю смотреть, так как приятно слушать и всегда есть что-то интересное и новое, о чём я даже и не знал. Лучшая вечеринка на ютубе! ) P.S. надеюсь ты не забыл скинуть файлы Варе )

  • @user-vp6bu3fg1o
    @user-vp6bu3fg1o Před 5 měsíci +2

    Спасибо большое. С Новым годом тебя

  • @BMikel
    @BMikel Před 5 měsíci +6

    Годнота. Вечеринка удалась, хотелось бы еще такого контента. Со скролл эффектами

  • @Raul-jq7pq
    @Raul-jq7pq Před 5 měsíci +6

    С прошедшими праздниками, Вадим!
    Разбери, пожалуйста, библиотеку gsap :)
    Думаю многим полезно будет

  • @njsaab9722
    @njsaab9722 Před měsícem

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

  • @yashulja
    @yashulja Před 5 měsíci

    Дякую за контент, дуже цікаві уроки з gsap

    • @vadymprokopchuk
      @vadymprokopchuk  Před 5 měsíci +1

      дякую, тут правда gsap зовсім трішки, але все одно +

  • @user-nh9tw3ei9t
    @user-nh9tw3ei9t Před 5 měsíci +2

    Вадим, с Новым Годом!!

  • @ukraine1514
    @ukraine1514 Před 5 měsíci +2

    Нет слов,красавчик👍🤗

  • @GameForYouOnline
    @GameForYouOnline Před 4 měsíci +4

    React=>Route=>Link

  • @Ronghanes
    @Ronghanes Před 5 měsíci +1

    Рагнар показывает сайт с Рагнаром :)
    А если без шуток, в очередной раз спасибо большое за контент!

    • @vadymprokopchuk
      @vadymprokopchuk  Před 5 měsíci

      Да, вот такая теперь тема)) спасибо

  • @constyak9031
    @constyak9031 Před 4 měsíci

    Вадосу лайкос всегда. Вечерина топ. Но по поводу актуальности согласен с комментариями.

  • @ArteEtHumanitate
    @ArteEtHumanitate Před 4 měsíci +1

    Возвращение легенды. Вечеринка продолжается!

  • @johnprivalov1062
    @johnprivalov1062 Před 5 měsíci +1

    Еще не смотрел , но лайк не глядя , благодарю за контент , Вадос на своей волне , на чилле на кайфе, при этом такая поддержка начинающим, плюс очень опытный специалист 👍🏽👍🏽👍🏽👍🏽💯💯💯💯🦁🦁🦁🦁

  • @sergeyf4256
    @sergeyf4256 Před 5 měsíci +11

    Чем вы тут занимаетесь? Давно есть фреймворки, а эта библиотека уже 4 года не обновляется и у нее всего 2к скачиваний в неделю, в сравнении в реакте 9,6 млн в неделю, у вью 1,9 млн, angular 1,3 млн и это только в npm я глянул, выводы делайте сами конечно ну как по мне чем быстрее шагнете в фреймворки тем быстрее сможете понять перспективу роста и прогрессировать по ЗП. По вёрстке у Вадима шикарные ролики конечно на всем Ютубе нет таких, но вот тут конечно огорчил. Вадим если ты это прочитаешь хочу чтобы ты уже наконец начал делать ролики по какому нибудь фреймворку.

    • @tuRistst
      @tuRistst Před 5 měsíci +4

      Причем здесь фреймворки? У тебя mpa в проекте будет, так ты что, на react его побежишь натягивать, который будет без ssr/ssg? Здесь покано как сделать плавные переходы. А использовать фреймворк и библиотеки уже вторично.

    • @sergeyf4256
      @sergeyf4256 Před 5 měsíci +2

      @@tuRistst Так уже ssr можно сделать на любом фреймворке) и там просто роутинг настраиваешь и вот тебе плавный переход

    • @bribalko
      @bribalko Před 5 měsíci +3

      На мою думку якщо не великий сайт і потрібно використовувати таку анімацію то реакт використовувати не обов’язково

    • @sergeyf4256
      @sergeyf4256 Před 5 měsíci +1

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

    • @unknown.6914
      @unknown.6914 Před 21 dnem

      reactjs это не фреймворк, это js библиотека для создания пользовательских интерфейсов.

  • @user-ug1he6jj8s
    @user-ug1he6jj8s Před 5 měsíci +3

    Первый!

  • @candy_front
    @candy_front Před 5 měsíci +2

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

  • @MenuMoscow
    @MenuMoscow Před 5 měsíci +1

    круто полезно и самое главное понятно

  • @user-ev4vh8cm2x
    @user-ev4vh8cm2x Před 5 měsíci +2

    Отработал пол года на заводе, теперь можно продолжить обучение 😂

  • @anidesku
    @anidesku Před 4 měsíci

    шикарно!

  • @littlecat8445
    @littlecat8445 Před 4 měsíci

    Благодарю ❣❣❣

  • @exHopee
    @exHopee Před 12 dny

    а если брать cдн а потом залить этот сайт на хостиг на месяц что показать на защите дипломки. Будут работать скрипты подключенные через сдн?

  • @dimasnytin
    @dimasnytin Před 5 měsíci +1

    А обязательно barba.init вставлять для инициализации в функцию? Либо можно просто вставить в пустой файл js. Заранее спасибо за ответ. И за крутое видео.

    • @vadymprokopchuk
      @vadymprokopchuk  Před 5 měsíci +1

      можно в пустой вставить

    • @dimasnytin
      @dimasnytin Před 5 měsíci +1

      @@vadymprokopchuk спасибо. А интересно если верстку посадить на cms и изменить контент на странице, как оно отработает, с изменением контента? Ведь насколько я понимаю эта фича работает без запроса на хостинг.

  • @user-vr6bn2wd2z
    @user-vr6bn2wd2z Před 5 měsíci +1

    ПРИВЕТ!!!!!!🎉

  • @user-wq3po9si9i
    @user-wq3po9si9i Před 4 měsíci

    А как барбу прикрутить к галпу? Есть такой вариант?

  • @gio2156
    @gio2156 Před 5 měsíci +2

    найс, но есть проблема библиотека не обновлялась 5 лет, поискал годную замену, нашел swup.js - то же самое только лучше, быстрее, новее, и основной упор на css-анимации, а не на js библиотеки для анимации (хотя можно использовать оба подхода)

    • @andreiley7951
      @andreiley7951 Před 4 dny

      Откуда Вы инфу берёте?
      Я вот не поленился и посмотрел последнее обновление, которое было 1 января 2023 относительно Вашего комментария: @barba/core 2.9.7. А на данный момент вышло новое: @barba/core 2.10.0

  • @maratnasyrov2895
    @maratnasyrov2895 Před 5 měsíci +2

    Привет, можешь написать, что за шрифт ты используешь?

  • @spiridontm
    @spiridontm Před 2 měsíci

    что за шрифт для вс кода?

  • @BarbaraMeakin
    @BarbaraMeakin Před 5 měsíci +1

    Вадим, смотрю Ваш канал и очень восхищаюсь как Вы с юмором преподносите обучение. Я очень хочу у Вас учится и поступить на курс, который с 22 января, но проблема, что я резидент РФ. Ребята, я не сторонник того, что происходит, но я не могу это изменить к сожалению. Сделайте исключение для меня

  • @walterwhite4407
    @walterwhite4407 Před 5 měsíci +2

    Привеет! 🐉🐉🐉🐉🐉🐉

  • @perahuda
    @perahuda Před 5 měsíci

    Спасибо, а что с seo?
    p.s. викинги топ

    • @vadymprokopchuk
      @vadymprokopchuk  Před 5 měsíci

      сеошник будет в восторге) спасибо

  • @user-ei8lb8om2g
    @user-ei8lb8om2g Před 4 měsíci

    Ну просто песня))

  • @tarasmirus
    @tarasmirus Před 5 měsíci +1

    А якщо у користувача повільний інтернет?

    • @vadymprokopchuk
      @vadymprokopchuk  Před 5 měsíci

      там вже багато факторів, наскільки важкий сайт, наскільки повільний інтернет, скільки ми напхали анімації

  • @merks66
    @merks66 Před 5 měsíci

    Сайт курса кста в РФ не работает теперь 😢 и кстати есть возможность не полностью покупать курс? ткк мне нужно из всего курса только js-основы(если ситуация с сайтом исправится)

  • @user-wq3po9si9i
    @user-wq3po9si9i Před 4 měsíci

    Не дождавшись ответа прошерстил интернет - вариантов нет, они не дружат. Вставить barba.js можно только после сборки на gulp. Правда там есть заморочки с файлом js.

    • @BotKarma66
      @BotKarma66 Před 4 měsíci

      Ну я юзал барбу на галпе год назад , самое главное вызов скриптов кода делать нужно которые меняются в контейнере барбы , barba.hooks.beforeEnter((data) => {}); И внутри этого помещается весь код js который меняется

  • @DutarGroup
    @DutarGroup Před 3 měsíci

    Скорость воспроизведения на 1.5 :)

  • @NazarKoshla
    @NazarKoshla Před 5 měsíci +1

    Привіт вадя я не можу поняти як працює position можеш зняти відео

  • @IgorBobyrev
    @IgorBobyrev Před 2 měsíci

    А шо в мире верстальщиков, если страничка перезагрузилась раз, то все, расстрел? 😂

  • @WERWOLION
    @WERWOLION Před 5 měsíci +1

    вью тразишен API, остальное мусор