Главная страница Категория css Page Transitions

Page Transitions

Name: Page Transitions
Price: 13 USD
Rating: 5 (5 reviews)

superhi.com

★ 5 (всего оценок - 5)

Начать Сейчас

Продолжительность

4 ч 10 мин

Категория

CSS

Количество уроков

38 Видео

Дата добавления

14 янв. 2022 г., 21:32

Язык

Английский

Интегрируйте библиотеку Barba.js в свои веб-сайты и используйте методы CSS и Javascript для добавления плавных и гармоничных эффектов. В этом курсе SuperHi разработала и выпустила серию проектов, посвященных тому, как заставить веб-сайты перейти от автономной навигации по страницам к плавным анимированным переходам, когда ваши пользователи нажимают и взаимодействуют с вашим веб-дизайном.

Вы узнаете, как интегрировать библиотеку Javascript Barba в свои веб-сайты, что позволит вам добавлять CSS и другие методы Javascript для добавления плавных, гармоничных эффектов в вашу дизайнерскую работу.

Как проектировать с учетом переходов страниц и анимации
Добавление полных и частичных переходов страниц в дизайн сайта
Как добавить временную шкалу анимации между загрузкой страниц
Как кэшировать будущие страницы, чтобы сделать ваш сайт сверхбыстрым
Как убедиться, что весь ваш код работает при будущих переходах страниц
Как добавить анимацию в прокрутку страницы

Посмотреть больше

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

Урок 1. 00:00:48

Welcome to the Page Transitions course
Урок 2. 00:06:20

Setting up ourselves for page transitions
Урок 3. 00:05:04

What's in our starter kit?
Урок 4. 00:06:59

Adding Barba.js to our project
Урок 5. 00:07:01

Setting up our HTML for Barba.js
Урок 6. 00:06:56

Setting up our Javascript for Barba.js
Урок 7. 00:06:27

Setting up Barba's CSS
Урок 8. 00:06:00

Adding nicer page transitions to our project
Урок 9. 00:06:21

Barba's beforeEnter hook
Урок 10. 00:14:11

Correcting our navigation links
Урок 11. 00:11:38

Changing the body tag with Barba's views
Урок 12. 00:09:21

Adding Barba's 'once' and adding CSS animations
Урок 13. 00:02:54

Welcome to Canvas Magazine!
Урок 14. 00:06:41

Setting up our project
Урок 15. 00:17:35

The IntersectionObserver
Урок 16. 00:06:43

Image display using the same IntersectionObserver
Урок 17. 00:06:28

Setting up Barba's HTML
Урок 18. 00:04:08

Initializing Barba.js
Урок 19. 00:03:06

Testing with Barba's CSS module
Урок 20. 00:08:15

Making sure our code works between pages
Урок 21. 00:04:33

Javascript Promises in hooks
Урок 22. 00:08:38

GSAP Timelines
Урок 23. 00:08:55

Adding current and next transitions with GSAP
Урок 24. 00:04:31

Adding a once transition
Урок 25. 00:06:09

Adding a product view and namespace
Урок 26. 00:05:28

Adding imagesLoaded to our loading
Урок 27. 00:02:22

Welcome to Wanderers
Урок 28. 00:04:27

Setting up our project HTML
Урок 29. 00:05:25

Setting up Barba
Урок 30. 00:06:07

Fading in our navigation
Урок 31. 00:05:06

Adding a photos fade and movement
Урок 32. 00:10:44

Adding a wiper effect
Урок 33. 00:08:05

Adding an image to our interstitial
Урок 34. 00:08:45

Adding text transitions
Урок 35. 00:06:29

Changing the text with data attributes
Урок 36. 00:09:08

Adding in multiple transitions
Урок 37. 00:02:14

Barba Prefetch
Урок 38. 00:00:31

Thanks for joining our course

Автор - superhi.com

superhi.com

Мы делаем онлайн-курсы, которые помогают творческим людям выделиться. Узнайте, как писать, разрабатывать и управлять проектами в нашем глобальном сообществе!