I am making a webpage where I have an image that zooms out when you scroll and text under it. I am having trouble getting the text to appear under the image and making it stay there until I have scrolled down to it. The goal is to have the page scroll down to 2800 pageY showing the animation and then let the text scroll with the image, not over the image. How can I achieve this? I have currently been using jQuery to do this but I am open to using other frameworks or just pure javascript. My html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="zoom.css">
</head>
<body>
<div class="zoom">
<img src="images/sourcecode.jpg">
</div>
<div class="main-text">
Hello World
</div>
<script src="zoom.js"></script>
<script src="lib/jquery-3.6.0.js"></script>
<script>
$(window).scroll(function() {
let scroll = $(window).scrollTop()
if (scroll < 2800) {
$(".zoom img").css({
width: (100 - scroll / 40) + "%"
})
}
})
</script>
</body>
</html>
My CSS:
div
{
width: 100%;
height: 700px;
overflow: hidden;
position: relative;
}
div img
{
width: 100%;
position: fixed;
left: 50%;
transform: translate(-50%) scale(500%);
}
.show-text {
position: absolute;
}
.main-text {
color: white;
height: 4000px;
text-align: center;
}
Sorry if some of the images do not work, I do not know how to include an image from the web without downloading it.
Here is a current image of the page on load:
When the page is scrolled all the way down:
As the images show, the text went up as you scrolled and did not wait for the image to fully zoom out. Here is a jsfiddle that shows my problem with a black image instead: https://jsfiddle.net/hokp6t8g/