Creé una línea vertical en mi página web y quiero que la línea crezca o se reduzca a medida que el usuario se desplaza por ella. En este momento, la línea se mantiene a la misma altura todo el tiempo. Si observa este sitio web, https://robbowen.digital/ se muestra un buen ejemplo de lo que me gustaría. He estado investigando el paralaje, pero parece que no puedo resolverlo. ¿Alguien puede ayudar? ¿Es esto algo simple que se puede implementar? Aquí está mi codepen https://codepen.io/atrain42/pen/OJQLPqx
HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="vertical"></div> <header> <h1>hello</h1> </header> <section> <h1>section 01</h1> </section> </div> </body> </html> CSS: * { box-sizing: border-box; padding: 0; margin: 0; } header { position: relative; width: 100vw; height: 100vh; background-color: aquamarine; z-index: 1; } header h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; } section { position: relative; width: 100vw; height: 100vh; background-color: rgb(235, 198, 245); z-index: 1; } section h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 5rem; } .container { position: relative; z-index: 2; } .vertical { position: absolute; top: 30%; left: 20%; height: 40rem; z-index: 2; color: black; border-right: 2px solid black; background-attachment: fixed; }Puede hacerlo agregando un detector de eventos para desplazarse y establecer la altura de div de acuerdo con el valor de desplazamiento, eche un vistazo:
const verticalLine = document.getElementById("vertical") document.addEventListener('scroll', function(e) { // use division by two to limit the height size scrollPosition = window.scrollY / 2 ; // set the current scroll position as the height of div verticalLine.style.height = `${lastKnownScrollPosition}px` });Ver el ejemplo en codepen