English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 38 Lessons (4h 10m) | 1.29 GB
Integrate the Barba.js Javascript library into your websites and use CSS and Javascript techniques to add smooth and harmonious effects.
This go-at-your-own-pace course has 3 hours of video lessons that will teach you how to create beautiful, smooth page transitions on your websites using CSS and Javascript.
In this course, SuperHi has designed and produced a series of projects covering how to make websites go from disconnected page navigation to seamless, animated transitions as your users click and interact around your web designs.
You will learn how to integrate the Barba Javascript library into your websites which will then allow you to add CSS and other Javascript techniques to add smooth, harmonious effects to your design work.
What you’ll learn
- How to design with page transitions and animations in mind
- Adding full and partial page transitions to a website design
- How to add a timeline of animations between pages loading
- How to cache future pages to make your site superfast
- How to make sure all your code works on future page transitions
- How to add animations within a page scroll
Table of Contents
1 Welcome to the Page Transitions course
2 Setting up ourselves for page transitions
3 What’s in our starter kit?
4 Adding Barba.js to our project
5 Setting up our HTML for Barba.js
6 Setting up our Javascript for Barba.js
7 Setting up Barba’s CSS
8 Adding nicer page transitions to our project
9 Barba’s beforeEnter hook
10 Correcting our navigation links
11 Changing the body tag with Barba’s views
12 Adding Barba’s ‘once’ and adding CSS animations
13 Welcome to Canvas Magazine!
14 Setting up our project
15 The IntersectionObserver
16 Image display using the same IntersectionObserver
17 Setting up Barba’s HTML
18 Initializing Barba.js
19 Testing with Barba’s CSS module
20 Making sure our code works between pages
21 Javascript Promises in hooks
22 GSAP Timelines
23 Adding current and next transitions with GSAP
24 Adding a once transition
25 Adding a product view and namespace
26 Adding imagesLoaded to our loading
27 Welcome to Wanderers
28 Setting up our project HTML
29 Setting up Barba
30 Fading in our navigation
31 Adding a photos fade and movement
32 Adding a wiper effect
33 Adding an image to our interstitial
34 Adding text transitions
35 Changing the text with data attributes
36 Adding in multiple transitions
37 Barba Prefetch
38 Thanks for joining our course
Resolve the captcha to access the links!