New Feature: Playlist Center! Pick a topic and let our playlists guide the way.

Start learning with our library of video tutorials taught by experts. Get started

Web Motion for Beginners: Create a Parallax Effect
Illustration by

Web Motion for Beginners: Create a Parallax Effect

with Tom Green

Video: Parallax overview

Parallax is an optical illusion that gives an Pay close attention to this video that was shot along the Trans-Canada highway. On the web parallax scrolling is all the rage.

Watch this entire course now—plus get access to every course in the library. Each course includes high-quality videos taught by expert instructors.

Become a member
please wait ...
Web Motion for Beginners: Create a Parallax Effect
40m 25s Beginner Jan 31, 2014

Viewers: in countries Watching now:

Parallax is an optical illusion that gives 2D objects a sense of depth. Parallax motion, on the other hand, is when objects in the foreground tend to move faster than the background. Adding parallax motion can make your web projects more interesting and immersive by adding the illusion of depth. In this course, Tom Green shows you how to build a parallax motion effect using a combination of Google Web Designer and Adobe Flash CC, and then create a separate, even more captivating effect in Edge Animate.

Subjects:
Video Motion Graphics Web Interaction Design Web Design Projects
Software:
Flash Professional Edge Animate Google Web Designer
Author:
Tom Green

Parallax overview

Parallax is an optical illusion that gives an otherwise flat 2D image the illusion of depth. If you've ever driven in a car, you have experienced parallax. Pay close attention to this video that was shot along the Trans-Canada highway. The foreground seems to zip along, while the trees on the other side of the pond don't move as fast. If you look at the sky and the hill in the background, their movement is even slower still. On the web parallax scrolling is all the rage. In this example a site for the movie The Life of Pi, all you need to do is to rotate the scroll wheel of the mouse to navigate through the various pages of the site.

As you scroll one page seems to slide over the other. Though scrolling can be regarded as motion, it is not exactly in the same league as the technique Ken Burns used to bring grainy Civil War movies to life in his PBS series, The Civil War. As the camera would seemingly move into and out of an image. This is the technique we will be exploring. Creating parallax motion is not terribly difficult, but as you saw during our short drive along the Trans-Canada highway, you need to pay attention to the world around you.

Typically, the technique requires three images, or layers, that are in motion. The background layer, in this example here, the rock face and the sky. Moves rather slowly, the mid ground of the abandoned mill moves little quicker and the foreground image, the log, moves even faster. Put those three together and you have simulated depth. We will be explaining this technique as we create an animated banner ad using Google Web Designer and Flash CC. To really seal the deal, you can add the illusion of depth of field by applying subtle blurs to objects as they seem to go out of focus and the objects behind them come into focus.

This will be accomplished by using blurs in Edge Animate. So, what's the plan? The first project will involve a banner ad for a mythical airline. The animation starts with the ground slowly moving in one direction, the clouds moving a little quicker in another direction, and an airliner flying into the scene. Some text will slide across the screen, and a click-able button appears. This project will be assembled first in Google Web Designer, which is a new application designed to create motion for interactive banner ads.

The project will next be assembled in Flash CC. Contrary to reports elsewhere, Flash's latest update easily brings the traditional power of flash to the somewhat plugin free HTML universe. In this exercise, we will be exploring these new HTML 5 features. The final project will be a further exploration of the parallax effect and will be assembled in Edge Animate. This project uses blurs of motion to add even more impact to the illusion of depth.

One final note. The imaging for parallax motion is critical. Spend time in Photoshop or another imaging application to ensure transparent edges are sharp. And if you need to fill holes in an image, spend the necessary time, to insure the fills looks natural. With that out of the way, let's get started.

There are currently no FAQs about Web Motion for Beginners: Create a Parallax Effect.

 
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.
Upgrade now


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

join now Upgrade now

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Web Motion for Beginners: Create a Parallax Effect.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.