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.

Í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:

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