Как анимировать вертикальную линию с помощью прокрутки? ⇐ CSS

[Anonymous]

Я пытаюсь анимировать вертикальную линию в зависимости от положения элементов на странице. Вот пример того, чего я хочу достичь.


Я пытался сделать что-то подобное

Код: Выделить всё

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 

Подробнее здесь: [url]https://stackoverflow.com/questions/78744372/how-to-animate-vertical-line-with-scrolling[/url]