The Parallax component
Use the Parallax component to create the illusion of depth with layers of images. As the viewer scrolls the page up or down on a mobile device, the foreground and background images move at different speeds.
This component is intended for use in Display & Video 360 Parallax creatives only.
To add the Parallax component to your project:
- Open the Components panel, then the Interaction folder.
- Drag the Parallax component to the stage.
- Double-click the component to enter the component editing mode.
- Add layers by dragging image files from your file system to the stage or Layers panel (Windows or Mac only), or by clicking the Add images button at the bottom of the Layers panel. You can only add images as layers in the Parallax component.
- Position each layer where it should appear at the start and end of the animation. You can drag the layer to where you want it, or use the Start position and End position fields in the Layer properties panel.
- Set additional configuration options as needed (see below).
- When you're satisfied with the component (you can preview it as you work on it), click Save. You'll return to the normal Google Web Designer interface.
Double-click the component on the stage to configure it, or click the Images field in the Properties panel.
There are two ways to add a layer:
- Drag a file from your file system to the stage or the Layers panel (Mac or Windows only).
- Click the Add images button at the bottom of the Layers panel.
Layers in the Parallax component must be images.
- Select the layer you want to move.
- Select the Start or End tab.
- Position the layer, using one of the following methods:
- Drag the layer to its new position.
- Use the arrow keys to move the layer one pixel at a time. Hold the Shift key while pressing an arrow key to move the layer 10 pixels in that direction.
- Set the Start position or End position properties on the Layer properties tab. You can only edit the properties that match the current tab. Use the Match start position or Match end position buttons to copy the other position.
Switch to the Start or End tab to adjust the layer's other position.
- Right-click the image on the stage that you want to swap out and select Swap image... from the pop-up menu.
- Select an image from the Library, or click the Import files button to select an image file from your computer.
The new image replaces the original image. If you previously resized the image that you swapped out, the new image also uses the resized dimensions. Otherwise, the new image uses its natural dimensions.
In the Layers panel, drag a layer to its new position in the list.
The order of the layers determines which layers display in front of each other. Layers listed higher appear in front of lower-listed layers.
- Select the layer you want to delete.
- Click the Delete button at the bottom of the Layers panel or press the Delete key.
- Select the layer you want to resize.
- In the Layer properties panel, set the width and height of the layer in pixels.
- Click the Constrain aspect ratio button to toggle whether the aspect ratio between the width and height is fixed.
The layer scales to the specified size for the entire duration of the animation.
Change layer opacity
- Select the layer you want to change.
- In the Layer properties panel, set the start or end opacity to a value between 0 and 1. (0 is transparent, and 1 is opaque.)
Change layer animation easing
- Select the layer you want to change.
- In the Layer properties panel, select an easing type from the Easing dropdown.
Custom easing isn't available.
Hide and show layers
In the Layers panel, click the box next to the layer thumbnail (under the Hide all layers button).
You can hide or show all layers by clicking the Hide all layers button.
Hiding a layer can make it easier to work on another layer, and keeps the hidden layer from appearing in the configuration preview, but has no effect on the browser preview or published creative.
Show and hide ghosts
- Select a layer.
- In the Layer properties panel, under Advanced properties, click the Show ghost toggle.
The ghost is a translucent version of the layer at whichever position you're not currently editing, so you can compare the start and end positions visually. Ghosts are for your reference only, and won't show in previews or in the published file.
Component properties are visible in the Properties panel. (You must exit the component editing mode.)
|Name||The name of the Parallax component.|
|The list of images used in the Parallax component. Click this field to enter editing mode for the component and configure layers. (You cannot edit the field directly.) Can be bound to dynamic data.|
|Scroll factor||A number between 0 and 1 representing how far the viewer scrolled. Used for display on the Google Web Designer stage only. The default is 0.5.|
You can see and edit layer properties when you're in the component editing mode.
|Name||The name of the layer. (Non-editable.)|
|The layer's distance from the left side and top of the component when the component first comes into view (i.e., the component's top edge is at the bottom edge of the viewport), measured in pixels. Editable when the Start tab is selected.|
|End position||The layer's distance from the left side and top of the component when the component is about to pass out of view (i.e., the component's bottom edge is at the top edge of the viewport), measured in pixels. Editable when the End tab is selected.|
|Size||The width and height of the layer. Affects the layer for the entire duration of the animation.|
|Opacity||The start and end opacity of the layer, represented by a number between 0 (transparent) and 1 (opaque).|
|Easing||The easing type for the layer's animation. Custom easing isn't available.|
|Show ghost||When enabled, a translucent version of the layer displays at the inactive position (the position that you're not currently editing).|
Events can be used to trigger other actions in your ad. The Parallax component sends the following event:
|Parallax loaded||Sent when the component is ready for display.|
You can preview the Parallax component while you're working on it:
- To enter the component editing mode, double-click the component on the stage.
- Click the Preview tab at the top.
- Scroll up and down to see how the visible layers behave in a sample mobile device layout. (Hidden layers won't display.)
- You can't edit the component while previewing it. Click the Start or End tab, make your changes, then click the Preview tab again to see those changes.
In the browser
Preview the component in your browser by exiting the component editing mode and using the Preview button in Google Web Designer. The preview page emulates how the ad displays on a webpage containing enough content for you to scroll above and below the component.
You can select from the following preview mode options:
- Device - Select a mobile device or Custom.
- Rotate device - Switch between portrait and landscape.
- Viewport size - If you select Custom for the device, you can set a new size by editing this field or dragging the preview's resize handles.
Parallax ads always use the Parallax preview mode in the browser.