Overview
This article will help you create a parallax effect using the Y Threshold trigger and the Change Scroll Factor action. If you would like to learn more about other triggers, actions, and interactions, please refer to the following article:
Fastr Workspace - Interactions Overview
Fastr Workspace - Interactions: Triggers
Fastr Workspace - Interactions: Advanced Options
Example of the Parallax Effect - You can view a live example of the parallax effect here: Parallax Effect
How to Create a Parallax Effect:
In this example, we will demonstrate how to create a parallax effect on multiple elements, such as images, rectangles, or any other widgets.
-
Step 1: Set the Downward Scroll Interaction - For the first image (or element), set the Y Threshold trigger to 50% in the Downward direction. Add the Change Scroll Factor action and set it to 50%. This will cause the element to move at half the speed of the page scroll, creating a parallax effect when scrolling down.
-
Step 2: Add the Upward Scroll Interaction - Next, repeat the process for the same element but configure it for the Upward direction. Set the Y Threshold trigger to 50% in the Upward direction. Set the Change Scroll Factor action to 100%.
- Apply the Same Settings to Other Elements - Repeat the same setup for the remaining images or widgets where you want to apply the parallax effect. You can also adjust the percentage values for the Y Threshold and Scroll Factor depending on how strong or subtle you want the parallax movement to be.
If you have any follow-up questions or need further assistance, please feel free to reach out to us at support@getfastr.com — we’re happy to help!
Comments
0 comments
Please sign in to leave a comment.