I am working on a website design where I would like to implement an image zoom effect as the user scrolls down. Additionally, I want the image to move to either the left or right side of the screen as it goes out of view when scrolling to the bottom. While I have successfully implemented the zoom in on scroll feature, I am struggling with moving the image to the sides. Any guidance on how to achieve this would be highly appreciated. Thank you.
EDIT:
Here is my progress so far in realizing the desired behavior for the image:
HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<img src="http://www.freepngimg.com/download/plants/6-2-plants-free-download-png.png" class = "zoom">
<script>
$(window).on("scroll", function() {
var s = Math.min(400, $(document).scrollTop()) + 200;
$(".zoom").width(s).height(s);
});
</script>
</body>
CSS:
body{
width: 100%;
height: 1200px;
}
img {
position: fixed;
width: 200px;
left: 0;
bottom: 0;
}