My goal is to create a unique effect where an object falls from the sky as the user scrolls down the page. The concept involves having the object div remain stationary in the center of its parent container, positioned 50 pixels from the top. However, when the user scrolls down, the object should also move downward accordingly.
The challenge: The object resides within another div, and I want it to be visible only within that specific container, not throughout the entire website.
What have I experimented with? 1: Attempted fixed positioning, but this caused the object to appear on the entire page since z-index doesn't function properly with fixed elements. 2: Tried relative positioning on the parent element and absolute positioning on the child, but unfortunately, this setup prevented the object div from scrolling alongside the page.
For reference, here's a visual representation: https://i.sstatic.net/jaNzw.png
Desired scroll effect: https://i.sstatic.net/sqnnA.png
React Component Structure:
<div className="container">
<div className="container--object">
<img src={object}/>
</div>
</div>
CSS Styling:
.container {
min-height: 100vh;
position: relative;
}
.container--object {
position: absolute;
top: 50px;
}
The parent component for this setup is the homepage, with other divs serving as siblings to this React component. My current struggle lies in achieving the movement of the object div as the user scrolls down the page. Is there a way to anchor its position based on the browser's viewport, allowing it to smoothly transition downwards?