Hello!
I am trying to create a parallax image that will stop at some point as the user scrolls.
For example, I want this image, to stop when the “M” in the picture appears.
Because now when you scroll below it, it is disappearing.
Hidden “M”:
Is there any way that I could make this one with CSS or should JS be used instead?
Like use the parallax effect until the image fully appears, and then stop the effect and scroll normally.
If you only have one image that you want to remain visible then you could just rub it out with the first section for a similar effect.
If you want the image to stop being fixed at a certain point then you would need js to do that. You would use the intersection observer and add a class to the body at an appropriate point and remove the fixed positioning.
Note that in my demo I used a fixed element with a normal background because ios does not work well with background-attachment fixed and background-size:cover. When you use cover it applies it to the whole document and not the viewport (it’s a long standing bug).
okay, but when I try to remove the fixed position, the image hops to its position and this does not look smooth.
Am I missing something?
Or maybe there is a way that as the user scrolls down, the parallax effect would move the image in smaller steps, so the “M” will not be hidden when you are viewing the next section.
Does it make sense?
What is it that you require differently to the demo I gave above? 
It sounds to me as though that is what you are asking for so I’m having a little trouble understanding the exact behaviour you need?
The image is revealed as the div scrolls up and then remains visible. What is it that I am missing?
Do you want the image to scroll away with the div?
Sorry if I am missing the obvious.
Hey no problem, maybe I should explain it better too
Yes I want after the image has been revealed, to scroll away with the div.
Basically a parallax effect as it is now, but without hiding the bottom of the image when the user reach it.
So somehow to end the effect when the image has been revealed fully, or the “M” is fully on the view.
Does it makes sense now?
Yes I think this may be closer to what you want unless I’m overthinking it
The only problem I see with this method is if your content section is greater than the viewport then the image swap won’t be seamless because the image size would change. If that’s the case then I guess you’d need another method to track the positions. It may be that you need to watch the element that follows after and then only apply the change once that one comes into view.
I think we may need to move this to the JS forum if you want to go with the JS solution
This one seems very close to what I want.
Let me try it and figure it out.
Thank you very much!
Just for fun I made another demo that caters for any height element and will scroll away the fixed image as soon as the bottom of the element leaves the bottom of the viewport.
It may be of use to someone
love it thanks!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
