Struggling to create a full-page gallery that allows for vertical scrolling through one image at a time. I've attempted different options but can't seem to crack it.
Here is a snippet of my code:
<style>
#img1 {
background-image: url("<?php echo $image ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img2 {
background-image: url("<?php echo $image2 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#img3 {
background-image: url("<?php echo $image3 ;?>");
height:100vh !Important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<div id="img1"></div>
<div id="img2"></div>
<div id="img2"></div>
I'm in need of a javascript/jquery solution to detect when the user has scrolled, with the intention of changing images if they scroll up or down by 10 pixels.
For reference, here's the kind of layout I'm aiming for: