I'm attempting to create a dynamic vertical line that adjusts based on the position of elements on the webpage. Check out this example of what I'm aiming for: https://i.sstatic.net/JpK3FQI2.gif
My attempt at achieving this looks something like:
document.addEventListener('DOMContentLoaded', function() {
const line = document.querySelector('.vertical-line');
const sections = document.querySelectorAll('section');
let options = {
root: null,
rootMargin: '0px',
threshold: 0.1
};
let observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.remove('hidden');
} else {
entry.target.classList.add('hidden');
}
});
}, options);
sections.forEach(section => {
observer.observe(section);
});
let scrollDirection = 'down';
let lastScrollTop = 0;
window.addEventListener('scroll', () => {
let st = window.scrollY || document.documentElement.scrollTop;
if (st > lastScrollTop) {
scrollDirection = 'down';
} else {
scrollDirection = 'up';
}
lastScrollTop = st <= 0 ? 0 : st;
if (scrollDirection === 'down') {
line.style.transform = 'translateX(50vw)';
} else {
line.style.transform = 'translateX(-50vw)';
}
});
});.row {
display: flex;
justify-content: space-between;
}
.col {
padding-left: 8.125rem;
padding-right: 8.125rem;
align-self: center;
flex: 1;
padding: 20px;
position: relative;
}<br>
.vertical-line {
content: '';
border-left: 1px solid var(--primary-text);
border-right: 1px solid var(--primary-text);
padding: 0;
position: absolute;
height: 48.75rem;
right: 50%;
transition: transform 1s;
}
@keyframes moveLine {
0% { transform: translateX(0); }
100% { transform: translateX(50px); }
} */
.hidden {
visibility: hidden;
}<section id="s1">
<div class="page-container">
<div class="row">
<div class="col">
<div>
<p class="about-text-title">Label1</p>
<p class="about-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident nulla iure quod autem amet, ipsa beatae
voluptatibus maiores adipisci quae, expedita deserunt laborum architecto corporis dolore. Voluptates tenetur nisi
cupiditate?</p;
</div>
</div>
<div class="col vertical-line"></div>
<div class="col">
<p>Video frame</p>
</div>
</div>
</div>
</section>
<section id="s2">
<div class="container">
<div class="row">
<div class="col">
<p>Label2</p>
<p class="about-text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident nulla iure quod autem amet, ipsa beatae
voluptatibus maiores adipisci quae, expedita deserunt laborum architecto corporis dolore. Voluptates tenetur nisi
cupiditate?</p>
</div>
<div class="col">
<p>Another video frame</p>
</div>
</div>
</div>
</section>The line moves in response to scrolling, but it only shifts to the edge of the screen and returns to its default left position when scrolling stops. Additionally, it doesn't overlay section 1 elements nor reveal section 2 elements.
I'm struggling to figure out how to achieve the desired effect. Essentially, I want the line to act as a "pagination" feature, scrolling the page and updating the displayed elements.
If anyone could provide guidance on accomplishing this task, I would greatly appreciate it. Apologies if my explanation is unclear, as I have limited knowledge of html, css, js.
I attempted to replicate the provided example using javascript and css, but the outcome was not as intended.