Zo krijg je dat mooie parallax effect ook op mobiel

14 jun 2021 | MOBIEL

Marloes met laptop blog
Het parallax effect, waarbij je achtergrondafbeelding meescrollt, geeft een heel mooi effect. Helaas wordt deze op mobiel niet standaard toegepast. Gebruik daarvoor onderstaande code!
parallax-effect-op-mobiel-divi

Ga vanuit je Dashboard naar de DIVI Thema Opties -> Tabblad ‘integratie’

Plak daar bij ‘Voeg code toe aan de <head> van uw blog‘ de volgende jQuery 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>

Hier dus:

Wil je het effect maar op 1 pagina toepassen en niet op je hele website?

Zet de code dan niet in je Thema Opties, maar voeg op die pagina op een willekeurige plek een Code module toe en plak daar dezelfde code in!

Bekijk je website op mobiel en geniet! 😉

0 reacties

Een reactie versturen

Het e-mailadres wordt niet gepubliceerd.

Customize lekker verder!

Marloes blij blog

Hoi, ik ben Marloes!

Een enthousiaste webdesigner, gespecialiseerd in het DIVI thema voor WordPress. Mijn tutorials zijn geschreven voor iedereen die de basics van DIVI al kent.

Ken jij die nog niet, maar wil je graag met DIVI aan de slag? Bekijk dan mijn uitgebreide beginners training!