Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.

Design and Build Scroll-Based CSS Animations

with

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× speed

Free Preview: Design and Build Scroll-Based CSS Animations

Introduction

01:28

1.Introduction
1 lesson, 01:28

Free Preview
1.1
Introduction
01:28

2.Photoshop Mockup Design
5 lessons, 58:16

Free Preview
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


Preview for Design and Build Scroll-Based CSS Animations
Lessons:
15
Length:
2.3 hours
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.
+ Expand Bio- Collapse Bio