Craig CampbellJun 25, 2018Lessons: 15Length: 1.7 hours

Next lesson playing in 5 seconds

Overview
Transcript

4.1 Animating the Hero Image

In this lesson, you will get your feet wet with animated page transitions as you create a CSS animation for the hero image on the page.

1.Introduction
1 lesson, 00:40

1.1
Welcome to the Course
00:40

2.Getting Started
2 lessons, 07:42

2.1
What Are We Building?
03:28

3.Loading External Content
5 lessons, 47:30

3.1
Intercepting Link Clicks
10:01

3.2
Loading External Content
09:07

3.3
Replacing HTML Content
09:09

3.4
Changing the Hero Image
07:46

3.5
Fixing the Navigation
11:27

4.Animating the Transitions
3 lessons, 25:17

4.1
Animating the Hero Image
11:35

4.2
Animating the Main Content
04:49

4.3
Animated Page Transitions
08:53

5.Manipulating the Browser History
3 lessons, 20:34

5.1
Introducing the HTML5 History API
07:21

5.2
Back and Forth Through History
05:39

6.Conclusion
1 lesson, 00:47

Craig has been doodling on computers since the first time he opened Paintbrush in Windows 3.0 in 1990. Since then, he has constantly sought new and exciting ways to make beautiful things on computers.

craigsoup

Creating Animated HTML5 Page Transitions

Next lesson playing in 5 seconds

4.1 Animating the Hero Image

1.Introduction
1 lesson, 00:40

1.1
Welcome to the Course
00:40

2.Getting Started
2 lessons, 07:42

2.1
What Are We Building?
03:28

2.2
The Starter Files
04:14

3.Loading External Content
5 lessons, 47:30

3.1
Intercepting Link Clicks
10:01

3.2
Loading External Content
09:07

3.3
Replacing HTML Content
09:09

3.4
Changing the Hero Image
07:46

3.5
Fixing the Navigation
11:27

4.Animating the Transitions
3 lessons, 25:17

4.1
Animating the Hero Image
11:35

4.2
Animating the Main Content
04:49

4.3
Animated Page Transitions
08:53

5.Manipulating the Browser History
3 lessons, 20:34

5.1
Introducing the HTML5 History API
07:21

5.2
Back and Forth Through History
05:39

5.3
Finishing Touches
07:34

6.Conclusion
1 lesson, 00:47

6.1
Final Thoughts
00:47

Creating Animated HTML5 Page Transitions

Next lesson playing in 5 seconds

4.1 Animating the Hero Image

1.Introduction1 lesson, 00:40

2.Getting Started2 lessons, 07:42

3.Loading External Content5 lessons, 47:30

4.Animating the Transitions3 lessons, 25:17

5.Manipulating the Browser History3 lessons, 20:34

6.Conclusion1 lesson, 00:47

1.Introduction
1 lesson, 00:40

2.Getting Started
2 lessons, 07:42

3.Loading External Content
5 lessons, 47:30

4.Animating the Transitions
3 lessons, 25:17

5.Manipulating the Browser History
3 lessons, 20:34

6.Conclusion
1 lesson, 00:47