Parallax creates an illusion of depth and motion by making the background image move at a different speed than the foreground elements. Parallax backgrounds can be dynamic and engaging, but they also pose challenges for mobile devices.
In this quick guide, you will learn how to add parallax to your divi website on mobile devices. Divi offers two options for parallax backgrounds: CSS Parallax and True Parallax. However, neither of them works well on mobile devices by default.
To fix this problem, you will need to use some custom code that detects the device and applies the appropriate parallax effect. By the end of this guide, you will be able to create stunning parallax backgrounds that work on both desktop and mobile devices with Divi.
Step-by-Step Guide to Adding Parallax to Your Divi Website
- Click the gear icon on the element you want to add parallax to
2. Go to Content > Background > Image and choose your image.
3. Turn on Use Parallax Effect and pick CSS or True Parallax.
4. Save and preview.
5. If Parallax is not working on mobile, paste this code in the Divi Theme Options > Integration > Add Code to the head
<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).pare
nt(“.et_pb_fullscreen”).length && $(window).height() > $this_parent.innerHeight() ? $(window).height() : $this_parent.innerHeight(),
bg_height = .4 * $(window).height() + parallaxHeight,
main_position = “translate(0, ” + .4 * ($(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>
The Advantages of Parallax on Mobile
Incorporating parallax into your mobile Divi website can yield a range of benefits:
- Enhanced Engagement: The dynamic nature of parallax captures users’ attention and encourages them to explore your content further.
- Memorable Experience: The unique visual experience offered by parallax can leave a lasting impression on visitors, making your website more memorable.
- Reduced Bounce Rates:Engaging visuals can help reduce bounce rates as visitors are more likely to stay longer on your website.
- Modern Aesthetic: Mobile parallax adds a modern and sophisticated touch to your website’s design, conveying a sense of professionalism and innovation.
Conclusion
In a competitive digital landscape, setting your Divi website apart from the rest is essential. Follow the steps outlined in this quick guide to enhance your website’s visual appeal, capture visitors’ attention, and leave a lasting impression.