Der Parallax Effect für Mobile

5. Aug 2020 | DIVI, Wordpress

Der Parallax Effect sieht ziemlich beeindruckend aus. Schade nur, dass er auf Mobilgeräten einfach zum Standbild wird. Das sieht nicht mehr so beeindruckend aus.

DIVI bietet keine Bordmittel um dies zu beheben. Die Ursache liegt darin, dass auf den meisten Mobilversionen die Property ‘background-attachment:fixed’ nicht definiert ist. Im Ergebnis ist eine CSS Parallax nicht zu erreichen.

Eine True Parallax  hingegen kann mit etwas Code eingebaut werden.

Kopere den Code, rufe Divi > Theme Settings > Integration auf, und setze ihn in das Feld „Code dem < head > Ihres Blogs hinzufügen“ ein.

Den Reiter Header-Code aktivieren noch auf aktivieren stellen und die Einstellungen sichern.

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

Der Große Vorteil liegt darin, dass die CSS Parallax verwendet werden kann. Auf allen geeigneten Geräten wird diese trotz des Codes dargestellt. Nur wenn keine Parallax möglich ist, wird eine True Parallax  ausgegeben.

1 Kommentar

  1. Dana

    Danke danke danke! Ich hatte schon unendlich viele Anleitungen ausprobiert, keine hat funktioniert. Diese hier dagegen einwandfrei. Tipptopp!

    Antworten

Einen Kommentar abschicken

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.