Parallax Overview - Google Web Designer

NIVESH: Hi my name is Nivesh
and I'm a developer on Google Web Designer.

In this video I'm going to give you an overview

of using the parallax component

to create parallax animations

As I scroll
the page up or down

the foreground and background images

move at different speeds
creating an illusion of depth

The parallax component relies on
the ad publisher's site

to forward the page scroll events to the ad

In response to the scroll events

the parallax component animates the images.

You can find some
other examples of parallax animations

in our File, New from template...

in the
Parallax for Display & Video 360 category

Here are what these parallax
examples look like in the browser

You'll notice that the images move vertically

as well as horizontally as I scroll the page

Now let's create our own parallax
animation

Go to File, New

The environment has to be Display & Video 360
for parallax component

To add the parallax component to your project

open the Components panel

and drag the parallax component

from the interaction folder onto the stage

You can configure the parallax component

by going to the
properties panel

and clicking on the Images control

or you can double click
on the component itself

You start by adding images to your parallax animation

You can add images by dragging files

from your file system onto the stage

or layers panel

Or you can click on the plus button in the layers panel

and add images from the file system

You can reorder the layers by dragging

and dropping them in the layers panel

The order of the layer determines
which layers display in front of each other

the higher layers display in front
of the lower layers

You can also show and hide the images

by clicking on the thumbnail area

or you can click on the eye icon

to show and hide all the images

Hiding a layer can make it easier to work on another layer

For example I'm
going to hide all the layers

except for the product, the text,
and this big leaf

The settings dialog has three tabs

Start, End, and Preview

You configure the
parallax animation

by positioning each layer where it should appear

at the start and the end of its animation

The start position is when the component
first comes into view in a webpage

This part when the component is first
coming into view

and the end position is

when the component has just left the
viewport

So let's configure in the start position

I'm going to hide the big leaf
again and I'm going to move this using

my mouse the product to the center

I can also use arrow keys

and I can hold down the shift key

to move them by 10 pixels
at a time

or I can actually directly type
into the layer properties panel

And in the end position,
to quickly copy the values from the start position

you can click on
the match position button here

Let me reposition the big leaf in the
start and end position

Now I can hold down the shift key
to constrain the movement

as I drag my mouse

and I'm going to move this leaf far away
at the end position

And I can turn on show ghost option
in the advanced properties

and this will display
a translucent image of the other tab

whichever tab you're not currently editing

Ghosts are for your reference
and won't show in the preview

or in the published file

Now let's preview

You can scroll up and down

and see how the visible layers
behave in the sample mobile device

You can click the start or end tab
to continue editing the file

so in this case I'm going to change the
easing option to Ease-in-out

and I'm going to fade in the text from 0.3 to 1

and now let's preview that again

You can also set the width and height
of the layers

I'm going to change the leaf's width to 250 pixels

And since the aspect
ratio is locked

the height updated automatically

Note that the layer remains the

specified size at both the start and the
end

That is the sizes will not be animated

When you're satisfied with the
component

click Save and you'll return

to the normal Google Web Designer
interface

To save time I'm going to go back to the template file

that has all
the animation already set up

and we're going to go to the properties panel

and go to the scroll factor section here

This scroll factor property is used for
display on Google Web Designer stage only

You can see what the ad would look
like with different scroll factors

by updating this value

You can preview your
ad in the browser as well

when you preview in browser

the preview page
emulates how the ad displays on a web page

with enough content for you to
scroll above and below the component

You can see what the parallax animation
looks like

in the context of the overall ad

such as with your CTA button
and exit actions

Thank you for watching the video