I created a vertical line on my webpage, and want the line to grow/shrink as the user scrolls by it. Right now the line is just staying the same height the entire time. If you look at this website, https://robbowen.digital/ a good example of what I would like is shown. I have been looking into parallax but can't quite seem to figure it out. Can anyone help? Is this something simple that can be implemented? Here is my 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;
}
You can do so adding an event listener to scroll and set the height of div according to the scroll value, take a look:
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`
});
See the example on codepen