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

Create parallax motion in Google Web Designer

From the course: Web Motion: Create a Parallax Effect

Start my 1-month free trial

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…

Contents