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

Подписаться 84 тыс.

Просмотров 10 тыс.

50% 1

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

Опубликовано:

11 янв 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 62

@bessonniy9208 18 часов назад

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

@user-vp6bu3fg1o 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@BMikel 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

супер

@njsaab9722 Месяц назад

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

@Raul-jq7pq 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@GameForYouOnline 4 месяца назад

React=>Route=>Link

@constyak9031 4 месяца назад

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

@user-nh9tw3ei9t 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

С Новым Годом

@yashulja 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@ArteEtHumanitate 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

в ритме танца

@ukraine1514 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

благодарю

@Ronghanes 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@candy_front 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

велком)

@user-ev4vh8cm2x 4 месяца назад

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

@littlecat8445 4 месяца назад

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

@gio2156 4 месяца назад

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

@johnprivalov1062 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

спасибо

@anidesku 4 месяца назад

шикарно!

@MenuMoscow 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@user-vr6bn2wd2z 4 месяца назад

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

@sergeyf4256 4 месяца назад

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

@tuRistst 4 месяца назад

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

@sergeyf4256 4 месяца назад

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

@bribalko 4 месяца назад

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

@sergeyf4256 4 месяца назад

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

@unknown.6914 9 дней назад

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

@spiridontm Месяц назад

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

@maratnasyrov2895 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

comic shanns

@maratnasyrov2895 4 месяца назад

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

@user-wq3po9si9i 4 месяца назад

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

@BarbaraMeakin 4 месяца назад

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

@dimasnytin 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@dimasnytin 4 месяца назад

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

@walterwhite4407 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

привет)

@user-ei8lb8om2g 4 месяца назад

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

@tarasmirus 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@perahuda 4 месяца назад

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

@vadymprokopchuk 4 месяца назад

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

@user-ug1he6jj8s 4 месяца назад

Первый!

@DutarGroup 3 месяца назад

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

@merks66 4 месяца назад

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

@user-wq3po9si9i 4 месяца назад

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

@BotKarma66 4 месяца назад

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