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

Поділитися
Вставка
  • Опубліковано 26 лис 2024

КОМЕНТАРІ • 116

  • @bedeveloper
    @bedeveloper  2 роки тому

    *Понравилось видео? Поддержки автора на **boosty.to/bedev** и получи уникальные закрытые курсы с практикой и поддержкой автора. (Описание ништяков для подписчиков в этом видео - **ua-cam.com/video/qLrK8-NrQ9E/v-deo.html** )*

  • @ОлегМасловский-я5э
    @ОлегМасловский-я5э 3 роки тому +2

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

  • @anonymoususer6103
    @anonymoususer6103 5 років тому +14

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

  • @damianwilliams8032
    @damianwilliams8032 3 роки тому +3

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

  • @beverleykelly1644
    @beverleykelly1644 3 роки тому +1

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

  • @Radag0nn563
    @Radag0nn563 5 років тому +1

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

  • @alex_ishchenko
    @alex_ishchenko 5 років тому +8

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

  • @marycummings2174
    @marycummings2174 3 роки тому +1

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

  • @vladislavlitvin2442
    @vladislavlitvin2442 5 років тому +1

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

  • @СтасСинус
    @СтасСинус 5 років тому +5

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

  • @janestanley3042
    @janestanley3042 3 роки тому +1

    ура видос

  • @odiljonolimjonov2920
    @odiljonolimjonov2920 4 роки тому +1

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

  • @svetlanavikulova2850
    @svetlanavikulova2850 5 років тому +1

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

  • @suzanmoore4989
    @suzanmoore4989 3 роки тому +1

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

  • @galogramma8461
    @galogramma8461 4 роки тому +1

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

  • @евгенияжульдикова-н3ъ

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

  • @godfreyimpson446
    @godfreyimpson446 3 роки тому +1

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

  • @ЕленаКоптик-з8ш

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

  • @SLW0226
    @SLW0226 5 років тому +5

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

  • @janestanley3042
    @janestanley3042 3 роки тому +1

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

  • @ДмитрийМожаров-щ9г
    @ДмитрийМожаров-щ9г 3 роки тому +1

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

  • @helenstephens8036
    @helenstephens8036 3 роки тому +1

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

  • @ataliewarner3302
    @ataliewarner3302 3 роки тому +1

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

  • @ЕкатеринаБалабонова

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

  • @alexeyfedorovich9769
    @alexeyfedorovich9769 5 років тому +1

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

    • @konstantinsurnin855
      @konstantinsurnin855 4 роки тому +1

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

  • @НиколайШевченко-э4ч

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

  • @olegmaksimchik9622
    @olegmaksimchik9622 5 років тому +4

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

  • @alekesm001
    @alekesm001 2 роки тому

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

  • @shondaclarke6633
    @shondaclarke6633 3 роки тому +1

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

  • @ИполитЛапотнов
    @ИполитЛапотнов 3 роки тому +1

    Вечер добрый

  • @gamers_livetv4723
    @gamers_livetv4723 Рік тому +5

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

    • @widy2499
      @widy2499 Рік тому

      тоже самое

  • @blackdzhak9861
    @blackdzhak9861 5 років тому +4

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

  • @iamname8758
    @iamname8758 4 роки тому +1

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

  • @kalyszhek5296
    @kalyszhek5296 5 років тому +2

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

  • @peterpatterson3868
    @peterpatterson3868 3 роки тому +1

    спасибо

  • @michaelcobb2386
    @michaelcobb2386 3 роки тому +1

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

  • @xexe4564
    @xexe4564 5 років тому

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

  • @alexminenko2172
    @alexminenko2172 4 роки тому +1

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

  • @johnyork4070
    @johnyork4070 3 роки тому +1

    Топ

  • @alexbro9091
    @alexbro9091 5 років тому

    Огонь!

  • @deny-y21
    @deny-y21 5 років тому

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

  • @monolit-8346
    @monolit-8346 5 років тому

    ВАУ!!

  • @МиколаТкачук-д5л
    @МиколаТкачук-д5л 4 роки тому +1

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

  • @bertinashelton3883
    @bertinashelton3883 3 роки тому +1

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

  • @____-sss4602
    @____-sss4602 5 років тому

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

  • @taraszuev4189
    @taraszuev4189 5 років тому

    Thanks! Super useful!

  • @clleoweb4083
    @clleoweb4083 4 роки тому +1

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

  • @sashavarava7933
    @sashavarava7933 8 місяців тому

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

  • @fastikunlocktom3270
    @fastikunlocktom3270 4 роки тому +1

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

  • @johnyork4070
    @johnyork4070 3 роки тому +1

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

    • @divside
      @divside 2 роки тому +2

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

  • @yuriikilyk8923
    @yuriikilyk8923 4 роки тому +1

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

  • @ferym26
    @ferym26 4 роки тому

    спасибо!

  • @romeg4566
    @romeg4566 4 роки тому

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

  • @aidargilmanov2080
    @aidargilmanov2080 5 років тому +1

    👍

  • @geffestqqas2752
    @geffestqqas2752 4 роки тому

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

  • @heliacmr
    @heliacmr 5 років тому +1

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

  • @Rus_1005
    @Rus_1005 5 років тому

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

  • @DeanRie
    @DeanRie 5 років тому

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

  • @specserge
    @specserge 5 років тому

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

  • @michaelteljatnikow5471
    @michaelteljatnikow5471 5 місяців тому

    доброго дня, почему то мобильное меню теперь
    не сворачивается

  • @SQWE23
    @SQWE23 5 років тому

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

  • @sokratvideo666
    @sokratvideo666 Рік тому +1

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

  • @peterpierce8805
    @peterpierce8805 3 роки тому +1

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

  • @КостянЕрмаков-е9ю
    @КостянЕрмаков-е9ю 5 років тому

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

  • @bapehnkk
    @bapehnkk 5 років тому

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

  • @ЭлбердЧахкиев-ч7ь
    @ЭлбердЧахкиев-ч7ь 2 роки тому

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

  • @ivanpolynin8194
    @ivanpolynin8194 5 років тому

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

  • @sabearu
    @sabearu 5 років тому

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

  • @ВикторМаричев-й6г
    @ВикторМаричев-й6г 3 роки тому

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

  • @АлександрАндрющенко-н8в

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

  • @Галина-ю6ь1ь
    @Галина-ю6ь1ь 5 років тому

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

  • @dwmte
    @dwmte 4 роки тому

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

    • @mollex7826
      @mollex7826 4 роки тому

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

  • @merlin-ulg
    @merlin-ulg 5 років тому +1

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

  • @peterpierce8805
    @peterpierce8805 3 роки тому

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

  • @DimaNostradamus
    @DimaNostradamus 5 років тому

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

  • @ВиталийБалаян-э3н
    @ВиталийБалаян-э3н 4 роки тому

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

  • @Марат-Багаутдинов
    @Марат-Багаутдинов 5 років тому

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

  • @AndyGrooveStudio
    @AndyGrooveStudio 5 років тому

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

  • @maxpayne3225
    @maxpayne3225 3 роки тому

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

  • @merryrussell6135
    @merryrussell6135 3 роки тому

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

  • @ЕгорЛазука-й1э
    @ЕгорЛазука-й1э 5 років тому

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

  • @orazdurdyyew4136
    @orazdurdyyew4136 3 роки тому

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

  • @johnsharp4884
    @johnsharp4884 3 роки тому +1

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

  • @danil_1522
    @danil_1522 3 роки тому

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

  • @qqfakez
    @qqfakez 5 років тому

    barbajs тож не плох

  • @dumitru05
    @dumitru05 5 років тому

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

  • @gertrudegordon9380
    @gertrudegordon9380 3 роки тому +1

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

  • @ДанилБогнат
    @ДанилБогнат 3 роки тому

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

    • @divside
      @divside 2 роки тому

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

  • @ИльяАкчурин-т2г
    @ИльяАкчурин-т2г 3 роки тому +1

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

  • @geek7807
    @geek7807 5 років тому +3

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

    • @alexwest5057
      @alexwest5057 5 років тому +5

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

    • @vartvell
      @vartvell 5 років тому +1

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

    • @ArtemCherkassov
      @ArtemCherkassov 5 років тому +1

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

  • @shanonlawson2447
    @shanonlawson2447 3 роки тому +1

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

  • @qrthack
    @qrthack 5 років тому

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

  • @salman1539
    @salman1539 5 років тому +1

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

    • @Марат-Багаутдинов
      @Марат-Багаутдинов 5 років тому

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

    • @konstantinsurnin855
      @konstantinsurnin855 4 роки тому

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

    • @Channel-kp7qo
      @Channel-kp7qo 2 роки тому

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