Parallax en el móvil con Divi: ¿cómo hacerlo compatible?

Publicado el 09/12/2019 | 28 comentarios

¿Es realmente posible obtener una imagen de fondo de paralaje en el móvil con Divi?

Te diste cuenta de eso, ¿no? Cada vez que colocas una imagen de fondo de paralaje (CSS o real), no funciona en la versión móvil de tu sitio.

¡Es una lástima y me ha molestado más de una vez! Y estoy seguro de que tú también, al menos si llegas a ese artículo...

No te preocupes, este pequeño problema se resolverá en 2 o 3 clics y se convertirá rápidamente en un viejo recuerdo...

Publicidad: este artículo contiene enlaces de afiliados que reconocerán fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.

1 - ¿Qué es el efecto Parallax?

¡El efecto paralaje no es nuevo! Es gracias a ella que puedes crear diseños originales para tus sitios web.

El paralaje (o paralaje) da un efecto de profundidad e incluso un aspecto tridimensional a sus sitios web porque el fondo de una sección se mueve a una velocidad diferente a la de los elementos del primer plano, cuando el usuario se desplaza hacia abajo o hacia arriba (desplazamiento) de la página.

Parallax te permite jugar con imágenes de fondo y elementos de primer plano: con Divi, es fácil añadir una sección con una imagen de fondo de paralaje y luego colocar un módulo de texto encima.

Para que el efecto sea completamente exitoso:

  • Su página (diseño) debe ser lo suficientemente larga: si su página es demasiado corta, la imagen de paralaje no puede ser desplazada para mostrar el efecto deseado.
  • El fondo de paralaje no debe ser plano: si el fondo es plano, el efecto de paralaje se perderá porque no se verá nada. Así que prefieren una imagen con textura, una foto de paisaje, un color de gradiente...

Para aprender más sobre el efecto de paralaje, lea este excelente El artículo de AlsaCréation.

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "TRY IT FOR FREE".

2 - CSS Parallax o Real Parallax?

Esta es una pregunta que se te hace cada vez que activas la opción de paralaje en tus imágenes de fondo. Ya sea dentro de una sección (azul o púrpura) o dentro de una línea (verde).

Effet parallaxe "réelle" ou "CSS"

La opción "paralaje real" proporciona un fondo que se mueve a una velocidad diferente a la del pergamino. Este es un verdadero efecto de paralaje.

La opción de paralaje CSS agrega una propiedad CSS a la imagen de fondo, esta es la "fondo-agregado" cuyo valor es "fijo".. El fondo se fija y el contenido se desliza sobre él, como si la imagen de fondo estuviera "clavada" al fondo del sitio.

Para entenderlo mejor, he preparado un video para ti:

Dependiendo de las necesidades de su proyecto, podrá jugar con ambos tipos de paralaje.

La opción CSS de paralaje es realmente interesante si posicionas varias secciones seguidas con fondos fijos y más o menos similares... ¡Imagina imágenes en stop-motion que se siguen unas a otras y crean un efecto de caricatura 😉 en CSS simple!

3 - ¿Por qué el efecto de paralaje no funciona en el móvil y en la tableta?

Sí... ¡Ahí es donde se complica! Puedes obtener grandes resultados simplemente con un efecto de paralaje pero el problema es que no funciona en los teléfonos móviles...

Siempre me han dicho eso, siempre he leído eso...

Casi parece un tabú... Parece que es debido a los navegadores móviles (Safari móvil y compañía) que no aceptaron el famoso "fondo-adjunto: fijo"...

Y también por una cuestión de rendimiento del sitio

Sin embargo, nada se usa tanto en modo de desplazamiento como un móvil y la pantalla de una tableta, ¡incluso la base!

Bueno, sí, ya he visto (y tú también) algunos sitios de WordPress que usan efectos de paralaje en versiones móviles! ¿Cómo lo hacen entonces?

4 - ¿Cómo añadir paralaje en el móvil con Divi?

La idea es desarrollar su sección de paralaje como de costumbre o como se presentó en el vídeo anterior.

Por el momento, funciona en la versión de escritorio pero no en la versión para móviles y tabletas...

Entonces, sólo tienes que añadir el siguiente fragmento de código:

Nota: este código fue creado por Ed Solman.

Puedes añadir este código según 2 opciones :

1 - Dentro de su diseño gracias a la Módulo de código disponible en el constructor visual. En este caso, el efecto de paralaje móvil sólo funcionará aquí.

code inséré dans le layout
El código se inserta en el diseño gracias al módulo "código" de Divi

2 - En la pestaña Divi > Opción temática > Integración añadir este código en el "cabeza de su sitio. En este caso, el efecto de paralaje se aplicará a todo el sitio.

parallaxe mobile applicable sur le site entier
El efecto de paralaje móvil se aplicará a todo el sitio.

¡Eso es todo lo que hay! ¡Ahora el efecto de paralaje de sus secciones es compatible con las pantallas de los móviles!

5 - Algunos ejemplos de éxito del efecto paralaje (en vídeo)

Te propongo que descubras algunos sitios web que usan el efecto paralaje... Ten cuidado, la mayoría de estos sitios no son de WordPress...

Este es el sitio digitalhands.net que utiliza un efecto de paralaje que se mueve con el movimiento del ratón. Es un poco parecido a el efecto "cielo estrellado" de Particles.js. La representación es muy exitosa y cautivadora.

El sitio Egopop.net ofrece una pantalla de inicio con otro efecto de paralaje al movimiento del ratón... ¡Es simple y muy divertido!

El sitio iutopi.com es un muy buen ejemplo de efectos de paralaje con desplazamiento. ¡Estamos en completa inmersión! Casi tenemos una impresión de "20.000 leguas de viaje submarino" 😉

El sitio Beckett.design está en la categoría de "demasiado". Digamos que los efectos de paralaje son muy agradables pero hay algunos en casi todas las secciones... Es un poco excesivo, ¿no crees?

El sitio web le-mugs.com es sin duda el diseño más exitoso que he visto. A menudo presento este sitio a mis estudiantes durante mis clases.

A decir verdad, es un WordPress pero el tema utilizado ha sido hecho a medida... ¡por supuesto!

Utiliza el paralaje muy bien pero si vas a este sitio, verás una pantalla de carga un poco larga, porque sí, todos estos recursos anidados (imágenes, paralaje, vídeo, animación SVG, etc...) reducen el rendimiento...

Y, por supuesto, tal diseño no deja espacio para un buen Optimización SEO...porque no hay mucho texto. Así que, de hecho, hay que tomar una decisión...

¡No esperes más! Descubre el tema de la Divi aquí !

6 - En conclusión: ¡no más diseños diferentes en el escritorio y el móvil!

Exactamente, sin el código (véase el capítulo 4) que hace compatible el efecto de paralaje en los teléfonos móviles con Divi, se ve casi obligado a desarrollar dos versiones del sitio: una para las pantallas de ordenador (de escritorio) y otra para los móviles y tabletas.

Así que básicamente, sin este código, estás disfrutando del diseño en la versión para ordenador y estás frustrado con la versión para móvil... ¿Es así como te sentías antes de insertar el código de Ed Solman?

Por cierto, esto es ciertamente lo que los desarrolladores del sitio web del Restaurante Le Mugs (video anterior) se vieron obligados a hacer: una versión de escritorio y luego una versión móvil desarrollada en una URL diferente... Mira estos dos videos capturados en el móvil :

La versión de escritorio visitada en el móvil muestra que el tema no responde. Sin embargo, el efecto de paralaje funciona bien... pero la mitad del contenido es recortado. ¡Qué lástima!

Veamos la versión optimizada para móviles, y sin efecto de paralaje:

De hecho, esta versión está mucho más optimizada para los móviles. Sin embargo, ya no encontramos ningún efecto de paralaje, ¡mala suerte! Esto es precisamente lo que hizo que el el sitio web de este restaurante tan particular... Los desarrolladores del sitio se han visto obligados a crear 2 versiones del sitio...

Así que lo entiendes: ¡no tienes que comprometerte más! El efecto de paralaje en el móvil es muy compatible con los sitios de WordPress que usan el tema Divi!

parallaxe mobile Divi
parallaxe mobile
add mobile Parallax to Divi website

1.440 palabras

6

A ti también debería gustarte:

28 Commentaires

  1. Nathalie Dauchez

    Bonjour et merci beaucoup pour ce bout de code qui rend mon site enfin sympa avec son effet parallaxe en version responsive !
    Par contre, cela ne fonctionne que si on le met en « mode » parallaxe réel, avec le « mode » css il ne se passe rien. En tout cas, c’est vraiment top que ça fonctionne 🙂
    Encore merci,
    Bonne journée

  2. Lycia Diaz

    Merci Nathalie. 😉

  3. David C.

    Merci pour ce tuto Lycia.
    En effet, j’ai lu partout que l’effet Parallaxe en JS est désactivé sur mobile pour des raisons de performance. Mais maintenant que nous avons tous des mobiles dernier cri avec des processeurs qui montent à des hautes fréquences permettant de traiter plusieurs processus sans faire ralentir le système, cela peut être remis en question.

    Par contre, je m’aperçois dans ton code (ou plutôt celui de Ed Solman) qu’il injecte du CSS en JS. Ce n’est pas recommandé. Il est préférable de jouer sur les DOM en ajoutant/supprimant des classes.

    Sinon, dans tes exemples, tu montres des effets parallaxe avec le pointeur de la souris… Ce qui est légèrement différent. Là tu joue sur l’emplacement x et y du pointeur et non de la position top de l’écran (scroll).

    Par défaut, je n’aime pas jouer avec du JS sur ces éléments qui demandent beaucoup de ressource/puissance. On s’aperçois très vite qu’avec une machine qui n’est pas très performante (la majorité qui sont acheté par les particulier en grand surface ou pour les employés moyen), il y a de gros ralentissement avec des effets pas top.

    Quoi qu’il en soit, bel article 😉

  4. Lycia Diaz

    Salut David,
    Merci pour ces précisions et belle année 2020 à toi !
    Tu es le Roi Sauveur du JS 😉 Dommage que je n’ai pas un système de commentaires qui fonctionne avec des badges 😉 Lol !
    Oui tu as raison, les X et Y, c’est pas du scroll à proprement parler…

  5. David C.

    Il ne te reste plus qu’à mettre un p’tit plugin pour ça 🙂

    PS : je mets mon site à chaque commentaire, j’ai vu sur le search console que c’était indexé (bizarre) et du coup ça me fait des backlink cool 🙂

  6. Lycia Diaz

    Hey hey 😉
    Oui, les commentaires sont comptabilisés en tant que backlinks. Même s’ils sont « Nofollow » (c’est pas moi, c’est WordPress), Google les prends en compte !
    Comme quoi, le « nofollow » est quand même « suivi » par Google, contrairement à ce qu’ils veulent nous faire croire 😉

  7. Cédric

    Salut, de mon côté, ça créé un parallaxe sur mobile, mais que style parallaxe réel, et c’est tout saccadé, pas moyen de fixer pour avoir un parallaxe css qui serait sans saccade ?

    PS: bonne année !

  8. Lycia Diaz

    Salut Cédric,
    C’est bizarre, tout a l’air de fonctionner de mon côté. Si tu regardes la page d’accueil d’Astuces Divi en version mobile, tu verras le mockup avec l’arrière-plan en parallaxe et il ne semble pas être saccadé (du moins sur mon mobile).
    Ton problème vient peut-être d’ailleurs ?

  9. Cedric

    Ça a toujours fait ces saccades quand j’active le
    Parallaxe mobile, sur tous mes sites. D’habitude je le fais grâce à divi hacks. Je pensais que ce script fonctionnerait mieux, c’est dommage. Tu dois être sur Android non? Je pense que c’est surtout sur Apple que ça part en vrille. C’est pour ça que j’aimerai pouvoir mettre le parallaxe css et non réel, au moins plus de saccade.

  10. David C.

    Lycia, Cédric veut du parallex CSS sur mobile.
    Ton script est pour du parallax JS il me semble.

  11. Lycia Diaz

    Cédric : non je suis sur Mac/iPhone/iPad… pas d’Androïd.
    Mais si tu veux du « Parallaxe CSS », c’est pas possible. Comme le dit David, c’est du Parallax JS (Parallaxe « Réelle »). Seul ce code fonctionne sur mobile (apparemment).

  12. Cedric

    Pas possible ou tu ne sais pas? Parce que j’ai déjà vu sur des sites WordPress des images background fixes. Il doit bien y avoir une solution.
    Pour info, je ne suis jamais notifié de tes réponses.

  13. Lycia Diaz

    Ah…
    J’ai pourtant parcouru tout le web justement à ce sujet car c’est une question que je me suis déjà posée… mais rien de probant. C’est pourquoi je dis que ce n’est pas possible. Mais une solution doit bien exister, je suppose.
    Ce tuto fonctionne pourtant bien et sans saccade.
    Est-ce que tu vois des saccades sur ma home ?

  14. David C.

    J’ai regardé ton effet parallaxe sur ta page d’accueil, ça fonctionne bien sans saccade.

    Et même sur Android… Nan mais oh c’est quoi ce racisme loooollll

    Cédric, il faut confirmer ton abonnement aux commentaires (avec un compte wordpress.com/org) pour être notifié.

    Lycia, tu devrai mettre le plugin stcr, il gère très bien les abonnements aux commentaires.

  15. Cedric

    Non ça fonctionne très bien sûr ta home.
    Possible que tu m’envoies un layout juste avec la section qui contient ton parallax ? Comme ça si ça fonctionne pas sur mon site je saurai que ça vient d’ailleurs

  16. Lycia Diaz

    David : le plugin STCR ? Tu me parles chinois 😉 Et non, y’a pas de racisme Androïd/iOS ici… MDR !

  17. Mathilde.G

    Bonjour, merci bcp pour ce code ! Et tout le reste ! 🙂
    Je débute sur Divi et je me demandais si il y avait un moyen ou une astuce pour ajuster facilement le site version ordinateur à version mobile ?

    Merci,

    Bonne soirée,

    Mathilde

  18. Lycia Diaz

    Merci Mathilde. Oui, il y a des options pour paramétrer chaque version au niveau de chaque module. Tu verra un petit icône, tu cliques dessus et tu donnes les valeurs pour chaque version 😉

  19. Mathilde.G

    Merci milles fois ! J’ai trouvé le petit icône qui permet de paramétrer individuellement les dimensions ! Je suis joie !!
    Et votre site est super il m’aide énormément dans la création de mon site, une vraie bible !

  20. Lycia Diaz

    Merci Mathilde

  21. Sterling Williams

    Where is the script for us to copy paste for this mobile parallax pls? I don’t see it anywhere on the page
    PRICELESS to have mobile parallax backgrounds! PLS

  22. Lycia Diaz

    Hi Williams ! Sorry for the trouble ! Look at the french version of this post and you will found the Script . Thanks !

  23. Val

    Hey ! Trop Cool ce script ! Merkkkiiii 😉
    J’en profite pour te demander si ton divi-child est tjs d’actu avec la dernière version de Divi ?!
    Je suppose que oui mais si déjà je suis là, je demande … lol
    Bonne semaine
    Et merci encore pour l’astuce parallaxe ! Top !

  24. Val

    0_o mon précédent commentaire a été supprimé ?!
    Je ne vois pas pourquoi. Tant pis !

  25. Lycia Diaz

    Salut Val,
    Non ton commentaire n’a pas été supprimé, je ne l’avais juste pas encore validé 😉
    Pour le Divi Child, oui, c’est bon 😉
    À bientôt
    Lycia

  26. Val

    Coucou Lycia,

    Ok sorry mais c’est bizarre parce que j’avais bien une note comme quoi le message était en attente de modération et puis après, plus rien, comme disparu.
    Voilà pourquoi j’ai pensé qu’il avait été supprimé 🙁
    Dsl 😉
    Merci pour ta réponse.
    Au plaisir
    Val

  27. Guillaume

    Bonjour mon image de fond ne reste pas fixe malgré le code, si je réduis mon navigateur en version mobile cela fonctionne mais lorsque je regarde depuis mon mobile cela ne fonctionne plus…

  28. Lycia Diaz

    Si tu mets le code ça doit marcher. Ton mobile est peut-être en cache et garde l’ancienne version ?

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Ponerlo en el interés

Acciones
Comparte esto