From the course: Web Motion: Create a Parallax Effect
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Create parallax motion in Google Web Designer
From the course: Web Motion: Create a Parallax Effect
Create parallax motion in Google Web Designer
With our assets in place, we can now concentrate on putting things in motion. To get yourself started, open the file saved in the last exercise, or use the flight.html file found in the GWD motion folder in your download. Before we start, let's review our plan of attack. The background, because it is far away will move slowly, and we're going to move it slowly from right to left. The clouds, which are closer, will move a bit quicker from left to right, and the plane will move from the top of the stage to the bottom of the stage, and that will have motion that is faster than the clouds. Also, keep in mind, speed equals distance over time. Seeing as how this whole thing is to last a constant five seconds for each animation, this means the background moves a short distance, the clouds move a longer distance, and the plane moves from top to bottom fairly quickly. With that in mind, let's get started. Notice that we got all these dotted lines and little labels, and things like that. That…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
Parallax overview3m 19s
-
(Locked)
Google Web Designer fundamentals8m 43s
-
(Locked)
Create parallax motion in Google Web Designer6m 22s
-
(Locked)
Add interactivity in Google Web Designer4m 48s
-
(Locked)
Create parallax motion in Flash CC10m 3s
-
(Locked)
Parallax and depth of field in Edge Animate7m 10s
-