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