Point: What is the parallax effect?
The parallax effect is a technique where background and foreground elements move at different speeds in response to scrolling, creating a sense of depth.
In Studio.Design, you can set up this kind of parallax effect using Conditional Styles — Scroll (Scroll Effect).
This article explains how to create a parallax effect where an image slides upward within a banner area.
You'll achieve this by combining a clipping box with Conditional Styles — Scroll settings.
Step 1: Place a clipping box
First, place a box that will act as the "window" for the parallax effect. This box defines the visible area for the image.
Add a box where you want the parallax effect to appear. Adjust the positioning as needed.
In the right panel, open the [Box] tab and configure the [Layout] as follows. If the panel is closed, open the right panel first.
Width: 100% (adjust to match your desired banner width)
Height: 500px (adjust to match your desired banner height)
Top/bottom margin: Around 800px (to ensure enough scroll distance — adjust to fit your design)
Overflow: Set to [Hidden] (hides any part of the image that extends beyond the box)
Setting "Overflow: [Hidden]" is the key to making the parallax effect work. By hiding the parts of the image that extend beyond the box, the image appears to "peek through a window" as you scroll.
In the image below, the box background color has been changed to blue for clarity.
Tips: "clip" vs. "hidden" when Overflow is set to Hidden
When you select "Hidden," a checkbox labeled "Use hidden instead of clip" will appear. Leave this checkbox unchecked and keep the default "clip" setting.
If you enable "hidden," the box becomes its own scroll container, which means the scroll position is based on the box itself rather than the entire page — and the parallax effect won't work correctly.
Step 2: Add an image box as a child element
Next, place the image box that you want to apply the parallax effect to inside the clipping box.
Select the clipping box you placed in Step 1 and add an image box as a child element.
Open the Add panel
in the left panel, then hold the Shift key and click [Image] to add it as a child element.
Choose the image you want to display from your uploaded images or from free images.
In the right panel, open the [Box] tab and configure the [Layout] as follows. If the panel is closed, open the right panel first.
Width: 100%
Height: 100%
Step 3: Switch to Scroll Preview mode
Set up the scroll effect using Conditional Styles — Scroll.
Select the image box you placed in Step 2, then click [Conditional Styles] at the top of the right panel.
Select [Scroll] from the style conditions list to switch to Scroll Preview mode.
The right panel will switch to the scroll effect settings, and a [Exit Scroll Preview Mode] banner will appear at the top of the screen.
Step 4: Set the movement amount with keyframes
Set the image position at the start and end points of the scroll. In this example, we'll configure the image to slide upward as you scroll.
Choose the [Timeline] type. You can use either [View] or [Scroll].
Choosing the View timeline gives you more granular control over timing and trigger types.
On the scroll timeline in the right panel, configure the two keyframes at the 0% and 100% points with the following settings:
100% point (end of scroll)
Click [Add Style] and select [Translate].
Set the X value to 0px and the Y value to -600px.
0% point (start of scroll)
Click [Add Style] and select [Translate].
Set the X value to 0px and the Y value to 0px.
With this setup, the image gradually moves from Y: 0px to Y: -600px as you scroll, creating a smooth upward slide — that's the parallax effect.
The larger the absolute Y value, the greater the slide distance and the more pronounced the effect.
Step 5: Exit Scroll Preview mode
Once you've finished configuring the settings, return to the normal editing mode using either of these methods:
Click the [Back] button
(arrow icon) in the right panel.Click the [Exit Scroll Preview Mode] button in the banner at the top of the screen.
Step 6: Check the effect in Preview
Finally, verify the effect in action.
Click the preview button in the top-right corner of the editor to open the Live Preview.
Scroll the page and check that the image slides slowly upward within the banner area.
If the image moves naturally within the banner frame, you're all set!
Adjustment tips
Adjusting the slide distance
You can control the intensity of the parallax effect by adjusting the Y value at the 100% point.
Tweak the value to match your design, and make sure the movement isn't so large that the edges of the image become overly visible.
Y value | Effect guide |
-200px | Subtle slide. |
-600px | Standard parallax. |
-1000px | Dynamic movement. |
Balancing with the box height
If you change the height of the clipping box, adjust the image slide distance (Y value) accordingly. If the slide distance is too large relative to the height, the image may move beyond the box during scrolling, revealing unwanted empty space.
Switching to a horizontal parallax
If you want a horizontal parallax effect, set the X value instead of the Y value for Translate.
By using different X values at the 0% and 100% points, you can create a parallax effect that slides left or right.