Cuando se cargue mi página, aparecerá una imagen. Lo que quiero hacer es desplazarme, desvanecer esa imagen y desvanecerse en otra imagen. Mientras ocurre esta animación, no quiero que las imágenes se desplacen hacia arriba. Solo cuando la segunda imagen se haya desvanecido por completo , quiero poder desplazarme al contenido que sigue en la página.
Usé esta respuesta para encontrar parte de una solución .
html
<body> <div id="container"> <div id="mainImg"> <img src="images/1.png" style="height: 100%"> </div> <div id="brandStatement"> <img src="images/2.png" style="height: 100%"> </div> </div> <img src="images/map.png"> <script type="text/javascript" src="main.js"></script> </body>js
let locked = false, mainImage = document.getElementById('mainImg'), brandStatement = document.getElementById('brandStatement'); window.addEventListener('scroll', function() { if (!locked) { window.requestAnimationFrame(function() { brandStatement.style.opacity = Math.min(window.scrollY / window.innerHeight, 1); if (brandStatement.style.opacity === '1') { // scroll to next content } locked = false; }); } locked = true; });CSS
#container { height: 200vh; width: 100%; } #mainImg { text-align: center; width: 100%; height: 100%; position: fixed; } #brandStatement { text-align: center; width: 100%; height: 100%; position: fixed; opacity: 0; }No vi una posible solución al problema mejorando su código. Este es un enfoque personal.
Lo que estoy haciendo aquí es cambiar la opacidad del elemento one dentro del contenedor de la cover a medida que el usuario se desplaza hacia abajo en la página, revelando la imagen a continuación. Una vez realizados los cambios de opacidad, la secuencia de comandos cambiará la propiedad de estilo de visualización del contenedor de filling de none a block . Este elemento solo está destinado a llenar el lado superior del contenedor de la cover para evitar que se mueva hacia arriba cuando la propiedad de estilo de position se cambia de fixed a null .
Y la lógica inversa se aplica cuando se desplaza hacia arriba.
const one = document.getElementById('one') const cover = document.getElementById('cover') const filling = document.getElementById('filling') window.addEventListener('scroll', () => { let scrollY = window.scrollY let bottomHeight = window.innerHeight if(scrollY / bottomHeight <= 1){ one.style.opacity = 1 - ( scrollY / bottomHeight ) cover.style.position = 'fixed' filling.style.display = 'none' } else{ cover.style.position = null filling.style.display = 'block' } }) *{padding:0;margin:0;border-size: border-box} body{ height: 3500px; } img { width: 100%; height: 100vh; } #filling{ height:100vh; width:100% } #cover{ height:100vh; width:100%; } #cover > div{ height:100vh; width:100%; position:absolute; } #one{ z-index:2; } #two{ z-index:1; } <body> <div id='filling' style='display:none'> </div> <div id='cover' style='position:fixed'> <div id='one'> <img src='https://picsum.photos/id/200/1000/1000'> </div> <div id='two'> <img src='https://picsum.photos/id/201/1000/1000'> </div> </div> <div> <img src='https://picsum.photos/id/206/1000/1000'> </div> <div style='margin-top:-10px'> <img src='https://picsum.photos/id/204/1000/1000'> </div> <div style='margin-top:-10px'> <img src='https://picsum.photos/id/208/1000/1000'> </div> </body>