Introduction
If you’ve landed here, you are probably using Divi to design websites and want your parallax backgrounds to work on mobile devices.
For some reason Parallax on mobile seems seems to be some kind of taboo in the website development world. I’ve no idea why, I personally think it looks pretty cool. I also don’t know why Elegant Themes deliberately exclude mobile parallax in Divi. It would be great to have as an option you can switch on/off instead.
The good news is that if you want Divi Parallax to work on mobile devices, I’ve figured it out for you with a bit of simple jQuery.
Why use this?
- It’s lightweight so doesn’t add significant code to your websites.
- It’s simple to set up.
- It works for parallax background images on Divi SECTIONS, ROWS, COLUMNS or MODULES.
- It works if you have MULTIPLE sections on the same page all with parallax effects.
- It uses the same parallax formula as Divi
- It’s MORE EFFICIENT than standard Divi Parallax code *
* Divi continuously applies parallax settings to all parallax elements on your page, whether they are visible (In the viewport) or not. This code checks and only applies the parallax effect if the element/section is visible, reducing the amount of CSS updates happening on the page.
The code
Here’s the code you need to add to the head of your pages. In your WordPress Admin area, go to Divi > Theme Settings > Integration, then paste this into the Add code to the < head > of your blog box:
<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>
BOOM. You’re done! Simple hey?
What it does
Pretty simple really:
1) Checks and only applies the code if you’re viewing the page on a mobile device – As it performs this check using the same code as Divi, it means it will not interfere with the standard Divi desktop parallax code.
2) Checks each parallax element on your page to see if they are visible to the end-user on the screen (i.e. are in the viewport) and only applies the parallax effect if they are
3) Uses the same formulas Divi uses for it’s desktop parallax
The hard part was digging through the Divi theme code to find the original parallax calculations and simplifying it…
True Parallax vs CSS Parallax
Divi gives you two options for Parallax backgrounds: CSS Parallax and True Parallax.
On mobile devices, CSS Parallax will not work as it requires a CSS property ‘background-attachment:fixed’ to be set, which is not supported on most mobile devices/browsers.
Therefore, the code applies True Parallax to all parallax sections on mobile, regardless of whether they are set at CSS Parallax or True Parallax.
Use the Divi Visual Builder as normal to set up your parallax backgrounds, then this code automatically makes them they work on mobile too.
Demo
Below is a section added using the normal Divi Builder with a background image set and ‘use parallax’ selected. As mentioned, it doesn’t matter whether you choose CSS or True Parallax, the effect will be the same on mobile.
This section was created using the Divi Builder and has a Parallax background image set. Bingo, it now works on mobile!
Rounding up
So there you have it, a simple bit of JQuery and all your Divi parallax sections are now working beautifully on mobile devices 🙂
Please leave a comment if you found this quick tutorial useful!
About the Author
Ed Solman
Entrepreneur, Blogger and Website Developer/Designer. Passionate about helping people and businesses develop and grow. Daredevil sportsbike enthusiast.
Hi,
thank you!! It works!!
I have one question.
I had it working on several websites, but on some it won’t work.
Can you figure it out why? Is it the picture?
Example: http://www.ki-wi.be
Thanks!!
Hi Sybren, sorry I didn’t get back to you earlier. It looks like you’ve solved the problem as the parallax seems to be working now on mobile on the site you mentioned. Glad you got it working!
Hi, Ed,
I wonder if you can help me. I’m building a new website for my company. I used your code to run two Parallax sections on my Home Page and it works a treat on my iPad and iPhone. However, I have another parallax section on another page on my website (the Services page) and it doesn’t work. Can you give me a recommendation on how I can make it work?
Many thanks
Brian
Thanks, you saved me hours of code digging.
Cheers…..
You are most welcome 🙂
Thanks. Have tested this on my own website and it works well.
No problem Johan. Should work for anyone using Divi, I tested it thoroughly! It uses a simplified version of Divi’s standard parallax calculations and simply enables them on mobile as Divi itself switches them off.
Brilliant tip. Thank you.
You’re most welcome. I was pleased myself to get it working so easily! Love a bit of parallax…
BAM! great code – it’s working perfect!
thank you so much for sharing!
You’re welcome Andreas.
One of my parallax images on my home page is a bit jumpy but otherwise, this is great! Thank you.
No problem. Yes on mobile the parallax does sometimes look a bit jumpy. This code uses the standard Divi parallax calculations. If I get chance, I’ll look into it and update it to make it smoother sometime.
Works like a charm, thanks!
Great, glad it worked for you 🙂
Excelent !!
Thank´s ….
Thank you so much for this post!
Most welcome!
hello, I use it, its genial. But by mobile the picture jumps… and: I choice the CSS Parallax, thats mean, the image should be fixed. But it isnt at mobile. Why not? Its not possible?
As I think I said in the tutorial, this applies the Divi true parallax effect to any parallax section on mobile, regardless of whether you set it to CSS parallax or True Parallax. Unfortunately the css required for the CSS parallax is not supported on mobile devices so unfortunately you can’t achieve the same thing. Sorry!
Hello Ed!
I have been using your parallax code for Divi mobile, its fantastic! I saw you mentioned you might update for a smoother operation, did you have a timescale?
Obviously it’s amazing that you just do that for people, so it’s just me asking, not being a cheeky sod!
Anyway, thanks for your time!
WOW I can not thank you enough!!!
This is just what I´ve been looking for
Made my client really happy
it worked very great but now the changing of CSS to True on iPads are strange. i think with the latest iOS Update for iPad the Browser don’t want change the CSS-Parallax to True Parallax anymore. i just saw on the website https://www.tourismusverband-hamburg.de/ that the background CSS-Parallax Images are normal Background-Images but with a strange zoom-factor. is there any way to solve this? you can find the first parallax image on the landing page if you scroll a little bit down
Hey bro thank you so much for this code! I was about to be so pissed if I couldn’t get that effect on my mobile settings.
Thanks for sharing this great tip and code. It worked right off the bat and looks great on iOS. Cheers!
Hi,
I was trying this out, but when I scroll on mobile, the image zooms in – I think this is due to the 30% default zoom for true parallax that divi applies, however the issue with the mobile is that before I touch the screen, the image fits in perfectly & then once I touch it to scroll it readjusts to become bigger due to which it then gets cutoff from the display
Using your code on several websites without problems but since lastest divi updates it looks like the transformation from css to true parallax isn’t working anymore for tablets ..? instead of transforming css to true i have a very very huge zoom of the background image on an ipad air2. before it worked on tablet perfect as well. smartphones still working perfect – thanks a lot for it. what u think – any chance to check you code to fix this for ipads?
Hi Ed.
Thanks for the code, it works like a charm!
It appears however like a fixed background is possible on mobile (see https://www.parookaville.com/de/artists , and their subsites). And it seems to run smoothly as well. Would be so cool to look into!
works, thanks.
bonus points for using original code, explaining your choices, and foreseeing multiple caveats
Hi I was wondering if this is code is still current. I was hoping to finally once and for all fix the parallax on mobile issue with divi. the code works fine on my android, but on my iPad I get a pixelated blown out of proportion bg image instead of the parallax.
https://magazine.wideoyster.com/en/swedish-destination-foodies-flavours-skane/
Here I used the Divi css parallax … which should show as true parallax on mobile.
Is there any remedy?
Heyyy. Thanks so much for this, it works perfectly on mobile. Any idea how to get it to work for tablet size devices? Can’t get mine to look good on my iPad Pro!
Thanks so much! The parallax works *almost* perfectly.
Before I had I used your code for mobile parallax, the main issue I had was with the first photo — the background was in full screen, and it would resize itself when you scrolled to take into account the changing screen size when the search bar and lower options left the screen, but then it would go back to the smaller photo when I went back up.
I added this to the custom CSS: https://jsfiddle.net/swbLy5cp/
That solved the problem immediately.
Lol so why am I mentioning all of this — when I put your code into my site, this resizing jump happens when the photo first shows up, but then it stays the right size and the parallax works swimmingly. If I take away that CSS code, that resizing happens every time I scroll back up rather than just at the beginning.
Is there something I’m missing? I bet the answer is something really silly I’m not doing… here is my website for reference: http://www.gabrielwernick.com
amazing! THANK YOU!!
You’re welcome!
Great work! One thing I noticed is that it seems to break when editing from the Divi Builder under page editor but It seems to work fine with visual builder.
Also, the jumping is caused by the mobile browser eliminating the address bar and navigation from the top and bottom once a user scrolls, thereby increasing the height while at the same time scrolling down. This has been a problem since Chrome places the navigation at the bottom I believe.
Hello there,
I’m Mehmet from Turkey. Thank you so much. The code is excellent. Thank you so much. 🙂
You are most welcome Mehmet 🙂
I am using this and it works great. I have a question though. It seems to blow up my image on mobile. Is there a way to shrink the image width or no?
I’m not sure to be honest John. It simply uses the existing Divi desktop parallax function, but applies it on mobile. It may be possible, but you would need to hack the code a bit.
Shoot, I was excited when I saw this article sire, but I added this code to the and the mobile parallax is very stuttery/jumpy on scroll so I can’t use it. Visual Composer and Elementor have had smooth mobile parallax backgrounds for years, I wonder why Divi still can’t offer this?
Hello, thanks a lot for this! I just have a question, when I use the code for a background image on a row, the parallax works but a second static image remains locked in position, in other words the image gets copied and only one does the parallax. Do you have any idea on how could I fix this? Thank you!
Thanks… I need this solution and it’s worked well…
Hi Ed,
This works great, however the iPad detection is broken on IpadOS since IOS13.
Can you check this out?
Thanks
Patrice
AWESOME!!!
THANKS
Very clear info and easy to integrate! Thanks, KJ