I'm building a Shopify site, and want an overlay image to cover the top content when you land on the website. Then when you scroll, this overlay image moves up and off the screen revealing the website.
I found some javascript that does this, but the main website scrolls with the overlay image. Is there a way to have it scroll on its own and not scroll the content behind?
Here's what I have so far:
var container = document.getElementById('overlay-container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('overlay-background-image')[0];
// var square2 = document.getElementsByClassName('overlay-logo')[1];
// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop / scrollArea || 0;
square1.style.bottom = -100 * (1 - scrollPercent * 1.5) + 'vh';
// square2.style.top = 800 - scrollPercent*window.innerHeight*0.6 + 'px';
});
// Global variable to control the scrolling behavior
const step = 30; // For each 30px, change an image
function trackScrollPosition() {
const y = window.scrollY;
const label = Math.min(Math.floor(y / 30) + 1, 20);
const imageToUse = fruitImages[label];
// Change the background image
$('.image-container').css('background-image', `url('${imageToUse}')`);
}
$(document).ready(() => {
$(window).scroll(() => {
trackScrollPosition();
})
}).overlay-container {
position: relative;
max-width: 100%;
}
.overlay-background-image {
position: absolute;
z-index: 5;
left: 0;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class="overlay-container">
<div class="overlay-background-image">
<img style="height: 100vh;" src="https://cdn.shopify.com/s/files/1/0608/2225/7886/files/01_-_Landing_Page.png?v=1636020266" />
</div>
</div>Edit: I misread the question.
Original answer:
This will automatically scroll the image offscreen once the page is loaded. (Not what the question wanted)
I'd recommend using css rather than JavaScript for this.
body {
margin: 0px;
}
.overlay-background-image {
animation-fill-mode: forwards;
animation-name: shop_reveal;
animation-duration: 3s;
position: absolute;
width: 100vw;
background-size: calc(100vh * 1440/767);
height: 100vh;
background-image: url('https://cdn.shopify.com/s/files/1/0608/2225/7886/files/01_-_Landing_Page.png?v=1636020266');
}
@keyframes shop_reveal {
from {
bottom: 0px
}
to {
bottom: 100vh
}
}<div class="overlay-container">
<div class="overlay-background-image">
</div>
</div>Edited answer: This will scroll the image along with the scrollbar.
<div class="overlay-container">
<div class="overlay-background-image">
</div>
</div>```
<!-- end snippet -->
pagebox is the content that will be revealed when the user scrolls the page.
<!-- language: lang-css -->
```#pagebox {
position: absolute;
}```
<!-- end snippet -->
Give pagebox absolute positioning so that it's position can be set in JavaScript and it doesn't push the image.
<!-- language: lang-javascript -->
```var container = document.getElementById('overlay-container');
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
var scrollArea = 1000 - windowHeight;
var square1 = document.getElementsByClassName('overlay-background-image')[0];
// var square2 = document.getElementsByClassName('overlay-logo')[1];
var p = document.getElementById("pagebox");
// update position of square 1 and square 2 when scroll event fires.
window.addEventListener('scroll', function() {
var scrollTop = window.pageYOffset || window.scrollTop;
var scrollPercent = scrollTop / scrollArea || 0;
square1.style.bottom = p.style.marginTop = -100 * (1 - scrollPercent * 1.5) + 'vh';
// square2.style.top = 800 - scrollPercent*window.innerHeight*0.6 + 'px';
});```
<!-- end snippet -->
As the page is scrolled. The image overlay is moved up by this code. However the normal functioning of the scrolling is still in effect so the rest of the page moves up with it. In order to counteract this. The position of the content underneath the image is moved down by the amount the page is scrolled.
(simply using position:sticky would prevent the content underneath the page from exceeding the height of the window so can't be used)