My webpage consists of multiple sections, each occupying the full height and width of the screen and containing an image.
As visitors scroll through the page, the image in the current section comes into view while the image in the previous section disappears. This creates a visually appealing effect as users navigate through the content.
If you'd like to see this concept in action, check out this live example:
Here is an example of how I achieve this effect with my code. When a user is on an active section, the "active" class is applied to the corresponding "article" tag. As the user moves to a different section, the "active" class is removed from the previous section and added to the new one.
.section .image {
opacity: 0;
}
.section .active .image {
opacity: 1;
} <section class="all-sections-wrap">
<article class="section">
<div class="image">
<img src="blabla.png">
</div>
</article>
<article class="section">
<div class="image">
<img src="blabla.png">
</div>
</article>
<article class="section">
<div class="image">
<img src="blabla.png">
</div>
</article>
<section>Although I have researched extensively on stackoverflow, I have been unable to find a suitable script for accurately detecting offsets and page heights. Any assistance with this issue would be greatly appreciated.
Thank you!