Hi there,
I try to reveal a section with a simple jpg image scroll.
The section stays fixed, and the image scrolls up.
How to do this in Editor X?
Also, is this possible with 2 sections ? 1 section revealing the other ?
Thanks !
Ben
Hey @delvalbenoit , take a look at this example at the bottom of the website.
[https://jonathant99.editorx.io/mamag](website.
https://jonathant99.editorx.io/mamag)
Is this the effect you’re looking for?
Hi Jonathan,
Thank you for your answer.
No, unfortunately, this is not excatly what I’m looking for.
The revealed section (or container) should stay static (already in place), while a foreground section (or container) is scrolling on top, revealing the background.
All this working on mobile as well.
Thanks
Ben
If you have an example to share that would be great.
Also check this effect
https://www.editorx.com/academy/sticky-scroll-up
No example unfortunately.
Sticky approach won’t work, as this just add a layer on top of an existing one.
https://benoitdelval.editorx.io/stick
I would like that an already displayed layer moves up out of the viewport, revealing the layer under which stays static. The revealed layer should be a container (with Progalleries inside), not an image with some parallax or reveal applied. The scrolling layer may be a jpg image.
Possible?
Thanks.
Ben
@delvalbenoit It still sounds like this is the effect you’re trying to achieve
This is also achievable using sticky on the container below, and setting both containers to sit on the 1st grid row.
Hey, yes ! Great
Thank You Jonathan,
Benoit
Hi Jonathan. I’m trying to do this exact effect and am having difficulty… I have a section with 2 containers, a top and bottom. I’d like the top to have a curtain effect and reveal whats underneath (bottom container). The top container doesn’t have a scrolling effect applied and the bottom has “sticky” selected. Seems like I’m missing something? TY! -Erin
Hi all! I’m trying to do the reverse, where the hero section stays sticky and the next section scrolls up over it (example that I found online: https://cheriehealey.com/)..) I tried both setting the hero section as sticky (no luck) and then I added a container to hold all of the hero content and set the container to sticky (still didn’t work). Any suggestions? @wearepages
I figured out the reverse version I mentioned above! Editor X has this template (https://create.editorx.com/website-template/view/html/2656) that uses sticky containers across grids. The key to getting the visual to look like the next part of the grid scrolls UP over the sticky section instead of under the sticky section is the LAYER PLACEMENT!! In this screenshot from this EditorX template, I renamed the first container in row one of the grid as ‘First Container’ and the container group in the last row of the same grid as ‘Last Container’. As you’ll see, the example has the First Container in a lower layer than the Last Container!!
This arranges the first container as “moved to back” and results in the non-sticky portions of the grid scrolling up over the first sticky container.
It was weird to me to have the last container at the top of my layers, so for my site, I actually put the first row container at the bottom of all the containers in my grid and renamed that first container as ‘Hero Container’ (I also changed the element ID as well).
I hope this helps for anyone who has been trying to figure this out. I tried multiple JS scroll options and still couldn’t get it. Ugh, can someone on the EditorX team update the Scroll support page (https://support.wix.com/en/article/editor-x-adding-scroll-effects-to-sections) with this additional info? It’s such a small thing that makes a HUGE difference with user experience.
Hello! Could you share the steps to achieve that effect in the bottom of your example site?
It is but how to do it is the question here???
here is the tutorial on how to use more content effect with sticky scroll, please check it: https://www.youtube.com/watch?v=Zq1VrWMfgi8