Hello all,
Im currently trying to revamp my companies website, I really liked the way these two websites scoll and reveal elements.
冨澤建設 and ART SCAPE
I tried to receate this with the hero image slowly fading and zooming and having a gradient fade it out as the user scrolls.
But I’m not sure if I’ve done the right thing by positioning the elements as “absolute” elements so that they would follow after ecahother.
Is there a different way to achieve something similar to these websites? Have I gone about the structure of my elements wrong?
Any feedback would be greatly appreciated!
Here is my site Read-Only: Webflow - KeiganALI
Hi there!
The parallax effect creates depth by moving elements at different speeds as users scroll. Here’s how to create this effect in Webflow:
- Select the element you want to animate
- Open the Interactions panel (keyboard shortcut: H)
- Click the + button to add a new interaction
- Choose “While Page is Scrolling” as your trigger
- Add Move and Opacity actions from the timeline
- For parallax movement:
- Adjust the Y-axis values to control vertical movement
- Set different speeds for different elements (larger movements create stronger depth effects)
- Use the opacity settings to fade elements in/out smoothly
- Enable “Live Preview” in the top right corner to test your animation
For best results, keep movements subtle and ensure they enhance rather than distract from your content.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.