Parallaxe sur mobile avec Divi : comment le rendre compatible ?

Publié le 09/12/2019 | 28 commentaires

Est-ce réellement possible d’obtenir une image de fond en parallaxe sur mobile avec Divi ?

Vous l’aviez remarqué n’est-ce pas ? À chaque fois que vous placez une image de fond en parallax (CSS ou réelle), ça ne fonctionne pas sur la version mobile de votre site.

C’est tellement dommage et ça m’a mis en rogne plus d’une fois ! Et je suis sûre que c’est votre cas aussi, tout du moins si vous arrivez sur cet article…

Ne vous inquiétez pas, ce petit souci va être réglé en 2 ou 3 clics et deviendra vite un vieux souvenir…

Annonce : cet article contient des liens d’affiliation que vous reconnaitrez facilement. Les liens classiques sont en violet et les liens sponsorisés sont en rose.

1 – Qu’est-ce que l’effet Parallaxe ?

L’effet parallaxe ne date pas d’hier ! C’est grâce à lui que vous pouvez créer des designs originaux pour vos sites web.

Le parallax (ou parallaxe) donne un effet de profondeur et même une apparence 3D à vos sites web car l’arrière-plan d’une section se déplace à une vitesse différente de celle des éléments de premier plan, lorsque l’utilisateur fait défiler la page vers le bas ou vers le haut (scroll).

Le parallax permet de jouer avec des images d’arrière-plan et des éléments de premier plan : avec Divi, il est facile d’ajouter une section avec une image de fond en parallax puis de placer un module de texte par dessus.

Pour que l’effet soit complètement réussi :

  • Votre page (layout) devra être assez longue : si votre page est trop courte, l’image en parallax ne pourra pas être scrollée pour afficher l’effet escompté.
  • Le fond en parallax ne devra pas être uni : si le fond est uni, l’effet parallax sera raté car on ne verra rien. Préférez donc une image de texture, une photo de paysage, une couleur en dégradé…

Pour en savoir plus sur l’effet parallax, lisez cet excellent article d’AlsaCréation.

Savez-vous que vous pouvez tester Divi gratuitement ? Rendez-vous sur cette page et cliquez sur « TRY IT FOR FREE »

2 – Parallaxe CSS ou Parallaxe Réelle ?

C’est une question qui vous est posée à chaque fois que vous activez l’option parallax sur vos images de fond. Que ce soit au sein d’une section (bleue ou violette) ou au sein d’une ligne (verte)…

Effet parallaxe "réelle" ou "CSS"

L’option « parallaxe réelle » permet d’obtenir un arrière-plan qui se déplace à une vitesse différente du scroll. Il s’agit bien d’un effet parallax à proprement parlé.

L’option parallaxe CSS ajoute une propriété CSS à l’image d’arrière-plan, il s’agit du « background-attachement » dont la valeur est « fixed ». L’arrière-plan devient fixe et le contenu glisse au-dessus, comme si l’image d’arrière-plan était « épinglé » sur le fond du site.

Pour mieux comprendre, je vous ai préparé une vidéo :

Selon les besoins de votre projet, vous pourrez jouer avec les deux types de parallax.

L’option parallax CSS est vraiment intéressante si on positionne plusieurs sections à la suite avec des arrières-plan fixes et plus ou moins similaires… Imaginez des images en stop-motion qui se suivent et créent un effet de dessin-animé 😉 en simple CSS !

3 – Pourquoi l’effet parallaxe ne fonctionne pas sur mobile et tablette ?

Eh oui… C’est là que ça se complique ! On peut obtenir des résultats superbes simplement avec un effet parallax mais le souci est que ça ne fonctionne pas sur mobile…

On m’a toujours dit ça, j’ai toujours lu ça…

On dirait presque un tabou… Il parait que c’est à cause des browsers mobile (Safari mobile et compagnie) qui n’accepteraient pas le fameux « background-attachement: fixed »

Et aussi pour une question de performance des sites

Pourtant, rien n’est autant utilisé en mode « scroll » qu’un écran de mobile et de tablette, c’est même la base !

Eh bien oui, j’ai déjà vu (et vous aussi) certains sites WordPress qui utilisent des effets parallax en version mobile ! Comment font-ils alors ?

4 – Comment ajouter du parallaxe sur mobile avec Divi ?

L’idée est de développer votre section parallax comme à votre habitude ou comme présenté dans la vidéo précédente.

Pour l’instant, ça fonctionne en version desktop mais pas en mobile et tablette…

Alors, il vous suffit d’ajouter le bout de code suivant :

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

Notez : ce code a été créé par Ed Solman.

Vous pouvez ajouter ce code selon 2 options :

1 – Au sein de votre layout grâce au module Code disponible dans le visual builder. Dans ce cas, l’effet parallax mobile ne fonctionnera qu’ici

code inséré dans le layout
Code inséré au sein du layout grâce au module « code » de Divi

2 – Dans l’onglet Divi > Option du thème > Intégration : ajoutez ce code dans la section « head » de votre site. Dans ce cas, l’effet parallax s’appliquera à tout le site.

parallaxe mobile applicable sur le site entier
L’effet parallaxe mobile sera applicable sur le site entier.

Voilà rien de plus ! À présent, l’effet parallaxe de vos sections est à présent compatible sur les écrans mobiles !

5 – Quelques exemples d’effet parallax réussis (en vidéo)

Je vous propose de découvrir quelques sites web qui utilisent l’effet parallax… Attention la plupart de ces sites ne sont pas des sites WordPress…

Il s’agit ici du site digitalhands.net qui utilise un effet parallaxe qui bouge au mouvement de la souris. Cela rappelle un peu l’effet « ciel étoilé » de Particles.js. Le rendu est très réussi et captivant.

Le site Egopop.net propose un écran d’accueil avec un autre effet parallaxe au mouvement de la souris… C’est simple et assez amusant !

Le site iutopi.com est un très bel exemple d’effets parallaxes au scroll. On est en immersion complète ! Nous avons presque une impression de « 20.000 lieues sous les mers » 😉

Le site Beckett.design se range plutôt dans la catégorie « too much ». Disons que les effets de parallaxe sont très sympas mais il y en a presque à toutes les sections… C’est un peu excessif, vous ne trouvez pas ?

Le site web le-mugs.com est certainement le design le plus réussi que je n’ai jamais vu. Je présente souvent ce site à mes élèves, lors de mes cours.

Pour tout vous dire, c’est bien un WordPress mais le thème utilisé a été créé sur-mesure… of course !

Il utilise très bien le parallaxe mais si vous vous rendez sur ce site, vous verrez un écran de chargement un peu long, car oui, toutes ces ressources imbriquées (images, parallaxe, vidéo, animation SVG etc…) réduisent la performance…

Et bien sûr, un tel design ne laisse pas de place à une bonne optimisation SEO, car peu de texte. Donc, effectivement, un choix s’impose…

Ne tardez plus ! Découvrez le thème Divi ici !

6 – En conclusion : fini les designs différents sur desktop et mobile !

Justement, sans le code (vu au chapitre 4) qui permet de rendre compatible l’effet parallaxe sur mobile avec Divi, vous êtes quasi-obligé de développer deux versions de site : une pour les écrans d’ordinateur (desktop) et une pour les mobiles et tablettes.

Donc en gros, sans ce code, vous vous faites plaisir pour le design en version ordinateur et vous êtes frustré pour la version mobile… C’est bien ça que vous ressentiez avant d’insérer le code d’Ed Solman ?

D’ailleurs, c’est certainement ce que les développeurs du site du Restaurant Le Mugs (vidéo précédente) ont été contraints de faire : une version desktop puis une version mobile développée sur une URL différente… Regardez ces deux vidéos capturées sur mobile :

La version desktop visitée sur mobile montre que le thème n’est pas responsive. Toutefois, l’effet parallaxe fonctionne bien… mais la moitié des contenus sont croppés. Dommage !

Voyons alors la version optimisée pour mobile, et sans effet de parallaxe :

Effectivement, cette version est bien plus optimisée pour les mobiles. Toutefois, on ne trouve plus aucun effet de parallaxe, dommage ! C’est justement ce qui rendait le site de ce restaurant si particulier… Les développeurs du site ont donc été contraints de créer 2 versions di site…

Donc vous l’avez compris : vous n’avez plus besoin de faire de compromis ! L’effet parallaxe sur mobile est bien compatible avec les sites WordPress utilisant le thème Divi !

parallaxe mobile Divi
parallaxe mobile
add mobile Parallax to Divi website

1,440 mots

6

Ça devrait vous plaire aussi :

Images rognées (recadrées) dans Divi : comment éviter cela ?

Images rognées (recadrées) dans Divi : comment éviter cela ?

Pourquoi Divi affiche des images rognées ? C’est souvent le cas des vignettes des modules Blog et Portefeuille… Sans oublier la Galerie Divi… Dans ces 3 modules les images sont retaillées, rognées, recadrées ! Voici comment remédier à cela…

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.

Pin It on Pinterest

Shares
Share This