Seleccionar página

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.

Por Jefferson M.

May 4, 2020

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: 4 minutos

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>
hacer el efecto parallax en móvil para el tema Divi

¡Y eso es todo! Ahora puedes conseguir un efecto igual a este:

Su título va aquí

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

¿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?

¿Quieres aprender a usar Divi de manera profesional?

Conoce nuestro contenido premium y comienza hoy mismo a llevar tu sitio web o el de tus clientes a otro nivel

¿AÚN NO PERTENECES A NUESTRA COMUNIDAD?

Suscríbete a nuestro contenido premium y accede a cientos de recursos para aprender a diseñar web’s fantásticas con Divi

4 Comentarios

  1. Avatar

    Excelente, activa el efecto parallax sin causar conflicto con absolutamente nada más. Gracias.

    Responder
    • Jefferson M.

      ¡Es un gusto que te haya funcionado!

      Responder
  2. Avatar

    Hola, el código funciona bien, pero a mi se me ve tembloroso, ¿por que puede ser? tengo un hosting potente no debería pasar alguna pista?

    Responder
    • Jefferson M.

      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.

      Responder

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

🖐 ¡RECIBE LAYOUTS Y CHILDTHEME GRATIS! 😎

Suscribiendote a esta lista de correo, recibirás algunos de nuestros layouts premium y un childtheme para eCommerce totalmente gratis. Además te enviaremos nuestro resumen de contenidos para que siempre estés enterado/a de nuestras últimas novedades.

¡Perfecto! ¡Gracias! Pronto comenzarás a recibir nuestros recursos gratuitos