KZhead

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

От 0 до 1
2024 ж. 11 Қаң.
10 178 Рет қаралды
Жүктеу

Друзья, поезд тронулся )) сегодня будем делать переход между страницами сайта без перезагрузки, очень полезная штука для вашего развития как веб разработчика. После этого видео вы с легкостью сможете внедрять такое в своих проектах. Поработаем в основном с barba.js, заказчик будет в восторге.
Ссылки из видоса:
barba.js.org/
gsap.com/
Телеграм канал - t.me/from0to1com
----------------------------------------
Сайт курса по верстке - from0to1.com.ua/
----------------------------------------
Как в я в прошлом весртал этот сайт:
kzhead.infotx5Ne_Tb...
Подпишитесь на канал, если вам понравилось данное видео:
bit.ly/2IFzwBZ

Пікірлер

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

    @njsaab9722@njsaab9722Ай бұрын

  • React=>Route=>Link

    @GameForYouOnline@GameForYouOnline4 ай бұрын

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

    @user-vp6bu3fg1o@user-vp6bu3fg1o4 ай бұрын

    • спасибо, с Новым годом!

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @littlecat8445@littlecat84454 ай бұрын

  • шикарно!

    @anidesku@anidesku4 ай бұрын

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

    @BMikel@BMikel4 ай бұрын

    • супер

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @yashulja@yashulja4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @constyak9031@constyak90314 ай бұрын

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

    @ukraine1514@ukraine15144 ай бұрын

    • благодарю

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @candy_front@candy_front4 ай бұрын

    • велком)

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @MenuMoscow@MenuMoscow4 ай бұрын

    • это топ, спасибо)

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @user-ev4vh8cm2x@user-ev4vh8cm2x4 ай бұрын

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

    @Raul-jq7pq@Raul-jq7pq4 ай бұрын

    • Спасибо и тебя!

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @user-nh9tw3ei9t@user-nh9tw3ei9t4 ай бұрын

    • С Новым Годом

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @ArteEtHumanitate@ArteEtHumanitate4 ай бұрын

    • в ритме танца

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @Ronghanes@Ronghanes4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

  • Первый!

    @user-ug1he6jj8s@user-ug1he6jj8s4 ай бұрын

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

    @johnprivalov1062@johnprivalov10624 ай бұрын

    • спасибо

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @sergeyf4256@sergeyf42564 ай бұрын

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

      @tuRistst@tuRistst4 ай бұрын

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

      @sergeyf4256@sergeyf42564 ай бұрын

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

      @bribalko@bribalko4 ай бұрын

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

      @sergeyf4256@sergeyf42564 ай бұрын

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

    @gio2156@gio21564 ай бұрын

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

    @BarbaraMeakin@BarbaraMeakin4 ай бұрын

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

    @user-vr6bn2wd2z@user-vr6bn2wd2z4 ай бұрын

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

    @user-wq3po9si9i@user-wq3po9si9i3 ай бұрын

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

    @spiridontm@spiridontmАй бұрын

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

    @dimasnytin@dimasnytin4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

      @dimasnytin@dimasnytin4 ай бұрын

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

    @maratnasyrov2895@maratnasyrov28954 ай бұрын

    • comic shanns

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

    • @@vadymprokopchuk Благодарю!

      @maratnasyrov2895@maratnasyrov28954 ай бұрын

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

    @user-ei8lb8om2g@user-ei8lb8om2g3 ай бұрын

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

    @walterwhite4407@walterwhite44074 ай бұрын

    • привет)

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @perahuda@perahuda4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @tarasmirus@tarasmirus4 ай бұрын

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

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @user-wq3po9si9i@user-wq3po9si9i3 ай бұрын

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

      @BotKarma66@BotKarma663 ай бұрын

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

    @merks66@merks664 ай бұрын

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

    @DutarGroup@DutarGroup2 ай бұрын

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

    @NazarKoshla@NazarKoshla4 ай бұрын

    • добре

      @vadymprokopchuk@vadymprokopchuk4 ай бұрын

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

    @IgorBobyrev@IgorBobyrevАй бұрын

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

    @WERWOLION@WERWOLION4 ай бұрын
KZhead