Point: What is a parallax effect?
A parallax effect creates a sense of depth by moving background and foreground elements at different speeds as you scroll.
In Studio.Design, you can create this kind of parallax effect using Conditional Style Scroll (Scroll Effect).
This article explains how to create a parallax effect where an image slides upward within a banner area.
You'll set this up by combining a clipping box with the Conditional Style Scroll settings.
Step 1: Place a clipping box
First, place the box that will act as the "window" for the parallax. This box defines the visible area for the image.
Add a box where you want the parallax to appear. Adjust its positioning as needed.
In the right panel, open the [Box] tab and configure [Layout] as follows. If the panel is closed, open the right panel first.
Width: 100% (adjust to match the banner width you want)
Height: 500px (adjust to match the banner height you want)
Top and bottom margins: around 800px (adjust based on your design to ensure enough scroll distance)
Overflow: change to [Hidden] (so any image area outside the box is hidden)
Setting Overflow to [Hidden] is the key to the parallax effect. By hiding the part of the image that extends beyond the box, the image appears to "peek through a window" as you scroll.
In the image below, the box background color has been set to blue for clarity.
Tips: "clip" vs. "hidden" when Overflow is set to "Hidden"
When you select "Hidden," a "Use hidden instead of clip" checkbox appears. Leave this unchecked and keep the default "clip" setting.
Using "hidden" turns the box into its own scroll container, which means scroll position is measured against the box itself rather than the whole page. As a result, the parallax effect won't work correctly.
Step 2: Add an image box as a child element
Next, place the image box that will move with the parallax effect inside the clipping box.
Select the clipping box you placed in Step 1, then add an image box as a child element.
In the left panel, open the Add panel
, then hold Shift and click [Image] to add it as a child element.
Choose the image you want to display, either from your uploaded images or from the free image library.
In the right panel, open the [Box] tab and configure [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 Style Scroll.
Select the image box you placed in Step 2, then click [Conditional Style] at the top of the right panel.
From the style condition list, select [Scroll] to switch to Scroll Preview Mode.
The right panel switches to the scroll effect settings, and an [Exit Scroll Preview Mode] banner appears at the top of the screen.
Step 4: Set the movement amount with keyframes
Set the image position at the start and end of the scroll. In this example, we'll make the image slide upward as you scroll.
Choose a [Timeline] type. You can use either [View] or [Scroll].
Choosing View timeline lets you fine-tune when changes happen and which triggers are used.
On the scroll timeline in the right panel, configure the two keyframes at the 0% and 100% points as follows.
100% point (end of scroll)
Click [Add Style] and select [Move].
Set X to 0px and Y to -600px.
0% point (start of scroll)
Click [Add Style] and select [Move].
Set X to 0px and Y to 0px.
With this setup, the image gradually moves from Y: 0px to Y: -600px as you scroll, slowly sliding upward to create the parallax effect.
The larger the absolute value of Y, the more the image slides and the more pronounced the motion becomes.
Step 5: Exit Scroll Preview Mode
Once you're done, return to the regular editing mode using either of the following 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 animation in preview
Finally, check how the effect actually looks.
Click the preview button at the top right of the editor to open Live Preview.
Scroll the page and check that the image slides slowly upward within the banner area.
If the image moves smoothly within the banner frame, you're all set.
Tips for fine-tuning
Adjusting the slide distance
You can control the strength of the parallax by changing the Y value at the 100% point.
Adjust the value to match your design, and avoid using values so large that the edges of the image become too visible.
Y value | Effect |
-200px | Subtle slide. |
-600px | Standard parallax. |
-1000px | Dynamic motion. |
Balancing with the box height
If you change the height of the clipping box, adjust the image's slide distance (Y value) to match. If the slide distance is too large compared to the height, the image may move beyond the box during scrolling, leaving empty space visible.
Switching to horizontal parallax
To create a horizontal parallax, set the X value instead of Y in the Move settings.
By changing the X value at the 0% and 100% points, you can create a parallax that slides left or right.
Scroll-linked animation animation-timeline: scroll