Animation in modern websites is usually limited to hover effects, banner sliders, and the like. More rarely might we see websites that transition from one page to the next, as you experience in a mobile app. In this course, you'll learn how to build animated page transitions for the web using HTML5, CSS transitions, and jQuery.
Learn CSS: The Complete Guide
We've built complete guides to help you learn CSS and animate css, whether you're just getting started with the basics or you want to explore more advanced techniques.
1.Introduction
1.1Welcome to the Course00:40
1.1
Welcome to the Course
00:40
2.Getting Started
2.1What Are We Building?03:28
2.1
What Are We Building?
03:28
2.2The Starter Files04:14
2.2
The Starter Files
04:14
3.Loading External Content
3.1Intercepting Link Clicks10:01
3.1
Intercepting Link Clicks
10:01
3.2Loading External Content09:07
3.2
Loading External Content
09:07
3.3Replacing HTML Content09:09
3.3
Replacing HTML Content
09:09
3.4Changing the Hero Image07:46
3.4
Changing the Hero Image
07:46
3.5Fixing the Navigation11:27
3.5
Fixing the Navigation
11:27
4.Animating the Transitions
4.1Animating the Hero Image11:35
4.1
Animating the Hero Image
11:35
4.2Animating the Main Content04:49
4.2
Animating the Main Content
04:49
4.3Animated Page Transitions08:53
4.3
Animated Page Transitions
08:53
5.Manipulating the Browser History
5.1Introducing the HTML5 History API07:21
5.1
Introducing the HTML5 History API
07:21
5.2Back and Forth Through History05:39
5.2
Back and Forth Through History
05:39
5.3Finishing Touches07:34
5.3
Finishing Touches
07:34
6.Conclusion
6.1Final Thoughts00:47
6.1
Final Thoughts
00:47
