Estoy creando un sitio de Shopify y quiero una imagen superpuesta para cubrir el contenido principal cuando llegas al sitio web. Luego, cuando se desplaza, esta imagen superpuesta se mueve hacia arriba y fuera de la pantalla, revelando el sitio web.
Encontré un javascript que hace esto, pero el sitio web principal se desplaza con la imagen superpuesta. ¿Hay alguna manera de que se desplace por sí solo y no desplace el contenido detrás?
Esto es lo que tengo hasta ahora:
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>Editar: Leí mal la pregunta.
Respuesta original:
Esto desplazará automáticamente la imagen fuera de la pantalla una vez que se cargue la página. (No es lo que quería la pregunta)
Recomiendo usar css en lugar de JavaScript para esto.
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>Respuesta editada: esto desplazará la imagen junto con la barra de desplazamiento.
<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)