1. PROMO Subscribe our All Access Pass @ 75% OFF & access all our 16+ premium Divi extensions: Divi Block Pro, Carousel Toolkit, etc.LEARN MORE
Dismiss Notice
NEW Divi.Help Pro Carousel AI Toolkit - Magically turn your Divi design into carousel, simply by using our online toolkit. No plugins needed. Now it works with Divi 5 as well!Try our carousel AI toolkit
BEST Divi Block - A revolutionary drag & drop tool to easily mix & match 960+ premade blocks (Light & Dark) to kick start your Divi site design. Special module designs are included as well. Also newly added AI generator & color. Now it works with Divi 5 as well!
Learn More About Divi BlockFree Version ~ 340+ Free Blocks

Solved Parallax effect acting weird on mobile

Discussion in 'Free Divi Community Forum' started by FabioSL, May 9, 2020.

  1. FabioSL

    FabioSL New Member

    Hi
    I used a parallax effect fot the header of the site, and it's working weird on mobile: On mobile I see both the image fixed to the background (like there is no parallax) and at the same time the same image doing the parallax effect (open on mobile www.cmtmusical.com and look at the homapage).
    This is what I did:
    Divi > Theme Settings > Integration, then Add code to the < head > of your blog I put this code

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

    then, both in section settings and full width header setting:
    CSS Class: dtb-mobile-parallax
    Background > Parallax effect: yes > CSS

    What I did wrong?
     
    1. PRO MEMBER PERKS Divi Block Pro - 30+ premade custom footer designs for you to choose from:View Demo
  2. Divi.Help

    Divi.Help Administrator
    Staff Member

    To hide the static background image, try the below CSS in Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  3. FabioSL

    FabioSL New Member

    So after the other long code, in the "head" section? It's not working :/
     
    1. PRO MEMBER PERKS Divi Block Pro - Premade horizontal timeline design for your Divi site without using any plugins:View Demo
  4. Divi.Help

    Divi.Help Administrator
    Staff Member

    Nope. Paste the code in WP Admin > Divi > Theme Options > Custom CSS:
    Code:
    Log In or Sign Up to view this code.
     
  5. FabioSL

    FabioSL New Member

    It works! Thanks!
     
    1. PRO MEMBER PERKS Divi.Help Pro Layout Packs - Agency Divi layout pack featuring modern overlay archive blog layout with hover effects:View Demo