Parallax on mobile with Divi: how to make it compatible?

Published on 09/12/2019 | 28 comments

Is it really possible to get a parallax background image on a mobile phone with Divi?

You noticed that, didn't you? Every time you place a parallax background image (CSS or real), it doesn't work on the mobile version of your site.

It's such a shame and it's pissed me off more than once! And I'm sure you do too, at least if you get to this article....

Don't worry, this little problem will be fixed in 2 or 3 clicks and will quickly become an old memory...

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - What is the Parallax effect?

The parallax effect is not new! It is thanks to him that you can create original designs for your websites.

Parallax (or parallax) gives your websites a depth effect and even a 3D appearance because the background of a section moves at a different speed than the foreground elements, when the user scrolls down or up the page.

Parallax allows you to play with background images and foreground elements: with Divi, it is easy to add a section with a parallax background image and then place a text module on it.

For the effect to be completely successful:

  • Your page (layout) should be long enough: if your page is too short, the parallax image cannot be scrolled to display the expected effect.
  • The parallax bottom should not be united: if the bottom is united, the parallax effect will be missed because we will not see anything. So prefer a texture image, a landscape photo, a gradient color....

To learn more about the parallax effect, read this excellent article from AlsaCréation.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

2 - CSS Parallax or Real Parallax?

This is a question that is asked each time you enable the parallax option on your background images. Whether within a section (blue or purple) or within a line (green)...

Effet parallaxe "réelle" ou "CSS"

The "real parallax" option allows you to obtain a background that moves at a speed different from the scroll. This is indeed a parallax effect in the strict sense of the word.

The CSS parallax option adds a CSS property to the background image, it is the "background-attachment" whose value is "fixed". The background becomes fixed and the content slides over it, as if the background image were "pinned" to the background of the site.

To better understand, I have prepared a video for you:

Depending on the needs of your project, you can play with both types of parallax.

The CSS parallax option is really interesting if you position several sections in a row with fixed and more or less similar backgrounds... Imagine stop-motion images that follow one another and create a cartoon effect 😉 in simple CSS !

3 - Why does the parallax effect not work on mobile phones and tablets?

That's where it gets complicated. You can get great results simply with a parallax effect but the problem is that it doesn't work on mobile....

I've always been told that, I've always read that...

It almost seems like a taboo... It seems that it's because of the mobile browsers (Safari mobile and company) that wouldn't accept the famous "background-attachment: fixed"...

And also for a question of site performance

However, nothing is used as much in scroll mode as a mobile and tablet screen, it is even the basis!

Well yes, I have already seen (and you too) some WordPress sites that use parallax effects in mobile version! How do they do it then?

4 - How to add parallax on mobile with Divi?

The idea is to develop your parallax section as usual or as presented in the previous video.

For the moment, it works in desktop version but not in mobile and tablet version....

Then, you just have to add the following piece of code:

Note: this code was created by Ed Solman.

You can add this code according to 2 options:

1 - Within your layout thanks to the Code module available in the visual builder. In this case, the mobile parallax effect will only work here....

code inséré dans le layout
Code inserted into the layout thanks to the "code" module of Divi

2 - In the tab Divi > Theme option > Integration add this code in the section "head" of your site. In this case, the parallax effect will apply to the entire site.

parallaxe mobile applicable sur le site entier
The mobile parallax effect will be applicable to the entire site.

That's all there is to it! Now, the parallax effect of your sections is now compatible on mobile screens!

5 - Some examples of successful parallax effects (in video)

I suggest you to discover some websites that use the parallax effect... Be careful most of these sites are not WordPress sites...

This is the digitalhands.net site that uses a parallax effect that moves with the movement of the mouse. It reminds me a little bit of the "starry sky" effect of Particles.js. The rendering is very successful and captivating.

The Egopop.net site offers a home screen with another effect parallaxed to mouse movement... It's simple and quite fun!

The iutopi.com site is a very good example of parallax effects on scroll. We're in full immersion! We almost have an impression of "20,000 leagues under the sea" 😉

The Beckett.design website is more in the "too much" category. Let's just say the parallax effects are very nice but there are some in almost every section... It's a little excessive, don't you think?

The le-mugs.com website is certainly the most successful design I have ever seen. I often present this site to my students during my classes.

To tell you the truth, it is a WordPress but the theme used was created to measure... of course!

It uses parallax very well but if you go to this site, you will see a long loading screen, because yes, all these nested resources (images, parallax, video, SVG animation etc....) reduce performance...

And of course, such a design does not leave room for a good SEO optimizationbecause there is little text. So, indeed, a choice must be made...

Don't delay any longer! Discover the Divi theme here !

6 - In conclusion: no more different designs on desktop and mobile!

Precisely, without the code (seen in chapter 4) that makes it possible to make the parallax effect on mobiles compatible with Divi, you are almost obliged to develop two versions of the site: one for computer screens (desktop) and one for mobiles and tablets.

So basically, without this code, you enjoy the computer design and you're frustrated with the mobile version... Is that what you felt before you inserted Ed Solman's code?

Moreover, this is certainly what the developers of the Restaurant Le Mugs website (previous video) were forced to do: a desktop version and then a mobile version developed on a different URL... Watch these two videos captured on mobile..:

The desktop version visited on mobile shows that the theme is not responsive. However, the parallax effect works well... but half of the content is cropped. Too bad! Too bad!

Let's see then the version optimized for mobile, and without parallax effect:

Indeed, this version is much more optimized for mobiles. However, there is no longer any parallax effect, too bad! This is precisely what made the site of this restaurant so particular... The site developers were therefore forced to create 2 versions of the site...

So you have understood: you no longer have to compromise! The parallax effect on mobile is well compatible with WordPress sites using the Divi !

parallaxe mobile Divi
parallaxe mobile
add mobile Parallax to Divi website

1,440 words

6

You should like it too:

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

Cropped (cropped) images in Divi: how to avoid this?

Why does Divi display cropped images? This is often the case for the thumbnails of the Blog and Portfolio modules... Without forgetting the Divi Gallery... In these 3 modules the images are trimmed, cropped, cropped ! Here's how to fix this...

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