Lessons:15Length:2.3 hours
Activating CSS animations based on scrolling is a relatively new (and cool) technique that many of today’s front-end developers are taking advantage of. These parallax scrolling effects are triggered by a user scrolling the page, and can really show off your content and help to enhance your websites. In this course, Gary Simon will show you how to design and then build scroll-based CSS animations.
1.Introduction
1.1Introduction01:28
1.1
Introduction
01:28
2.Photoshop Mockup Design
2.1Mockup Design (Part 1: Above the Fold)14:33
2.1
Mockup Design (Part 1: Above the Fold)
14:33
2.2Mockup Design (Part 2: First Animation)13:12
2.2
Mockup Design (Part 2: First Animation)
13:12
2.3 Mockup Design (Part 3: Second Animation)09:58
2.3
Mockup Design (Part 3: Second Animation)
09:58
2.4Mockup Design (Part 4: Third Animation)12:40
2.4
Mockup Design (Part 4: Third Animation)
12:40
2.5Exporting Graphic Assets07:53
2.5
Exporting Graphic Assets
07:53
3.HTML & CSS
3.1HTML & CSS (Part 1: Above the Fold)14:56
3.1
HTML & CSS (Part 1: Above the Fold)
14:56
3.2HTML & CSS (Part 2: First Animation)10:01
3.2
HTML & CSS (Part 2: First Animation)
10:01
3.3HTML & CSS (Part 3: Second & Third Animation)12:57
3.3
HTML & CSS (Part 3: Second & Third Animation)
12:57
4.Tying It All Together
4.1Animating the Phone and Monitor09:08
4.1
Animating the Phone and Monitor
09:08
4.2Animating the Icons04:52
4.2
Animating the Icons
04:52
4.3Animating the Columns & Map07:43
4.3
Animating the Columns & Map
07:43
4.4Responsive Adjustments (Part 1)13:10
4.4
Responsive Adjustments (Part 1)
13:10
4.5Responsive Adjustments (Part 2)04:04
4.5
Responsive Adjustments (Part 2)
04:04
5.Conclusion
5.1Conclusion01:07
5.1
Conclusion
01:07
