Как сделать анимированный переход между страницами без перезагрузки?
HTML-код
- Опубликовано: 27 авг 2024
- Лучший WordPress Шаблон - 1.envato.marke...
↓↓↓
Уроки по Веб Разработке - geniuscourses....
В этом коротком видео я показал как сделать переход между страницами анимированным без использования перезагрузки. Используя библиотеку SWUP можно получить подобный эффект.
Библиотека - github.com/gmr...
Добавьте меня в друзья
/ sochirca
alexand...
/ sochirca.alexandr
/ alexandr-sochirca-1669...
Шаблоны от Александра Сокирки
aletheme.com/
/ aletheme_agency
aletheme
/ alethemes
Курсы от Александра Сокирки
geniuscourses....
geniusc...
Быть Программистом
bedevel...
t.me/bedev
*Понравилось видео? Поддержки автора на **boosty.to/bedev** и получи уникальные закрытые курсы с практикой и поддержкой автора. (Описание ништяков для подписчиков в этом видео - **ruclips.net/video/qLrK8-NrQ9E/видео.html** )*
Супер !
Очень жду подобных уроков !!!!!
Дружище спасибо, на одном дыхании посмотрел, спасибо за творчество!
Супер, продолжай!
Такие кайфовые темы так просто излагаешь. Респект
Спасибо тебе, добрый человек!
Саша, огромное человеческое спасибо, очень интересно, буду ждать твоих видео.
Уже почти два месяца не занимался вёрсткой, посмотрел это видео, замотивировался. Очень библиотека понравилась, хочется больше таких видео! Завтра буду пробовать эту библиотеку.))
Единственный блогер который мотивирует, с первых минут.
Блин, это шикарно! Искал везде похожее решение, чтобы было не замудренно с ajax запросами и это видео очень помогло мне в этом. Спасибо огромное!!! Жду ещё полезных видео!!!
Ураааааа, ты нас услышал!!!
Большое спасибо. Очень интересная и полезная вещь :)
Спасибо большое. Нужно не перепутать самое главное между index.html и /index.html
Как всегда на высоте
ура! получилось! спасибо😘
Спасибо за творчество.
Огромное спасибо, очень понятно и хорошо объясняете!
тема крутая! спасибо!
если кто-то ловит ошибку исполнения, перенесите проект на локальный сервер. denwer, openserver и тд.
Nodejs
Спасибо! Хорошее видео, полезная инфа и советы
ура видос
Отличная штука) СПС тебе)
Эх,какая ностальгия! Помню,начал учить html с твоего видоса! 😅
Спасибо огромное за видео ( легко, просто и очень интересно)
До последнего не хотел врубать это видео, потому что и просмотров мало и вообще программирование терпеть не могу)
Но чет пздц зашло) Видно, что человек ты хороший и делаешь все не спустя рукава) Таких как ты приятно слушать и смотреть) Удачи в развитии!
Так в ролике программирования нет, смотри со спокойной душой
Спасибо тебе за это , у меня как раз возникла идея его сделать
Очень интересный ролик подпишусь и поставлю лайк👍
дааа..круто!!
А вы еще можете снять видео о "livereload с webpack'ом" а то других чет не понимаю что-то.. Вы так четко и внятно объясняете.. Пожалуйста.. БУДУ ЖДАТЬ...
Вечер добрый
КРУТО!спасибо,Бро!
перешел по ссылке в описании, в итоге скачал файл, а там даже нету папки dist. И что делать теперь??
тоже самое
4:51 не обращайте внимание на комментарий, просто отметил где остановился
Отличный контент. давай контент по посадке верстки на вордпресс
Отличный урок!
👍
Продолжай эту тему
Сяп, очень годно
Это чудо какое-то!
Саш, ты лучший, просто денег нет на твой курс, но я держусь😐
Полезное видео. Спасибо.
А можно ли сделать такую смену страниц в Тильде?
спасибо
Классно рассказываешь. Но как по мне, не сказал одного с главных минусов фриланса. Сидя дома, вряд ли получится полностью изолироваться от всего остального.
А причем тут фриланс??? Человек рассказывает про определенную вещь в коде..
Весь вечер парился, так не сумел настроить корректную работу библиотеки.
Топ
Thanks! Super useful!
Классный урок
Посмотрел код в ООП не шарю но в JS да и вижу что он событием popstate всю магическую прогулку по истории браузера делает и добавляет в браузер history.pushState и контент изменяется но как написано в документации что событие popstate не видит изменения с помощью history.pushState я сам испробувал все варианты ничево не работает как у него работает я не представляю может хоть ктото подскажет...
Попробовал внедрить, столкнулся с проблемой, при загрузке страницы нарушается порядок загрузки скриптов, и страница ломается..
Пробовал разобраться в мануале на оф сайте SWUP но что то не выходит.. Поможите?
Круто , у меня проблема с 1 на 2 с анимацией ,а с 2 на 1 без анимации , есть какой-то выход ?
Как заставить работать свой JS после подключения swup???
Огонь!
Еще бы показал, как это к Вордпрессу прикрутить, а то само-то по себе оно мало где пригодится без какого-нибудь движка.
молодец .супер .
спасибо!
Займусь на выходных, а пока домашка
доброго дня, почему то мобильное меню теперь
не сворачивается
Привет, нужна помощь. Выдает ошибку Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/ihg2.html' cannot be swup.js 808. Что делать?
Норм, а для чайников по подробнее про последние объяснения на счет галереи и ее взаимодействия с этой штукой можно подробнее?
Emmet сам может прописывать Lorem, зачем ты пользуешься сторонним сервисом?) LoremКол-во слов и Tab
Прикольно. Мне кажется, что все-таки, для такой анимации лучше всего использовать какой-то фреймворк.js (Angular, react, Vue)🤣, ладно-ладно, я пошутил, не пинайте, хотяяяяя, если посмотреть.... , ладно ухожу😁
ВАУ!!
Саня, сам обложку для видео делал?)
Почему - то плавный переход не работает...
Библиотечка хорошая, но применить ее к шаблону bootstrap4 не вышло. Очень жаль
👍
хороший урок. прикольная библиотека, только у меня работает через раз, к сожалению
Не работает в яндекс браузере. Может проблема с ним? Плавности нет совсем.
И еще вопрос. Как можно добавить этот скрипт на сайт wordpress?
Элита смотрит на x2 и впитывает бесценный опыт программирования
Вопрос - допустим Yandex нашел вашу страницу step2. И при прямом переходе на неё, (минуя страницу step1, а оттуда на step2), мы пролетаем мимо активации скрипта и этот эффект не работает. Как тут быть?
А что делать, если после этого перестают работать слайды от fotorama?
Способ, конечно хороший, но для подобной задачи достаточно 15-20 строчек чистого JS. К чему нагружать сайт библиотекой.
Можешь написать эти 20 строчек, интересна реалищация
и мне интересно
можно ли сделать такой переход между разными доменами?
нет
Подскажите пожалуйста, работает ли это на ASP.NET ?
Будет ли работать в Laravel?
Начало js на 6:14
Чевото не получается. Я конечно не врач, но по моему где-то что-то не так делаю. Дайте ктонить исходники пожалуйста.
У меня не работает, или без анимации, или нет перехода на другую страницу, зато есть затухпние, на локальном хосту тоже.
Пути менял.
INDEX
INDEX
INDEX
INDEX
Все не рабочее.
почему?
Может я что то не понимаю, так нет!
Наверстал один в один как у вас.
В чем дело? Почему не срабатывает анимация?
У кого-то получиось сделать?
когда переключаюсь по страницам при помощи swup, скрипты перестают работать
У каждой страницы могут быть кастомные CSS и JS файлы. При работе плагина они не подгружаются. Как быть?(
Gulp
@@konstantinsurnin855 имеешь введу все в один ?
Очень крутой плагин, но есть у него один маленький недостаток.. Если у вас на сайте есть другие плагины то он их все сломает
Лайк, если до конца посмотерл)
А через какую прогу код верстаешь?
Код пишут, а не верстают...
barbajs тож не плох
Для кодеров пойдёт)
Кодер это подросток программист
Сначала ты нуб потом младший Кодер потом средний, старший а далее уже программист, хакер, цифровой бог)
То чувства что ты просто играешь коддами😨
Нужна помощь по JS
Для навигации по сайту я использую библиотеку Swup Одна из страниц - прогрес бар (скил бар) codepen.io/andrej-taranenko/pen/MWWoxrQ Но проблема в том что при переходе на эту страницу, анимация прогрес бара не работает.
Помогите пожалуйста прописать код JS так чтобы с каждым переходом на эту страницу срабатывала анимация прогрес бара. Спасибо.
Не получается вроде бы всё сделал правилно
не работает, печально
Ха-ха-ха я вообще не слова не понял
А учится на разработчика сложно?
Молодец! А что скажешь насчет библиотеке barbajs.org/ ?
Dumitru Bolgari плохая документация
Всех приветствую, такая проблема возникла, есть сайт состоит пока из двух страниц: index.html и registration.html.
У каждой страницы свой css файл, для index это style.css, а для registration соответсвенно registration.css, проблема в том что мне надо при нажатии на кнопку что бы с index переходила на registration, воспользовался данным способом все переходит замечательно, но есть проблема что после перехода на registration страница не применяет на себя значения прописные ей в css файле, они применяются если только обновить страницу, я хочу что бы страница сразу загружалась с настройками из css, подскажите как быть, заранее всем спасибо!)
Так происходит потому что ты подгрузил кусок контента, а не стили. Объедение стили в один файл и все будет работать. Ну или на 1й странице тоже подключи registration.сss (но это порно). Используй вебпак и собери все в один css
Видео интересное, но говорящая голова сильно отвлекает, да и серьёзность как-то сразу пропадает.
Зачем люди постоянно «вебки» в видео вставляю... Это одна из Вселенских Тайн, ответ на которую мы вряд ли когда-нибудь узнаем)
Кстати, ещё очень сильное эхо. Не критично, но если это убрать, то будет вообще идеально.
У некоторых людей такая мизантропия, что они не переносят вид человеческое лица даже в таких видосах. )
Нормальный человек даже не обратил бы на это лицо внимания.
@@alexwest5057 согласен, мне лично было все равно, есть она или нет, даже и не обращал внимания ))
Оптимальным вариантом будет использовать запись с камеры в вступительной речи, а дальше чистый скринкаст, так сказать и вашим и нашим или и рыбку съесть и куда сесть сами выбираете)
ИНТЕРЕСНЫЙ ФАКТ: Если не знаешь что написать пиши интересный факт.
Люди куда я попал? А html еще пользуются? Я думал конструкторы захватили мир)))
Благо этого ещё долго не произойдёт
Больше скажу, ИИ давно все программы пишет, а программисты без работы сидят,
@@konstantinsurnin855 ахвхвхаххахыхыхвхаххфххффхфххфыххыхвахазззыхвхаххфхх
html5 history api не слышали? давай до свидания!