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