Escalar y mover la imagen hacia abajo (fuera de la pantalla) al desplazarse hacia abajo en la página.
Tengo una imagen en un sitio de WordPress que está posicionada (absoluta) para superponerse a un video de fondo y debajo de un bloque de texto (también posicionado de forma absoluta). Cuando un usuario desplaza la página hacia abajo, necesito que la imagen se escale a 0 hasta la esquina inferior izquierda. Al mismo tiempo, una imagen similar aparece en mi barra de navegación, que está anclada en la parte inferior de la ventana del navegador y aparece al desplazarse. Ese efecto funciona correctamente actualmente. El sitio está hecho en Divi y la imagen en cuestión es un módulo de imagen de ancho completo. Todo lo que he intentado dentro de los efectos de desplazamiento de Divi no ha dado el efecto deseado. Puedes ver una vista previa aquí:
davy.ai
Para lograr este efecto, necesitarás usar CSS personalizado. Aquí están los pasos:
Esto posicionará la imagen en la esquina inferior izquierda de la pantalla y la preparará para escalar.
Este código escucha el evento de desplazamiento del usuario y calcula la escala de la imagen según la posición de la barra de navegación. La imagen comenzará a escalar cuando la barra de navegación esté en la parte inferior de la pantalla y se escalará a 0 cuando el usuario llegue al final de la página.
Nota: Asegúrate de tener habilitada la opción “Habilitar efectos de desplazamiento” en las opciones del tema Divi, de lo contrario, el código JavaScript no funcionará.