Design and Build Scroll-Based CSS Animations

by Gary Simon22 May 2014

Lessons:15Length:2.3 hours

CSS Animation CSS UI Design Parallax Adobe Photoshop

Next lesson playing in 5 seconds

Free Preview: Design and Build Scroll-Based CSS Animations

Introduction

01:28

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 lesson, 01:28

Free Lesson

1.1
Introduction
01:28

2.Photoshop Mockup Design
5 lessons, 58:16

Free Lesson

2.1
Mockup Design (Part 1: Above the Fold)
14:33

2.2
Mockup Design (Part 2: First Animation)
13:12

2.3
Mockup Design (Part 3: Second Animation)
09:58

2.4
Mockup Design (Part 4: Third Animation)
12:40

2.5
Exporting Graphic Assets
07:53

3.HTML & CSS
3 lessons, 37:54

3.1
HTML & CSS (Part 1: Above the Fold)
14:56

3.2
HTML & CSS (Part 2: First Animation)
10:01

3.3
HTML & CSS (Part 3: Second & Third Animation)
12:57

4.Tying It All Together
5 lessons, 38:57

4.1
Animating the Phone and Monitor
09:08

4.2
Animating the Icons
04:52

4.3
Animating the Columns & Map
07:43

4.4
Responsive Adjustments (Part 1)
13:10

4.5
Responsive Adjustments (Part 2)
04:04

5.Conclusion
1 lesson, 01:07

5.1
Conclusion
01:07

Gsimon

Gary Simon has a 1 year old daughter named Natalie, and a beautiful wife Stephanie. He has two other interests aside from his internet business, which are fitness/lifting and being a hobby musician.