If you visit my blog for a time now, you’ll know that I don’t like long introductions. So, you are looking to tweak how to add parallax on your Divi Theme but somehow you ended up on my hidden blog by Google. In this article I share how to add parallax on mobile Divi Theme and where to apply.
Ok. Here you have it!
Parallax on Mobile Divi Theme
What does it do?
- Compatibility and Integration with Divi’s Desktop Parallax on Mobile Divi Theme Code: By using the same underlying code for performing checks as Divi, the implementation ensures seamless compatibility and integration. This approach minimizes the risk of conflicts or issues arising from the use of custom or third-party code that might interfere with Divi’s core functionalities. As a result, users can enjoy a consistent parallax experience across both desktop and mobile platforms without any disruption to the site’s performance or appearance.
Benefits:- Ensures seamless integration with Divi’s existing parallax features.
- Reduces the likelihood of conflicts or bugs, leading to a more stable website.
- Maintains the visual integrity and performance of the website across different devices.
- Viewport Visibility Checks for Parallax Elements: Implementing a mechanism to check whether parallax elements are currently visible to the end-user (i.e., within the viewport) can significantly enhance performance and user experience. This ensures that resources are allocated efficiently, only animating elements when they are likely to be seen by the user.
Benefits:- Improves website performance by reducing unnecessary animations and resource usage.
- Enhances user experience by focusing on elements that are currently in view.
- Can contribute to better SEO as page speed and user experience are ranking factors.
- Adherence to Divi’s Desktop Parallax Formulas: Utilizing the same formulas for mobile parallax as Divi uses for desktop ensures consistency in the visual experience. This uniformity in the parallax effect across devices enhances the website’s professional appearance and functionality.
Benefits:- Provides a cohesive visual experience across all devices.
- Eliminates the need for custom code adjustments for mobile devices, saving development time.
- Ensures that the parallax effect remains true to the designer’s original vision, regardless of the device.
- Universal Application of True Parallax on Mobile: By applying True Parallax to all sections on mobile devices, regardless of their initial settings (CSS Parallax or True Parallax), users can experience a more dynamic and engaging interaction. True Parallax, which involves the background moving at a different speed than the foreground, creates a sense of depth that enhances the overall aesthetic appeal of the site.
Benefits:- Elevates the visual appeal of the website with a more immersive parallax effect on mobile.
- Standardizes the parallax experience across all sections, providing consistency.
- Enhances user engagement by leveraging a visually striking effect that differentiates the site.
Where to add: 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.
Below you can get the way to add parallax on mobile Divi Theme
<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>Wrapping up:
In this article we focused on achieving seamless integration of Divi’s parallax features on mobile devices while maintaining performance and visual consistency. It provides solutions that reduce conflicts, optimize animations, and ensure an engaging experience for users.
If you want to take website optimization to the next level and enhance image loading times, check out the WebP Conversion Pro Tool. This tool allows you to convert JPG and PNG images to the modern WEBP format for faster websites.