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

  Рет қаралды 31,959

Быть Программистом

Быть Программистом

5 жыл бұрын

Лучший 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

Пікірлер: 116
@bedeveloper
@bedeveloper 2 жыл бұрын
*Понравилось видео? Поддержки автора на **boosty.to/bedev** и получи уникальные закрытые курсы с практикой и поддержкой автора. (Описание ништяков для подписчиков в этом видео - **kzfaq.info/get/bejne/p7Kifptes9i1aXk.html** )*
@anonymoususer6103
@anonymoususer6103 5 жыл бұрын
Супер ! Очень жду подобных уроков !!!!!
@damianwilliams8032
@damianwilliams8032 3 жыл бұрын
Дружище спасибо, на одном дыхании посмотрел, спасибо за творчество!
@Radag0nn563
@Radag0nn563 5 жыл бұрын
Уже почти два месяца не занимался вёрсткой, посмотрел это видео, замотивировался. Очень библиотека понравилась, хочется больше таких видео! Завтра буду пробовать эту библиотеку.))
@svetlanavikulova2850
@svetlanavikulova2850 5 жыл бұрын
Саша, огромное человеческое спасибо, очень интересно, буду ждать твоих видео.
@marycummings2174
@marycummings2174 3 жыл бұрын
Такие кайфовые темы так просто излагаешь. Респект
@vladislavlitvin2442
@vladislavlitvin2442 5 жыл бұрын
Блин, это шикарно! Искал везде похожее решение, чтобы было не замудренно с ajax запросами и это видео очень помогло мне в этом. Спасибо огромное!!! Жду ещё полезных видео!!!
@user-ol5ot3sb4s
@user-ol5ot3sb4s 5 жыл бұрын
Спасибо тебе, добрый человек!
@godfreyimpson446
@godfreyimpson446 3 жыл бұрын
Огромное спасибо, очень понятно и хорошо объясняете!
@alex_ishchenko
@alex_ishchenko 5 жыл бұрын
Супер, продолжай!
@SLW0226
@SLW0226 5 жыл бұрын
Большое спасибо. Очень интересная и полезная вещь :)
@user-qd4ji2zz5m
@user-qd4ji2zz5m 3 жыл бұрын
Спасибо огромное за видео ( легко, просто и очень интересно)
@janestanley3042
@janestanley3042 3 жыл бұрын
Спасибо! Хорошее видео, полезная инфа и советы
@ataliewarner3302
@ataliewarner3302 3 жыл бұрын
Спасибо за творчество.
@suzanmoore4989
@suzanmoore4989 3 жыл бұрын
Как всегда на высоте
@beverleykelly1644
@beverleykelly1644 3 жыл бұрын
Ураааааа, ты нас услышал!!!
@user-zk7wn8li7c
@user-zk7wn8li7c 9 ай бұрын
ура! получилось! спасибо😘
@user-fq7lh2go1n
@user-fq7lh2go1n 3 жыл бұрын
Эх,какая ностальгия! Помню,начал учить html с твоего видоса! 😅
@helenstephens8036
@helenstephens8036 3 жыл бұрын
Спасибо тебе за это , у меня как раз возникла идея его сделать
@user-mp2rc8dr9q
@user-mp2rc8dr9q 3 жыл бұрын
КРУТО!спасибо,Бро!
@kalyszhek5296
@kalyszhek5296 5 жыл бұрын
дааа..круто!! А вы еще можете снять видео о "livereload с webpack'ом" а то других чет не понимаю что-то.. Вы так четко и внятно объясняете.. Пожалуйста.. БУДУ ЖДАТЬ...
@olegmaksimchik9622
@olegmaksimchik9622 5 жыл бұрын
Отличная штука) СПС тебе)
@user-pf7hc8tp4t
@user-pf7hc8tp4t 3 жыл бұрын
Очень интересный ролик подпишусь и поставлю лайк👍
@taraszuev4189
@taraszuev4189 5 жыл бұрын
Thanks! Super useful!
@alexeyfedorovich9769
@alexeyfedorovich9769 5 жыл бұрын
До последнего не хотел врубать это видео, потому что и просмотров мало и вообще программирование терпеть не могу) Но чет пздц зашло) Видно, что человек ты хороший и делаешь все не спустя рукава) Таких как ты приятно слушать и смотреть) Удачи в развитии!
@konstantinsurnin855
@konstantinsurnin855 3 жыл бұрын
Так в ролике программирования нет, смотри со спокойной душой
@odiljonolimjonov2920
@odiljonolimjonov2920 4 жыл бұрын
Спасибо большое. Нужно не перепутать самое главное между index.html и /index.html
@alexpoccob9091
@alexpoccob9091 5 жыл бұрын
Огонь!
@alekesm001
@alekesm001 Жыл бұрын
Это чудо какое-то!
@deny-y21
@deny-y21 5 жыл бұрын
Классный урок
@user-lp5xo1zb2t
@user-lp5xo1zb2t 3 жыл бұрын
Единственный блогер который мотивирует, с первых минут.
@blackdzhak9861
@blackdzhak9861 5 жыл бұрын
Сяп, очень годно
@iamname8758
@iamname8758 4 жыл бұрын
Отличный урок!
@bedeveloper
@bedeveloper 4 жыл бұрын
👍
@shondaclarke6633
@shondaclarke6633 3 жыл бұрын
Продолжай эту тему
@____-sss4602
@____-sss4602 5 жыл бұрын
молодец .супер .
@galogramma8461
@galogramma8461 4 жыл бұрын
тема крутая! спасибо! если кто-то ловит ошибку исполнения, перенесите проект на локальный сервер. denwer, openserver и тд.
@konstantinsurnin855
@konstantinsurnin855 3 жыл бұрын
Nodejs
@michaelcobb2386
@michaelcobb2386 3 жыл бұрын
Отличный контент. давай контент по посадке верстки на вордпресс
@ferym26
@ferym26 4 жыл бұрын
спасибо!
@janestanley3042
@janestanley3042 3 жыл бұрын
ура видос
@xexe4564
@xexe4564 5 жыл бұрын
Саш, ты лучший, просто денег нет на твой курс, но я держусь😐
@alexminenko2172
@alexminenko2172 4 жыл бұрын
Полезное видео. Спасибо. А можно ли сделать такую смену страниц в Тильде?
@user-qw9ef8tk8d
@user-qw9ef8tk8d 3 жыл бұрын
Вечер добрый
@Rus_1005
@Rus_1005 5 жыл бұрын
Норм, а для чайников по подробнее про последние объяснения на счет галереи и ее взаимодействия с этой штукой можно подробнее?
@peterpatterson3868
@peterpatterson3868 3 жыл бұрын
спасибо
@monolit-8346
@monolit-8346 5 жыл бұрын
ВАУ!!
@gamers_livetv4723
@gamers_livetv4723 Жыл бұрын
перешел по ссылке в описании, в итоге скачал файл, а там даже нету папки dist. И что делать теперь??
@widy2499
@widy2499 10 ай бұрын
тоже самое
@user-dz1fx5wt6v
@user-dz1fx5wt6v 4 жыл бұрын
Круто , у меня проблема с 1 на 2 с анимацией ,а с 2 на 1 без анимации , есть какой-то выход ?
@johnyork4070
@johnyork4070 3 жыл бұрын
Топ
@aidargilmanov2080
@aidargilmanov2080 5 жыл бұрын
👍
@geffestqqas2752
@geffestqqas2752 4 жыл бұрын
Подскажите пожалуйста, работает ли это на ASP.NET ?
@ivanpolynin8194
@ivanpolynin8194 5 жыл бұрын
Библиотечка хорошая, но применить ее к шаблону bootstrap4 не вышло. Очень жаль
@sashavarava7933
@sashavarava7933 4 ай бұрын
Как заставить работать свой JS после подключения swup???
@clleoweb4083
@clleoweb4083 4 жыл бұрын
Попробовал внедрить, столкнулся с проблемой, при загрузке страницы нарушается порядок загрузки скриптов, и страница ломается.. Пробовал разобраться в мануале на оф сайте SWUP но что то не выходит.. Поможите?
@yuriikilyk8923
@yuriikilyk8923 4 жыл бұрын
Посмотрел код в ООП не шарю но в JS да и вижу что он событием popstate всю магическую прогулку по истории браузера делает и добавляет в браузер history.pushState и контент изменяется но как написано в документации что событие popstate не видит изменения с помощью history.pushState я сам испробувал все варианты ничево не работает как у него работает я не представляю может хоть ктото подскажет...
@sabearu
@sabearu 4 жыл бұрын
А что делать, если после этого перестают работать слайды от fotorama?
@specserge
@specserge 4 жыл бұрын
Не работает в яндекс браузере. Может проблема с ним? Плавности нет совсем. И еще вопрос. Как можно добавить этот скрипт на сайт wordpress?
@SQWE23
@SQWE23 4 жыл бұрын
Вопрос - допустим Yandex нашел вашу страницу step2. И при прямом переходе на неё, (минуя страницу step1, а оттуда на step2), мы пролетаем мимо активации скрипта и этот эффект не работает. Как тут быть?
@romeg4566
@romeg4566 3 жыл бұрын
Будет ли работать в Laravel?
@fastikunlocktom3270
@fastikunlocktom3270 4 жыл бұрын
Привет, нужна помощь. Выдает ошибку Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/ihg2.html' cannot be swup.js 808. Что делать?
@DeanRie
@DeanRie 5 жыл бұрын
Саня, сам обложку для видео делал?)
@heliacmr
@heliacmr 5 жыл бұрын
Emmet сам может прописывать Lorem, зачем ты пользуешься сторонним сервисом?) LoremКол-во слов и Tab
@bapehnkk
@bapehnkk 4 жыл бұрын
Весь вечер парился, так не сумел настроить корректную работу библиотеки.
@johnyork4070
@johnyork4070 3 жыл бұрын
Классно рассказываешь. Но как по мне, не сказал одного с главных минусов фриланса. Сидя дома, вряд ли получится полностью изолироваться от всего остального.
@divside
@divside 2 жыл бұрын
А причем тут фриланс??? Человек рассказывает про определенную вещь в коде..
@user-rj6ro3mp1p
@user-rj6ro3mp1p 5 жыл бұрын
Прикольно. Мне кажется, что все-таки, для такой анимации лучше всего использовать какой-то фреймворк.js (Angular, react, Vue)🤣, ладно-ладно, я пошутил, не пинайте, хотяяяяя, если посмотреть.... , ладно ухожу😁
@merlin-ulg
@merlin-ulg 5 жыл бұрын
Еще бы показал, как это к Вордпрессу прикрутить, а то само-то по себе оно мало где пригодится без какого-нибудь движка.
@user-ei4xv6bl5i
@user-ei4xv6bl5i 5 жыл бұрын
Чевото не получается. Я конечно не врач, но по моему где-то что-то не так делаю. Дайте ктонить исходники пожалуйста.
@DimaNostradamus
@DimaNostradamus 5 жыл бұрын
хороший урок. прикольная библиотека, только у меня работает через раз, к сожалению
@bertinashelton3883
@bertinashelton3883 3 жыл бұрын
4:51 не обращайте внимание на комментарий, просто отметил где остановился
@peterpierce8805
@peterpierce8805 3 жыл бұрын
Займусь на выходных, а пока домашка
@user-tt6hq8tb8c
@user-tt6hq8tb8c 2 жыл бұрын
можно ли сделать такой переход между разными доменами?
@divside
@divside 2 жыл бұрын
нет
@user-bz4kg4hx7l
@user-bz4kg4hx7l 3 жыл бұрын
когда переключаюсь по страницам при помощи swup, скрипты перестают работать
@michaelteljatnikow5471
@michaelteljatnikow5471 Ай бұрын
доброго дня, почему то мобильное меню теперь не сворачивается
@user-ov1li6ze6z
@user-ov1li6ze6z 3 жыл бұрын
У меня не работает, или без анимации, или нет перехода на другую страницу, зато есть затухпние, на локальном хосту тоже. Пути менял. INDEX INDEX INDEX INDEX Все не рабочее. почему? Может я что то не понимаю, так нет! Наверстал один в один как у вас. В чем дело? Почему не срабатывает анимация? У кого-то получиось сделать?
@Марат-Багаутдинов
@Марат-Багаутдинов 5 жыл бұрын
Способ, конечно хороший, но для подобной задачи достаточно 15-20 строчек чистого JS. К чему нагружать сайт библиотекой.
@konstantinsurnin855
@konstantinsurnin855 3 жыл бұрын
Можешь написать эти 20 строчек, интересна реалищация
@user-zk7wn8li7c
@user-zk7wn8li7c 9 ай бұрын
и мне интересно
@user-xo3js6xy8w
@user-xo3js6xy8w 4 жыл бұрын
У каждой страницы могут быть кастомные CSS и JS файлы. При работе плагина они не подгружаются. Как быть?(
@konstantinsurnin855
@konstantinsurnin855 3 жыл бұрын
Gulp
@user-xo3js6xy8w
@user-xo3js6xy8w 3 жыл бұрын
@@konstantinsurnin855 имеешь введу все в один ?
@AndyGrooveStudio
@AndyGrooveStudio 4 жыл бұрын
Нужна помощь по JS Для навигации по сайту я использую библиотеку Swup Одна из страниц - прогрес бар (скил бар) codepen.io/andrej-taranenko/pen/MWWoxrQ Но проблема в том что при переходе на эту страницу, анимация прогрес бара не работает. Помогите пожалуйста прописать код JS так чтобы с каждым переходом на эту страницу срабатывала анимация прогрес бара. Спасибо.
@dwmte
@dwmte 4 жыл бұрын
А через какую прогу код верстаешь?
@mollex7826
@mollex7826 4 жыл бұрын
Код пишут, а не верстают...
@maxpayne3225
@maxpayne3225 3 жыл бұрын
Очень крутой плагин, но есть у него один маленький недостаток.. Если у вас на сайте есть другие плагины то он их все сломает
@sokratvideo666
@sokratvideo666 Жыл бұрын
Почему - то плавный переход не работает...
@user-qb7jg4hx5l
@user-qb7jg4hx5l 5 жыл бұрын
Начало js на 6:14
@merryrussell6135
@merryrussell6135 3 жыл бұрын
Элита смотрит на x2 и впитывает бесценный опыт программирования
@Alexander-wx1hy
@Alexander-wx1hy 5 жыл бұрын
barbajs тож не плох
@orazdurdyyew4136
@orazdurdyyew4136 2 жыл бұрын
Не получается вроде бы всё сделал правилно
@danil_1522
@danil_1522 3 жыл бұрын
не работает, печально
@peterpierce8805
@peterpierce8805 3 жыл бұрын
Лайк, если до конца посмотерл)
@dumitru05
@dumitru05 5 жыл бұрын
Молодец! А что скажешь насчет библиотеке barbajs.org/ ?
@user-pn7vo5kk1j
@user-pn7vo5kk1j 5 жыл бұрын
Dumitru Bolgari плохая документация
@user-iu9vx9xs9g
@user-iu9vx9xs9g 2 жыл бұрын
Всех приветствую, такая проблема возникла, есть сайт состоит пока из двух страниц: index.html и registration.html. У каждой страницы свой css файл, для index это style.css, а для registration соответсвенно registration.css, проблема в том что мне надо при нажатии на кнопку что бы с index переходила на registration, воспользовался данным способом все переходит замечательно, но есть проблема что после перехода на registration страница не применяет на себя значения прописные ей в css файле, они применяются если только обновить страницу, я хочу что бы страница сразу загружалась с настройками из css, подскажите как быть, заранее всем спасибо!)
@divside
@divside 2 жыл бұрын
Так происходит потому что ты подгрузил кусок контента, а не стили. Объедение стили в один файл и все будет работать. Ну или на 1й странице тоже подключи registration.сss (но это порно). Используй вебпак и собери все в один css
@johnsharp4884
@johnsharp4884 3 жыл бұрын
То чувства что ты просто играешь коддами😨
@user-qs9cx1kf1i
@user-qs9cx1kf1i 3 жыл бұрын
Ха-ха-ха я вообще не слова не понял
@gertrudegordon9380
@gertrudegordon9380 3 жыл бұрын
А учится на разработчика сложно?
@geek7807
@geek7807 5 жыл бұрын
Видео интересное, но говорящая голова сильно отвлекает, да и серьёзность как-то сразу пропадает. Зачем люди постоянно «вебки» в видео вставляю... Это одна из Вселенских Тайн, ответ на которую мы вряд ли когда-нибудь узнаем) Кстати, ещё очень сильное эхо. Не критично, но если это убрать, то будет вообще идеально.
@alexwest5057
@alexwest5057 5 жыл бұрын
У некоторых людей такая мизантропия, что они не переносят вид человеческое лица даже в таких видосах. ) Нормальный человек даже не обратил бы на это лицо внимания.
@vartvell
@vartvell 5 жыл бұрын
@@alexwest5057 согласен, мне лично было все равно, есть она или нет, даже и не обращал внимания ))
@ArtemCherkassov
@ArtemCherkassov 5 жыл бұрын
Оптимальным вариантом будет использовать запись с камеры в вступительной речи, а дальше чистый скринкаст, так сказать и вашим и нашим или и рыбку съесть и куда сесть сами выбираете)
@qrthack
@qrthack 5 жыл бұрын
html5 history api не слышали? давай до свидания!
@salman1539
@salman1539 5 жыл бұрын
Люди куда я попал? А html еще пользуются? Я думал конструкторы захватили мир)))
@Марат-Багаутдинов
@Марат-Багаутдинов 5 жыл бұрын
Благо этого ещё долго не произойдёт
@konstantinsurnin855
@konstantinsurnin855 3 жыл бұрын
Больше скажу, ИИ давно все программы пишет, а программисты без работы сидят,
@Channel-kp7qo
@Channel-kp7qo 2 жыл бұрын
@@konstantinsurnin855 ахвхвхаххахыхыхвхаххфххффхфххфыххыхвахазззыхвхаххфхх
@shanonlawson2447
@shanonlawson2447 3 жыл бұрын
ИНТЕРЕСНЫЙ ФАКТ: Если не знаешь что написать пиши интересный факт.
@FuckOF...
@FuckOF... Жыл бұрын
Для кодеров пойдёт) Кодер это подросток программист Сначала ты нуб потом младший Кодер потом средний, старший а далее уже программист, хакер, цифровой бог)
Полный обзор программы Adobe XD
19:27
Быть Программистом
Рет қаралды 37 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 119 МЛН
Советы на всё лето 4 @postworkllc
00:23
История одного вокалиста
Рет қаралды 4,5 МЛН
Fast and Furious: New Zealand 🚗
00:29
How Ridiculous
Рет қаралды 45 МЛН
Как легко удалять объекты с изображений при помощи AI?
17:40
Почему начинающие не понимают Javascript
7:32
Web Developer Blog
Рет қаралды 228 М.
Пишем музыку в FL Studio 12 (Урок 2)
12:34
Atmosferno Production (ex Rafinad Sound)
Рет қаралды 1,4 МЛН
Как сделать сотни сайтов одной установкой WordPress?
23:43
Быть Программистом
Рет қаралды 19 М.
Конструкция IF ELSE в PHP
10:03
Быть Программистом
Рет қаралды 7 М.
Прокрутка с привязкой на CSS. Что такое scroll snap? | VIMP dev
18:07
VIMP dev — верстка сайтов
Рет қаралды 26 М.
Double Stacked Pizza @Lionfield @ChefRush
00:33
albert_cancook
Рет қаралды 119 МЛН