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

Is it really possible to get a background image in parallelx on mobile with Divi ?

Didn't you notice? Every time you place a background image in parallelax (CSS or real), it doesn't work on the mobile version of your site.

It's so bad, and it's been a lot more than once! And I'm sure it's your case too, at least if you get to this article...

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

1 – What is the Parallax effect?

Parallax effect Don't date yesterday! It is thanks to him that you can create original designs for your websites.

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

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

For the effect to be completely successful:

• Your page (layout) must be quite long: if your page is too short, the image in parallelx cannot be Scrolled to display the expected effect.
• The parallax background should not be united: If the bottom is united, the parallax effect will be missed because we won't see anything. So prefer a texture image, a landscape photo, a gradient color...

To learn more about the parallax effect, read this excellent Article d.

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 – Parallax CSS or Parallax Real?

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

"Real parallax" option allows to get a background that moves at a different speed from the scroll. It is indeed a parallax effect.

The parallax option CSS adds a CSS property to the background image, this is the "background attachment" having a fixed value. The background becomes fixed and the content slides over, as if the background image was "pinned" on the bottom of the site.

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

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

The Parallax CSS option is really interesting if we position several sections afterwards with fixed backgrounds and more or less similar... Imagine some stop-motion images that follow each other and create a drawing-animated effect in simple CSS!

3 – Why does the parallax effect not work on mobile and tablet?

Yes... That's where it gets complicated! We can get amazing results simply with a parallax effect but the concern is that it doesn't work on mobile...

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

It almost looks like a taboo... It seems that it is because of the mobile browsers (Safari mobile and company) that would not accept the famous "background attachment: fixed"…

And also for a question of site performance…

Yet, nothing is as much used in "scroll" mode as a mobile and tablet screen, it's even the base!

Well yes, I have already seen (and you too) some WordPress sites that use parallax effects in mobile version Hey! 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 now, it works in desktop version but not in mobile and tablet...

So just add the following code bit:

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

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…

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

There's nothing more! Now the parallax effect of your sections is now compatible on mobile screens!

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

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

This is the website digitalhands.net which uses a parallax effect that moves to the mouse movement. That reminds me a little The "starry sky" effect of Particles.js. The rendering is very successful and captivating.

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

The site iutopi.com is a very good example of parallel axis effects to the scroll. We're in full immersion! We have almost an impression of "20.000 leagues under the seas"

The Beckett.design site instead falls into the category "too much". Let's say the parallax effects are very nice but there are almost all the sections... It's a little excessive, don't you think?

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

To tell you everything, it is a WordPress but the theme used was created tailor-made... of course!

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

And of course, such a design leaves no room for a good SEO optimization, because little text. So, actually, a choice is required...

Don't delay! Discover the theme Divi here !

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

Exactly, without code (See Chapter 4) make the parallax effect compatible on mobile with Divi, you are almost required to develop two versions of site: one for computer screens (desktop) and one for mobiles and tablets.

So basically, without this code, you enjoy the design in computer version and you're frustrated for the mobile version... That's what you felt before inserting the code d ?

Moreover, this is certainly what the developers of the site of the Restaurant Le Mugs (previous video) were forced to do: a desktop version 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 contents are chipped. Too bad!

Then let's see. version optimized for mobile, and without parallax effect:

Indeed, this version is much more optimized for mobiles. However, we can no longer find any effect of parallax, damage! This is precisely what made the site of this restaurant So special... The developers of the site were therefore forced to create 2 di site versions...

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