Video icon 64
Want to be a web designer? Skill up fast with video courses from Tuts+. Start your free trial.

Parallax Scrolling for Web Design

with

Parallax scrolling is when two objects move across a screen at different rates to imply depth and perspective. Want to learn how to do it in your web design? Let’s learn some basic skills.

1× speed

Free Preview: Parallax Scrolling for Web Design

Introduction

01:27

1.Welcome
2 lessons, 06:53

Free Preview
1.1
Introduction
01:27

Free Preview
1.2
Parallax Examples
05:26

2.Project 1: Simple Parallax Scrolling
3 lessons, 29:20

2.1
Our First Project
06:19

2.2
Styling the Page
10:56

2.3
Coding the Parallax Effect
12:05

3.Project 2: Complex Scrolling
9 lessons, 1:17:49

3.1
Our Second Project
03:25

3.2
Adding Images
07:13

3.3
Creating the Navigation
05:11

3.4
Styling the Page in CSS
09:55

3.5
Cleaning Up the CSS
02:55

3.6
Positioning the Elements
18:38

3.7
Scrolling the Stars
09:12

3.8
Scrolling the Images
10:01

3.9
Coding the Links
11:19

4.Conclusion
1 lesson, 02:19

4.1
Final Thoughts
02:19


Preview for Parallax Scrolling for Web Design
Lessons:
15
Length:
1.9 hours
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.
+ Expand Bio- Collapse Bio