0
238
Vistas¿Cómo puedo esperar a que una imagen se aleje por completo en una animación antes de dejar que el texto se mueva?
Estoy creando una página web donde tengo una imagen que se aleja cuando te desplazas y escribes debajo de ella. Tengo problemas para que el texto aparezca debajo de la imagen y hacer que permanezca allí hasta que me desplace hacia abajo. El objetivo es hacer que la página se desplace hacia abajo hasta 2800 páginasY mostrando la animación y luego dejar que el texto se desplace con la imagen, no sobre la imagen. ¿Cómo puedo conseguir esto? Actualmente he estado usando jQuery para hacer esto, pero estoy abierto a usar otros marcos o simplemente javascript puro. Mi html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="zoom.css"> </head> <body> <div class="zoom"> <img src="images/sourcecode.jpg"> </div> <div class="main-text"> Hello World </div> <script src="zoom.js"></script> <script src="lib/jquery-3.6.0.js"></script> <script> $(window).scroll(function() { let scroll = $(window).scrollTop() if (scroll < 2800) { $(".zoom img").css({ width: (100 - scroll / 40) + "%" }) } }) </script> </body> </html>Mi CSS:
div { width: 100%; height: 700px; overflow: hidden; position: relative; } div img { width: 100%; position: fixed; left: 50%; transform: translate(-50%) scale(500%); } .show-text { position: absolute; } .main-text { color: white; height: 4000px; text-align: center; } Lo siento si algunas de las imágenes no funcionan, no sé cómo incluir una imagen de la web sin descargarla. Aquí hay una imagen actual de la página en carga: 
Cuando la página se desplaza completamente hacia abajo: 
Como muestran las imágenes, el texto subió a medida que se desplazaba y no esperó a que la imagen se alejara por completo. Aquí hay un jsfiddle que muestra mi problema con una imagen en negro: https://jsfiddle.net/hokp6t8g/