Как сделать анимированный переход между страницами без перезагрузки?
HTML-код
- Опубликовано: 5 янв 2019
- Лучший 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
*Понравилось видео? Поддержки автора на **boosty.to/bedev** и получи уникальные закрытые курсы с практикой и поддержкой автора. (Описание ништяков для подписчиков в этом видео - **ruclips.net/video/qLrK8-NrQ9E/видео.html** )*
Супер !
Очень жду подобных уроков !!!!!
Дружище спасибо, на одном дыхании посмотрел, спасибо за творчество!
Саша, огромное человеческое спасибо, очень интересно, буду ждать твоих видео.
Такие кайфовые темы так просто излагаешь. Респект
Спасибо тебе, добрый человек!
Уже почти два месяца не занимался вёрсткой, посмотрел это видео, замотивировался. Очень библиотека понравилась, хочется больше таких видео! Завтра буду пробовать эту библиотеку.))
Супер, продолжай!
Огромное спасибо, очень понятно и хорошо объясняете!
Большое спасибо. Очень интересная и полезная вещь :)
Блин, это шикарно! Искал везде похожее решение, чтобы было не замудренно с ajax запросами и это видео очень помогло мне в этом. Спасибо огромное!!! Жду ещё полезных видео!!!
Спасибо огромное за видео ( легко, просто и очень интересно)
Спасибо! Хорошее видео, полезная инфа и советы
Спасибо за творчество.
Как всегда на высоте
Ураааааа, ты нас услышал!!!
Отличная штука) СПС тебе)
КРУТО!спасибо,Бро!
ура! получилось! спасибо😘
Спасибо большое. Нужно не перепутать самое главное между index.html и /index.html
Очень интересный ролик подпишусь и поставлю лайк👍
Спасибо тебе за это , у меня как раз возникла идея его сделать
Эх,какая ностальгия! Помню,начал учить html с твоего видоса! 😅
Thanks! Super useful!
Сяп, очень годно
До последнего не хотел врубать это видео, потому что и просмотров мало и вообще программирование терпеть не могу)
Но чет пздц зашло) Видно, что человек ты хороший и делаешь все не спустя рукава) Таких как ты приятно слушать и смотреть) Удачи в развитии!
Так в ролике программирования нет, смотри со спокойной душой
Это чудо какое-то!
дааа..круто!!
А вы еще можете снять видео о "livereload с webpack'ом" а то других чет не понимаю что-то.. Вы так четко и внятно объясняете.. Пожалуйста.. БУДУ ЖДАТЬ...
Отличный урок!
👍
Огонь!
Продолжай эту тему
Классный урок
молодец .супер .
спасибо!
ура видос
Вечер добрый
Отличный контент. давай контент по посадке верстки на вордпресс
спасибо
тема крутая! спасибо!
если кто-то ловит ошибку исполнения, перенесите проект на локальный сервер. denwer, openserver и тд.
Nodejs
ВАУ!!
Саш, ты лучший, просто денег нет на твой курс, но я держусь😐
Полезное видео. Спасибо.
А можно ли сделать такую смену страниц в Тильде?
Единственный блогер который мотивирует, с первых минут.
Топ
перешел по ссылке в описании, в итоге скачал файл, а там даже нету папки dist. И что делать теперь??
тоже самое
👍
Норм, а для чайников по подробнее про последние объяснения на счет галереи и ее взаимодействия с этой штукой можно подробнее?
Саня, сам обложку для видео делал?)
Круто , у меня проблема с 1 на 2 с анимацией ,а с 2 на 1 без анимации , есть какой-то выход ?
Попробовал внедрить, столкнулся с проблемой, при загрузке страницы нарушается порядок загрузки скриптов, и страница ломается..
Пробовал разобраться в мануале на оф сайте SWUP но что то не выходит.. Поможите?
Вопрос - допустим Yandex нашел вашу страницу step2. И при прямом переходе на неё, (минуя страницу step1, а оттуда на step2), мы пролетаем мимо активации скрипта и этот эффект не работает. Как тут быть?
4:51 не обращайте внимание на комментарий, просто отметил где остановился
Подскажите пожалуйста, работает ли это на ASP.NET ?
Привет, нужна помощь. Выдает ошибку Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/ihg2.html' cannot be swup.js 808. Что делать?
Посмотрел код в ООП не шарю но в JS да и вижу что он событием popstate всю магическую прогулку по истории браузера делает и добавляет в браузер history.pushState и контент изменяется но как написано в документации что событие popstate не видит изменения с помощью history.pushState я сам испробувал все варианты ничево не работает как у него работает я не представляю может хоть ктото подскажет...
Как заставить работать свой JS после подключения swup???
Будет ли работать в Laravel?
Не работает в яндекс браузере. Может проблема с ним? Плавности нет совсем.
И еще вопрос. Как можно добавить этот скрипт на сайт wordpress?
Библиотечка хорошая, но применить ее к шаблону bootstrap4 не вышло. Очень жаль
Прикольно. Мне кажется, что все-таки, для такой анимации лучше всего использовать какой-то фреймворк.js (Angular, react, Vue)🤣, ладно-ладно, я пошутил, не пинайте, хотяяяяя, если посмотреть.... , ладно ухожу😁
А что делать, если после этого перестают работать слайды от fotorama?
Начало js на 6:14
Emmet сам может прописывать Lorem, зачем ты пользуешься сторонним сервисом?) LoremКол-во слов и Tab
Весь вечер парился, так не сумел настроить корректную работу библиотеки.
хороший урок. прикольная библиотека, только у меня работает через раз, к сожалению
Еще бы показал, как это к Вордпрессу прикрутить, а то само-то по себе оно мало где пригодится без какого-нибудь движка.
Классно рассказываешь. Но как по мне, не сказал одного с главных минусов фриланса. Сидя дома, вряд ли получится полностью изолироваться от всего остального.
А причем тут фриланс??? Человек рассказывает про определенную вещь в коде..
Чевото не получается. Я конечно не врач, но по моему где-то что-то не так делаю. Дайте ктонить исходники пожалуйста.
доброго дня, почему то мобильное меню теперь
не сворачивается
У меня не работает, или без анимации, или нет перехода на другую страницу, зато есть затухпние, на локальном хосту тоже.
Пути менял.
INDEX
INDEX
INDEX
INDEX
Все не рабочее.
почему?
Может я что то не понимаю, так нет!
Наверстал один в один как у вас.
В чем дело? Почему не срабатывает анимация?
У кого-то получиось сделать?
Займусь на выходных, а пока домашка
можно ли сделать такой переход между разными доменами?
нет
Нужна помощь по JS
Для навигации по сайту я использую библиотеку Swup Одна из страниц - прогрес бар (скил бар) codepen.io/andrej-taranenko/pen/MWWoxrQ Но проблема в том что при переходе на эту страницу, анимация прогрес бара не работает.
Помогите пожалуйста прописать код JS так чтобы с каждым переходом на эту страницу срабатывала анимация прогрес бара. Спасибо.
когда переключаюсь по страницам при помощи swup, скрипты перестают работать
barbajs тож не плох
А через какую прогу код верстаешь?
Код пишут, а не верстают...
У каждой страницы могут быть кастомные CSS и JS файлы. При работе плагина они не подгружаются. Как быть?(
Gulp
@@konstantinsurnin855 имеешь введу все в один ?
Способ, конечно хороший, но для подобной задачи достаточно 15-20 строчек чистого JS. К чему нагружать сайт библиотекой.
Можешь написать эти 20 строчек, интересна реалищация
и мне интересно
Очень крутой плагин, но есть у него один маленький недостаток.. Если у вас на сайте есть другие плагины то он их все сломает
Почему - то плавный переход не работает...
Элита смотрит на x2 и впитывает бесценный опыт программирования
Лайк, если до конца посмотерл)
Не получается вроде бы всё сделал правилно
Молодец! А что скажешь насчет библиотеке 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 согласен, мне лично было все равно, есть она или нет, даже и не обращал внимания ))
Оптимальным вариантом будет использовать запись с камеры в вступительной речи, а дальше чистый скринкаст, так сказать и вашим и нашим или и рыбку съесть и куда сесть сами выбираете)
ИНТЕРЕСНЫЙ ФАКТ: Если не знаешь что написать пиши интересный факт.
html5 history api не слышали? давай до свидания!
Люди куда я попал? А html еще пользуются? Я думал конструкторы захватили мир)))
Благо этого ещё долго не произойдёт
Больше скажу, ИИ давно все программы пишет, а программисты без работы сидят,
@@konstantinsurnin855 ахвхвхаххахыхыхвхаххфххффхфххфыххыхвахазззыхвхаххфхх
Для кодеров пойдёт)
Кодер это подросток программист
Сначала ты нуб потом младший Кодер потом средний, старший а далее уже программист, хакер, цифровой бог)