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.

5 Kommentare

  1. Dana

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

    Antworten
  2. Ipad Parallax

    auf dem phone geht es klasse ! aber leider nicht auf dem iPad. weisst du warum?

    Antworten
    • cAiglstorfer

      Eine Interessante Frage. Als ich den Artikel veröffentlicht habe, hat es auch auf dem IPad mit Safari und Chrome funktioniert.
      Heute geht es nicht mehr. Was im IOS wieder geändert wurde….?

      Antworten
  3. Thomas

    Hallo Christian,

    danke Dir für die Veröffentlichung dieser Lösung. Sie funktioniert bei mir auf dem iPhone XR (habe kein iPad).

    Aber wenn man das Scrolling beginnt, werden alle Bilder auf meinem iPhone XR mit einem hässlichen Sprung etwas vergrößert.

    Auch das 1. Bild im 1. Segment, bei dem die Paralaxe gar nicht aktiviert ist:

    https://koniji.com/home-2/
    (bitte URL nicht veröffentlichen)

    Ist das Problem bekannt?
    Gibt es einen Fix?

    Danke im voraus, falls Du mir hier helfen kannst.

    Ein schönes Wochenende,

    Thomas

    Antworten
    • cAiglstorfer

      Hallo Thomas,

      Danke für den Link, auf dem Iphone 12 pro max und dem Iphone 11 pro max tritt der Effekt nicht auf (Chrome und Safari), da ist alles sauber.
      Ein XR habe ich nicht.
      Ich würde mich mit der Ladereihenfolge beschäftigen (Erweitert, Arbeitsstelle, Z Index) und sicherstellen, dass das Parallax Bild zuerst (oder zuletzt) geladen wird.
      Dabei nicht vergessen, alle Caches und Mimyfi Plugins zu deaktivieren.

      Antworten

Einen Kommentar abschicken

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