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
Í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?
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.
Excelente, activa el efecto parallax sin causar conflicto con absolutamente nada más. Gracias.
¡Es un gusto que te haya funcionado!
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?
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.
Buenas yo tengo el mismo problema, ya lo configure en desplazamiento suave pero se ve tembloroso,
Excelente código. Funciona perfectamente. ¡Gracias!
¡Gracias a ti por comentar!
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.
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.
Buenos días Jefferson, el código funciona perfectamente en móvil, ha sido una gran ayuda y me ha resuelto el problema.
Muchas gracias por la ayuda desinteresada.
Saludos
Gracias por comentar, no olvides suscribirte y visitar de nuevo uxdivi.com 😊🖐
Te agradezco mucho por tu tiempo y aporte. Me funciona perfectamente el código. Muchas gracias por tu trabajo!
Gracias por comentar, no olvides suscribirte y seguir visitando uxdivi.com 😊🖐