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

Лучший WordPress Шаблон - 1.envato.market/ale
↓↓↓
Уроки по Веб Разработке - geniuscourses.com/
В этом коротком видео я показал как сделать переход между страницами анимированным без использования перезагрузки. Используя библиотеку SWUP можно получить подобный эффект.
Библиотека - github.com/gmrchk/swup
Добавьте меня в друзья
/ sochirca
alexandr.sochirca
/ sochirca.alexandr
/ alexandr-sochirca-1669...
Шаблоны от Александра Сокирки
aletheme.com/
/ aletheme_agency
aletheme
/ alethemes
Курсы от Александра Сокирки
geniuscourses.com/
geniuscourses
Быть Программистом
bedeveloper
t.me/bedev

Пікірлер: 115

  • @bedeveloper
    @bedeveloper Жыл бұрын

    *Понравилось видео? Поддержки автора на **boosty.to/bedev** и получи уникальные закрытые курсы с практикой и поддержкой автора. (Описание ништяков для подписчиков в этом видео - **kzread.info/dash/bejne/o4CmrZpmftW3aag.html** )*

  • @anonymoususer6103
    @anonymoususer61035 жыл бұрын

    Супер ! Очень жду подобных уроков !!!!!

  • @damianwilliams8032
    @damianwilliams80323 жыл бұрын

    Дружище спасибо, на одном дыхании посмотрел, спасибо за творчество!

  • @marycummings2174
    @marycummings21743 жыл бұрын

    Такие кайфовые темы так просто излагаешь. Респект

  • @svetlanavikulova2850
    @svetlanavikulova28505 жыл бұрын

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

  • @Radag0nn563
    @Radag0nn5635 жыл бұрын

    Уже почти два месяца не занимался вёрсткой, посмотрел это видео, замотивировался. Очень библиотека понравилась, хочется больше таких видео! Завтра буду пробовать эту библиотеку.))

  • @user-ol5ot3sb4s
    @user-ol5ot3sb4s5 жыл бұрын

    Спасибо тебе, добрый человек!

  • @godfreyimpson446
    @godfreyimpson4463 жыл бұрын

    Огромное спасибо, очень понятно и хорошо объясняете!

  • @vladislavlitvin2442
    @vladislavlitvin24425 жыл бұрын

    Блин, это шикарно! Искал везде похожее решение, чтобы было не замудренно с ajax запросами и это видео очень помогло мне в этом. Спасибо огромное!!! Жду ещё полезных видео!!!

  • @SLW0226
    @SLW02265 жыл бұрын

    Большое спасибо. Очень интересная и полезная вещь :)

  • @user-qd4ji2zz5m
    @user-qd4ji2zz5m3 жыл бұрын

    Спасибо огромное за видео ( легко, просто и очень интересно)

  • @janestanley3042
    @janestanley30423 жыл бұрын

    Спасибо! Хорошее видео, полезная инфа и советы

  • @alex_ishchenko
    @alex_ishchenko5 жыл бұрын

    Супер, продолжай!

  • @ataliewarner3302
    @ataliewarner33023 жыл бұрын

    Спасибо за творчество.

  • @suzanmoore4989
    @suzanmoore49893 жыл бұрын

    Как всегда на высоте

  • @odiljonolimjonov2920
    @odiljonolimjonov29203 жыл бұрын

    Спасибо большое. Нужно не перепутать самое главное между index.html и /index.html

  • @user-pf7hc8tp4t
    @user-pf7hc8tp4t3 жыл бұрын

    Очень интересный ролик подпишусь и поставлю лайк👍

  • @beverleykelly1644
    @beverleykelly16443 жыл бұрын

    Ураааааа, ты нас услышал!!!

  • @kalyszhek5296
    @kalyszhek52965 жыл бұрын

    дааа..круто!! А вы еще можете снять видео о "livereload с webpack'ом" а то других чет не понимаю что-то.. Вы так четко и внятно объясняете.. Пожалуйста.. БУДУ ЖДАТЬ...

  • @user-fq7lh2go1n
    @user-fq7lh2go1n3 жыл бұрын

    Эх,какая ностальгия! Помню,начал учить html с твоего видоса! 😅

  • @helenstephens8036
    @helenstephens80363 жыл бұрын

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

  • @user-zk7wn8li7c
    @user-zk7wn8li7c7 ай бұрын

    ура! получилось! спасибо😘

  • @user-mp2rc8dr9q
    @user-mp2rc8dr9q3 жыл бұрын

    КРУТО!спасибо,Бро!

  • @olegmaksimchik9622
    @olegmaksimchik96225 жыл бұрын

    Отличная штука) СПС тебе)

  • @alexeyfedorovich9769
    @alexeyfedorovich97695 жыл бұрын

    До последнего не хотел врубать это видео, потому что и просмотров мало и вообще программирование терпеть не могу) Но чет пздц зашло) Видно, что человек ты хороший и делаешь все не спустя рукава) Таких как ты приятно слушать и смотреть) Удачи в развитии!

  • @konstantinsurnin855

    @konstantinsurnin855

    3 жыл бұрын

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

  • @iamname8758
    @iamname87584 жыл бұрын

    Отличный урок!

  • @bedeveloper

    @bedeveloper

    4 жыл бұрын

    👍

  • @michaelcobb2386
    @michaelcobb23863 жыл бұрын

    Отличный контент. давай контент по посадке верстки на вордпресс

  • @alekesm001
    @alekesm001 Жыл бұрын

    Это чудо какое-то!

  • @user-lp5xo1zb2t
    @user-lp5xo1zb2t3 жыл бұрын

    Единственный блогер который мотивирует, с первых минут.

  • @galogramma8461
    @galogramma84614 жыл бұрын

    тема крутая! спасибо! если кто-то ловит ошибку исполнения, перенесите проект на локальный сервер. denwer, openserver и тд.

  • @konstantinsurnin855

    @konstantinsurnin855

    3 жыл бұрын

    Nodejs

  • @taraszuev4189
    @taraszuev41895 жыл бұрын

    Thanks! Super useful!

  • @shondaclarke6633
    @shondaclarke66333 жыл бұрын

    Продолжай эту тему

  • @denyskurakov9657
    @denyskurakov96575 жыл бұрын

    Классный урок

  • @alexpoccob9091
    @alexpoccob90915 жыл бұрын

    Огонь!

  • @blackdzhak9861
    @blackdzhak98615 жыл бұрын

    Сяп, очень годно

  • @user-qw9ef8tk8d
    @user-qw9ef8tk8d3 жыл бұрын

    Вечер добрый

  • @ferym26
    @ferym264 жыл бұрын

    спасибо!

  • @peterpatterson3868
    @peterpatterson38683 жыл бұрын

    спасибо

  • @xexe4564
    @xexe45645 жыл бұрын

    Саш, ты лучший, просто денег нет на твой курс, но я держусь😐

  • @____-sss4602
    @____-sss46025 жыл бұрын

    молодец .супер .

  • @alexminenko2172
    @alexminenko21723 жыл бұрын

    Полезное видео. Спасибо. А можно ли сделать такую смену страниц в Тильде?

  • @SQWE23
    @SQWE234 жыл бұрын

    Вопрос - допустим Yandex нашел вашу страницу step2. И при прямом переходе на неё, (минуя страницу step1, а оттуда на step2), мы пролетаем мимо активации скрипта и этот эффект не работает. Как тут быть?

  • @fastikunlocktom3270
    @fastikunlocktom32704 жыл бұрын

    Привет, нужна помощь. Выдает ошибку Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/ihg2.html' cannot be swup.js 808. Что делать?

  • @janestanley3042
    @janestanley30423 жыл бұрын

    ура видос

  • @gamers_livetv4723
    @gamers_livetv4723 Жыл бұрын

    перешел по ссылке в описании, в итоге скачал файл, а там даже нету папки dist. И что делать теперь??

  • @widy2499

    @widy2499

    8 ай бұрын

    тоже самое

  • @geffestqqas2752
    @geffestqqas27524 жыл бұрын

    Подскажите пожалуйста, работает ли это на ASP.NET ?

  • @specserge
    @specserge4 жыл бұрын

    Не работает в яндекс браузере. Может проблема с ним? Плавности нет совсем. И еще вопрос. Как можно добавить этот скрипт на сайт wordpress?

  • @Rus_1005
    @Rus_10055 жыл бұрын

    Норм, а для чайников по подробнее про последние объяснения на счет галереи и ее взаимодействия с этой штукой можно подробнее?

  • @user-dz1fx5wt6v
    @user-dz1fx5wt6v3 жыл бұрын

    Круто , у меня проблема с 1 на 2 с анимацией ,а с 2 на 1 без анимации , есть какой-то выход ?

  • @sashavarava7933
    @sashavarava79332 ай бұрын

    Как заставить работать свой JS после подключения swup???

  • @monolit-8346
    @monolit-83465 жыл бұрын

    ВАУ!!

  • @clleoweb4083
    @clleoweb40834 жыл бұрын

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

  • @romeg4566
    @romeg45663 жыл бұрын

    Будет ли работать в Laravel?

  • @DeanRie
    @DeanRie5 жыл бұрын

    Саня, сам обложку для видео делал?)

  • @aidargilmanov2080
    @aidargilmanov20805 жыл бұрын

    👍

  • @yuriikilyk8923
    @yuriikilyk89234 жыл бұрын

    Посмотрел код в ООП не шарю но в JS да и вижу что он событием popstate всю магическую прогулку по истории браузера делает и добавляет в браузер history.pushState и контент изменяется но как написано в документации что событие popstate не видит изменения с помощью history.pushState я сам испробувал все варианты ничево не работает как у него работает я не представляю может хоть ктото подскажет...

  • @sabearu
    @sabearu4 жыл бұрын

    А что делать, если после этого перестают работать слайды от fotorama?

  • @ivanpolynin8194
    @ivanpolynin81945 жыл бұрын

    Библиотечка хорошая, но применить ее к шаблону bootstrap4 не вышло. Очень жаль

  • @user-rj6ro3mp1p
    @user-rj6ro3mp1p5 жыл бұрын

    Прикольно. Мне кажется, что все-таки, для такой анимации лучше всего использовать какой-то фреймворк.js (Angular, react, Vue)🤣, ладно-ладно, я пошутил, не пинайте, хотяяяяя, если посмотреть.... , ладно ухожу😁

  • @bertinashelton3883
    @bertinashelton38833 жыл бұрын

    4:51 не обращайте внимание на комментарий, просто отметил где остановился

  • @heliacmr
    @heliacmr5 жыл бұрын

    Emmet сам может прописывать Lorem, зачем ты пользуешься сторонним сервисом?) LoremКол-во слов и Tab

  • @johnyork4070
    @johnyork40703 жыл бұрын

    Топ

  • @johnyork4070
    @johnyork40703 жыл бұрын

    Классно рассказываешь. Но как по мне, не сказал одного с главных минусов фриланса. Сидя дома, вряд ли получится полностью изолироваться от всего остального.

  • @divcase

    @divcase

    Жыл бұрын

    А причем тут фриланс??? Человек рассказывает про определенную вещь в коде..

  • @bapehnkk
    @bapehnkk4 жыл бұрын

    Весь вечер парился, так не сумел настроить корректную работу библиотеки.

  • @merlinulg
    @merlinulg5 жыл бұрын

    Еще бы показал, как это к Вордпрессу прикрутить, а то само-то по себе оно мало где пригодится без какого-нибудь движка.

  • @DimaNostradamus
    @DimaNostradamus5 жыл бұрын

    хороший урок. прикольная библиотека, только у меня работает через раз, к сожалению

  • @user-ei4xv6bl5i
    @user-ei4xv6bl5i5 жыл бұрын

    Чевото не получается. Я конечно не врач, но по моему где-то что-то не так делаю. Дайте ктонить исходники пожалуйста.

  • @user-xo3js6xy8w
    @user-xo3js6xy8w4 жыл бұрын

    У каждой страницы могут быть кастомные CSS и JS файлы. При работе плагина они не подгружаются. Как быть?(

  • @konstantinsurnin855

    @konstantinsurnin855

    3 жыл бұрын

    Gulp

  • @user-xo3js6xy8w

    @user-xo3js6xy8w

    3 жыл бұрын

    @@konstantinsurnin855 имеешь введу все в один ?

  • @user-ov1li6ze6z
    @user-ov1li6ze6z3 жыл бұрын

    У меня не работает, или без анимации, или нет перехода на другую страницу, зато есть затухпние, на локальном хосту тоже. Пути менял. INDEX INDEX INDEX INDEX Все не рабочее. почему? Может я что то не понимаю, так нет! Наверстал один в один как у вас. В чем дело? Почему не срабатывает анимация? У кого-то получиось сделать?

  • @user-bz4kg4hx7l
    @user-bz4kg4hx7l3 жыл бұрын

    когда переключаюсь по страницам при помощи swup, скрипты перестают работать

  • @AndyGrooveStudio
    @AndyGrooveStudio4 жыл бұрын

    Нужна помощь по JS Для навигации по сайту я использую библиотеку Swup Одна из страниц - прогрес бар (скил бар) codepen.io/andrej-taranenko/pen/MWWoxrQ Но проблема в том что при переходе на эту страницу, анимация прогрес бара не работает. Помогите пожалуйста прописать код JS так чтобы с каждым переходом на эту страницу срабатывала анимация прогрес бара. Спасибо.

  • @user-tt6hq8tb8c
    @user-tt6hq8tb8c2 жыл бұрын

    можно ли сделать такой переход между разными доменами?

  • @divcase

    @divcase

    Жыл бұрын

    нет

  • @sokratvideo666
    @sokratvideo666 Жыл бұрын

    Почему - то плавный переход не работает...

  • @dwmte
    @dwmte4 жыл бұрын

    А через какую прогу код верстаешь?

  • @mollex7826

    @mollex7826

    4 жыл бұрын

    Код пишут, а не верстают...

  • @peterpierce8805
    @peterpierce88053 жыл бұрын

    Займусь на выходных, а пока домашка

  • @user-qb7jg4hx5l
    @user-qb7jg4hx5l5 жыл бұрын

    Начало js на 6:14

  • @verset505
    @verset5055 жыл бұрын

    Способ, конечно хороший, но для подобной задачи достаточно 15-20 строчек чистого JS. К чему нагружать сайт библиотекой.

  • @konstantinsurnin855

    @konstantinsurnin855

    3 жыл бұрын

    Можешь написать эти 20 строчек, интересна реалищация

  • @user-zk7wn8li7c

    @user-zk7wn8li7c

    7 ай бұрын

    и мне интересно

  • @maxpayne3225
    @maxpayne32253 жыл бұрын

    Очень крутой плагин, но есть у него один маленький недостаток.. Если у вас на сайте есть другие плагины то он их все сломает

  • @merryrussell6135
    @merryrussell61353 жыл бұрын

    Элита смотрит на x2 и впитывает бесценный опыт программирования

  • @Alexander-wx1hy
    @Alexander-wx1hy5 жыл бұрын

    barbajs тож не плох

  • @user-iu9vx9xs9g
    @user-iu9vx9xs9g2 жыл бұрын

    Всех приветствую, такая проблема возникла, есть сайт состоит пока из двух страниц: index.html и registration.html. У каждой страницы свой css файл, для index это style.css, а для registration соответсвенно registration.css, проблема в том что мне надо при нажатии на кнопку что бы с index переходила на registration, воспользовался данным способом все переходит замечательно, но есть проблема что после перехода на registration страница не применяет на себя значения прописные ей в css файле, они применяются если только обновить страницу, я хочу что бы страница сразу загружалась с настройками из css, подскажите как быть, заранее всем спасибо!)

  • @divcase

    @divcase

    Жыл бұрын

    Так происходит потому что ты подгрузил кусок контента, а не стили. Объедение стили в один файл и все будет работать. Ну или на 1й странице тоже подключи registration.сss (но это порно). Используй вебпак и собери все в один css

  • @dumitru05
    @dumitru055 жыл бұрын

    Молодец! А что скажешь насчет библиотеке barbajs.org/ ?

  • @user-pn7vo5kk1j

    @user-pn7vo5kk1j

    5 жыл бұрын

    Dumitru Bolgari плохая документация

  • @orazdurdyyew4136
    @orazdurdyyew41362 жыл бұрын

    Не получается вроде бы всё сделал правилно

  • @johnsharp4884
    @johnsharp48843 жыл бұрын

    То чувства что ты просто играешь коддами😨

  • @danil_1522
    @danil_15223 жыл бұрын

    не работает, печально

  • @peterpierce8805
    @peterpierce88053 жыл бұрын

    Лайк, если до конца посмотерл)

  • @gertrudegordon9380
    @gertrudegordon93803 жыл бұрын

    А учится на разработчика сложно?

  • @user-qs9cx1kf1i
    @user-qs9cx1kf1i3 жыл бұрын

    Ха-ха-ха я вообще не слова не понял

  • @geek7807
    @geek78075 жыл бұрын

    Видео интересное, но говорящая голова сильно отвлекает, да и серьёзность как-то сразу пропадает. Зачем люди постоянно «вебки» в видео вставляю... Это одна из Вселенских Тайн, ответ на которую мы вряд ли когда-нибудь узнаем) Кстати, ещё очень сильное эхо. Не критично, но если это убрать, то будет вообще идеально.

  • @alexwest5057

    @alexwest5057

    5 жыл бұрын

    У некоторых людей такая мизантропия, что они не переносят вид человеческое лица даже в таких видосах. ) Нормальный человек даже не обратил бы на это лицо внимания.

  • @vartvell

    @vartvell

    5 жыл бұрын

    @@alexwest5057 согласен, мне лично было все равно, есть она или нет, даже и не обращал внимания ))

  • @ArtemCherkassov

    @ArtemCherkassov

    5 жыл бұрын

    Оптимальным вариантом будет использовать запись с камеры в вступительной речи, а дальше чистый скринкаст, так сказать и вашим и нашим или и рыбку съесть и куда сесть сами выбираете)

  • @qrthack3233
    @qrthack32335 жыл бұрын

    html5 history api не слышали? давай до свидания!

  • @shanonlawson2447
    @shanonlawson24473 жыл бұрын

    ИНТЕРЕСНЫЙ ФАКТ: Если не знаешь что написать пиши интересный факт.

  • @salman1539
    @salman15395 жыл бұрын

    Люди куда я попал? А html еще пользуются? Я думал конструкторы захватили мир)))

  • @verset505

    @verset505

    5 жыл бұрын

    Благо этого ещё долго не произойдёт

  • @konstantinsurnin855

    @konstantinsurnin855

    3 жыл бұрын

    Больше скажу, ИИ давно все программы пишет, а программисты без работы сидят,

  • @Channel-kp7qo

    @Channel-kp7qo

    Жыл бұрын

    @@konstantinsurnin855 ахвхвхаххахыхыхвхаххфххффхфххфыххыхвахазззыхвхаххфхх

  • @FuckOF...
    @FuckOF... Жыл бұрын

    Для кодеров пойдёт) Кодер это подросток программист Сначала ты нуб потом младший Кодер потом средний, старший а далее уже программист, хакер, цифровой бог)

Келесі