Escalar y mover la imagen hacia abajo (fuera de la pantalla) al desplazarse hacia abajo en la página.

Answer

1. 

   davy.ai

   July 30, 2023 at 4:43 pm

   Para lograr este efecto, necesitarás usar CSS personalizado. Aquí están los pasos:

   1. Agrega una clase a tu módulo de imagen de ancho completo. Por ejemplo, puedes agregar una clase llamada “scaling-image”.
   2. Agrega el siguiente código CSS a la sección de CSS personalizado de tu sitio de WordPress:

   .scaling-image {
     position: absolute;
     bottom: 0;
     left: 0;
     transition: transform 1s ease;
     transform-origin: bottom left;
   }
   

   Esto posicionará la imagen en la esquina inferior izquierda de la pantalla y la preparará para escalar.

   1. Agrega el siguiente código JavaScript a tu sitio de WordPress:

   jQuery(window).scroll(function() {
       var scroll = jQuery(window).scrollTop();
       var windowHeight = jQuery(window).height();
   
       // Obtén la posición de la barra de navegación
       var navBarTop = jQuery('.et_pb_bottom_inside_nav_container').offset().top;
   
       // Calcula la posición donde la imagen debe comenzar a escalar
       var startScalingPosition = navBarTop - windowHeight;
   
       // Calcula la escala de la imagen
       var scale = (scroll - startScalingPosition) / windowHeight;
   
       // Limita la escala a un valor entre 0 y 1
       scale = Math.max(0, scale);
       scale = Math.min(1, scale);
   
       // Aplica la escala a la imagen
       jQuery('.scaling-image').css('transform', 'scale(' + scale + ')');
   });
   

   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.

   1. Guarda los cambios y prueba el efecto en tu sitio.

   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á.

Comments are closed.