I'm currently trying to archive the following: I want to create a website, that changes the opacity value based on the current progress of the horizontal scrolling. In total I have currently three <span> blocks where the opacity is set to 0.2.
As soon as the respective <span> block is in the middle of the viewport, the opacity should change to 1. I tried around using the current scrollYattribute of the windowin combination with the clientRect & and clientHeight values. However, I was still not able to manage it.
A good example what I try to archive can be seen on the Apple iPhone 13 Page. This section uses the function I would like to rebuild:
document.addEventListener('scroll', (event) => {
const { scrollY } = window;
const refContainer = document.getElementById("container");
const clientRect = container.getBoundingClientRect();
const clientHeight = container.clientHeight;
// What I want to archived in a static way for the first block as an example
const refBlock = document.getElementById("block1")
if (scrollY >= 27 && scrollY <= 125) {
refBlock.classList.add("isActive")
} else {
refBlock.classList.remove("isActive")
}
});.box {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.grid {
display: grid;
grid-gap: 10px;
}
.block {
opacity: 20%;
}
.block.isActive {
opacity: 100%;
}<div>
<div class="box">
<span>Welcome</span>
</div>
<div id="container" class="grid">
<span id="block1" class="block isActive">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<span id="block2" class="block">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
<span id="block3" class="block">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</span>
</div>
<div class="box">
<span>More elements</span>
</div>
</div>