Making a Zara style scroll animation on a wix studio website

Ask the community
, ,
1

https://www.zara.com/

What i got for now:

https://92fjdv.wixstudio.io/roupa

Im working on a Wix Stuido website and i’ve got the effect kinda working by setting up every section has sticky with 100vh, so they overlap each other, but the problem is when in a smaller screen like tablet or mobile only the first section is visible.

Is there any other way I can make this, maybe with a Velo Scroll Event Listener?

What im trying to re-create:

I’ve changed the view port to 100vh on every section, desktop and mobile, and had set up all the sections to be sticky.

2

Try doing it with a single section and dividing it into columns and using containers instead. Here you can control the layers, and select which appears on top of which.

You can search for the many Editor X and Wix Studio tutorial videos that will show you how to do this.

1 Like
3

I’ll see what i can do. Thank you for that

4

Hello @Cristiano CostcoESS

Here is a solution, hope it will help you:

Creating a sticky effect on a Wix Studio website where sections overlap each other can be challenging, especially when ensuring responsiveness across different devices. Using a Velo Scroll Event Listener is indeed a viable approach to handle scrolling events and dynamically adjust the behavior based on the viewport size.

Here’s a basic example of how you might use a Velo Scroll Event Listener to manage the sticky sections:

JavaScript

$w.onReady(function () {
// Function to handle scroll events
function handleScroll() {
const viewportHeight = window.innerHeight;
// Logic to determine which section should be sticky based on scroll position
// and viewport height
}

// Add the scroll event listener
window.addEventListener('scroll', handleScroll);

});
AI-generated code. Review and use carefully. More info on FAQ.
In this code snippet, the handleScroll function is triggered whenever a scroll event occurs. Within this function, you can implement the logic to determine which section should be sticky based on the current scroll position and the viewport height.

Since you’re dealing with responsiveness issues, you’ll want to ensure that your logic accounts for different screen sizes. You may need to adjust the positioning or size of your sections using media queries or by checking the viewportHeight within your scroll event handler.

For more detailed guidance on using Velo to handle scroll events, you can refer to the Wix documentation or the Wix Studio Community forum. These resources provide insights into how to work with events in Velo and might offer solutions that are closely aligned with your specific use case.

Best Regards
sonia alvarez

1 Like