UXDIVI

Como hacer el efecto parallax en móvil para el tema Divi

Si estás aquí, probablemente es porque estés utilizando Divi para diseñar sitios web y quieres aprender como hacer el efecto parallax en móvil para el tema Divi.

Tiempo de lectura estimado: 3 minutos

Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros. Accede a todo nuestro contenido desde $12/mes*
Transforma tu carrera con UXDIVI
Únete a nuestra comunidad y comienza a diseñar el futuro hoy. Aprende, innova y crece junto a nosotros

Accede a todo nuestro contenido desde US $12/mes*
Transforma tu carrera con UXDIVI

Índice

Por alguna razón, el efecto “Parallax” en dispositivos móviles parece ser una especie de tabú en el mundo del desarrollo de sitios web. No tengo idea de por qué, personalmente creo que se ve muy bien. Tampoco sé por qué Elegant Themes excluye deliberadamente el efecto parallax en móvil, en un sitio diseñado con Divi. En vez de esto, sería genial tener una opción nos permita activar o desactivar esta opción en vez de simplemente quitarla.

La buena noticia es que en este tutorial gratuito, te enseñaremos como activar el efecto parallax en móvil para el tema Divi agregando un pequeño snippet – jQuery en nuestro sitio web.

¿Por qué agregar un Snippet para hacer el efecto parallax en móvil para el tema Divi?

  • El Snippet es liviano, por lo que no agregaremos código en exceso a nuestro sitio web.
  • Es simple de configurar (cómo veremos a continuación).
  • Funciona para todas las imágenes de fondo configuradas con el efecto parallax en Divi: Secciones, columnas, módulos, secciones de ancho completo.
  • Funciona aunque tengas múltiples secciones en la misma página, todas con efectos de paralaje.
  • Utiliza la misma fórmula de parallax que Divi.
  • Crea un efecto fantástico en nuestros diseños con Divi.

Ahora por lo que viniste, el Snippet de le dará el efecto parallax en móvil para el tema Divi

Aquí está el código que debes agregar al encabezado de sus páginas. Es simple, para lograr esto debes ir a tu área de administración de WordPress, ir a Divi > Configuración del tema > Integración > y pega el código en el cuadro del < head > de las opciones de esa pestaña (ver la imagen inferior):

<script>
jQuery(document).ready(function($) {
  // Mobile device check
  $is_mobile_device = null !== navigator.userAgent.match(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/);
  if ($is_mobile_device) {
    // Function to check if an element is in the Viewport
    isInViewport = function(elem) {
        elementTop = elem.offset().top, elementBottom = elementTop + elem.outerHeight(), viewportTop = $(window).scrollTop(), viewportBottom = viewportTop + $(window).height();
        return elementBottom > viewportTop && elementTop < viewportBottom;
    };
    // Apply Parallax transform calculations when scrolling
    $(window).scroll(function() {
        $(".et_parallax_bg").each(function() {
           var $this_parent = $(this).parent();
           // Check if the parent element is on-screen
           var $is_visible = isInViewport($this_parent);
           if ($is_visible) {
             element_top = $this_parent.offset().top,
             parallaxHeight = $(this).parent(".et_pb_fullscreen").length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
             bg_height = .3 * $(window).height() + parallaxHeight,
             main_position = "translate(0, " + .3 * ($(window).scrollTop() + $(window).height() - element_top) + "px)";
             $(this).css({height: bg_height,"-webkit-transform": main_position,"-moz-transform": main_position,"-ms-transform": main_position,transform: main_position});
           }
        });
    });
  }
});
</script>

¡Y eso es todo! Ahora puedes conseguir un efecto Parallax en móvil.

¿Cómo trabaja éste snippet?

  • Comprueba y solo aplica el código si está viendo la página en un dispositivo móvil: como realiza esta comprobación con el mismo código que Divi, significa que no interferirá con el código parallax estándar de Divi.
  • Comprueba cada elemento parallax en nuestra página para ver si son visibles para el usuario final en la pantalla (es decir, están en la ventana gráfica) y solo aplica el efecto parallax si lo son.
  • 3) Utiliza las mismas fórmulas que Divi para ejecutar el efecto parallax.

Conclusiones:

Así que ahí lo tienes, un poco de JQuery y todas tus secciones en Divi con efecto parallax ahora funcionarán perfectamente en dispositivos móviles 🙂

¡Por favor, deja un comentario si este pequeño tutorial te ha parecido útil, y no se te olvide echarle un vistazo a nuestros cursos y tutoriales premium sobre el tema Divi!

La clave de un copywriting web exitoso es mantenerlo todo simple, breve y efectivo. ¿Qué otros tips nos recomendarías?

Artículos relacionados

Comentarios

    1. Prueba activando el “desplazamiento suave” desde las opciones generales de Divi. Lo otro es que recuerda que al desplazarte lo haces con la ruedita del mouse y ese movimiento no es natural. Prueba que no se vea tembloroso con el desplazamiento desde móvil.

  1. Hola Jefferson, el código es excelente para móviles, pero me gustaría aplicar ese mismo efecto a las imágenes del ordenador y no sólo a los dispositivos móviles. Creo que el movimiento es más agradable con este código que con el que trae Divi por defecto. ¿Qué tendría que cambiar en el código? Gracias.

    1. Que tal Juan, un gusto saludarte. Para ordenador puedes usar el efecto CSS Parallax por defecto que trae Divi. De hecho, este código es para que se aplique ese efecto en móviles, pero con Divi lo puedes lograr desde los mismos ajustes del fondo de pantalla, en background Parallax. Allí lo puedes ver.

¡Registrate en nuestro próximo Live!
12 de ENERO de 2024 9:30 hrs (CDMX)
En este evento exclusivo, abordaremos las preguntas sobre ecommerce en Divi, además de responder a cualquier otra pregunta que nuestros suscriptores de la academia tengan en mente.
0
días
0
horas
0
minutos
0
segundos
¡Registrate en nuestro próximo Live!
12 DE ENERO DE 2024 9:30 HRS (CDMX)
0
días
0
hrs
0
min
0
seg
25% OFF BLACK FRIDAY SALE!
Del 24 al 30 de noviembre 2023 descuentos por:
¿Aún no eres miembro Premium ⭐ de UXDivi? ¡Esta es tu oportunidad de oro! Únete a nuestra comunidad de expertos en Divi y disfruta de recursos exclusivos, tutoriales avanzados, y una red de profesionales al alcance de tu mano.
0
días
0
horas
0
minutos
0
segundos
25% OFF BLACK FRIDAY SALE!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% en tu suscripción Premium. ¡Solo durante Black Friday!
0
días
0
hrs
0
min
0
seg
Aprovecha un DESCUENTO DEL 25% ¡Solo durante Black Friday!
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →
¡Únete a nuestro próximo Live mensual de Preguntas y Respuestas el viernes 12 de enero de 2024! Separa tu cupo GRATIS AQUÍ →