superhi.com
Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!
Продолжительность
4 ч 10 мин
Категория
barba.jsКоличество уроков
38 Видео
Дата добавления
14 янв. 2022 г., 21:32
Язык
Английский
Дата обновления
29 апр. 2026 г., 13:45
Page Transitions — это практический курс, который поможет вам создать более плавный, современный и визуально привлекательный пользовательский опыт. Вы узнаете, как использовать Barba.js, CSS и Javascript-анимации для превращения обычной навигации по сайту в динамичные переходы, которые усиливают дизайн и удерживают внимание пользователей.
Что вы изучите в этом курсе
Курс шаг за шагом проведет вас через процесс интеграции Barba.js в ваш проект, объяснит ключевые подходы к анимации переходов и покажет, как настраивать логику загрузки страниц для создания плавного UX.
Понимание принципов анимированной навигации
Перед тем как приступать к коду, важно научиться думать о дизайне с точки зрения переходов. Вы узнаете:
- как планировать пользовательские сценарии с учетом переходов;
- какие элементы интерфейса стоит анимировать, чтобы не перегрузить дизайн;
- как переходы влияют на восприятие скорости и качества сайта.
Создание плавных переходов между страницами
Barba.js позволит вам заменить стандартную перезагрузку страниц на анимации. На практике вы научитесь:
- добавлять полные и частичные переходы между страницами;
- организовывать анимации через CSS и Javascript;
- работать с временными шкалами анимации, чтобы добиться идеального тайминга.
Интеграция анимаций во время загрузки
Отдельный блок курса посвящен тому, как анимировать процесс загрузки контента. Это делает переходы более естественными и визуально последовательными.
Технические приемы и продвинутые возможности
Чтобы ваш сайт стал не только красивым, но и быстрым, курс раскрывает важные методы оптимизации и правильной архитектуры.
Кэширование страниц и повышение скорости
Вы научитесь предварительно загружать страницы, которые пользователь, вероятно, откроет следующими. Это позволяет:
- сократить время ожидания при переходах;
- создать ощущение мгновенной навигации;
- сделать интерфейс плавнее и отзывчивее.
Грамотная организация Javascript-кода
Barba.js требует корректного подключения скриптов при каждом переходе. В курсе вы разберете:
- как обеспечить запуск нужного кода при смене страницы;
- как избегать дублирования логики и утечек памяти;
- как структурировать проект для масштабируемости.
Добавление анимаций при прокрутке
Помимо переходов, вы также освоите внедрение скролл-анимаций, которые делают страницы более живыми и переосмысляют взаимодействие пользователя с контентом.
Для кого этот курс
Курс отлично подходит веб-дизайнерам, фронтенд-разработчикам и авторам креативных сайтов, которые хотят добавить выразительности своим проектам и улучшить пользовательский опыт без перегрузки интерфейса.
Чему вы будете готовы после завершения
Закончив курс, вы сможете уверенно интегрировать Barba.js, создавать продвинутые анимированные переходы, оптимизировать скорость сайта и разрабатывать современные, плавные интерфейсы, которые выделяются на фоне обычных веб-страниц.
Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум
- Урок 1. 00:00:48Welcome to the Page Transitions course
- Урок 2. 00:06:20Setting up ourselves for page transitions
- Урок 3. 00:05:04What's in our starter kit?
- Урок 4. 00:06:59Adding Barba.js to our project
- Урок 5. 00:07:01Setting up our HTML for Barba.js
- Урок 6. 00:06:56Setting up our Javascript for Barba.js
- Урок 7. 00:06:27Setting up Barba's CSS
- Урок 8. 00:06:00Adding nicer page transitions to our project
- Урок 9. 00:06:21Barba's beforeEnter hook
- Урок 10. 00:14:11Correcting our navigation links
- Урок 11. 00:11:38Changing the body tag with Barba's views
- Урок 12. 00:09:21Adding Barba's 'once' and adding CSS animations
- Урок 13. 00:02:54Welcome to Canvas Magazine!
- Урок 14. 00:06:41Setting up our project
- Урок 15. 00:17:35The IntersectionObserver
- Урок 16. 00:06:43Image display using the same IntersectionObserver
- Урок 17. 00:06:28Setting up Barba's HTML
- Урок 18. 00:04:08Initializing Barba.js
- Урок 19. 00:03:06Testing with Barba's CSS module
- Урок 20. 00:08:15Making sure our code works between pages
- Урок 21. 00:04:33Javascript Promises in hooks
- Урок 22. 00:08:38GSAP Timelines
- Урок 23. 00:08:55Adding current and next transitions with GSAP
- Урок 24. 00:04:31Adding a once transition
- Урок 25. 00:06:09Adding a product view and namespace
- Урок 26. 00:05:28Adding imagesLoaded to our loading
- Урок 27. 00:02:22Welcome to Wanderers
- Урок 28. 00:04:27Setting up our project HTML
- Урок 29. 00:05:25Setting up Barba
- Урок 30. 00:06:07Fading in our navigation
- Урок 31. 00:05:06Adding a photos fade and movement
- Урок 32. 00:10:44Adding a wiper effect
- Урок 33. 00:08:05Adding an image to our interstitial
- Урок 34. 00:08:45Adding text transitions
- Урок 35. 00:06:29Changing the text with data attributes
- Урок 36. 00:09:08Adding in multiple transitions
- Урок 37. 00:02:14Barba Prefetch
- Урок 38. 00:00:31Thanks for joining our course
Автор - superhi.com
Комментарии