[SOLVED] Parallax Effekt

Aktuell implementiere ich eine neue Site mit Joomla 6, basierend auf dem Template "Verein". Die Site soll u.a. den Parallax-Effekt des Templates nutzen. Es zeigt sich folgendes Fehlerbild:

- Darstellung auf PC und Laptop mit allen getesteten Monitorgrößen Ok
- Ausblenden auf kleinen und sehr kleinen Geräten Ok
- Darstellung auf Tablet:

• Ein Ausschnitt des Hintergrundbildes wird in übergroßem Format angezeigt
• Der Bildausschnitt scrollt mit dem Rest der Seite mit
• klickt man das Off-Canvas-Menü (Burger) an, wird das Hintergrundbild in "normaler Größe" im linken Modalbereich angezeigt
• getestet mit iPad 13 Zoll M2 sowie iPad Air 2, mit Safari und Mozilla Firefox

Dieses Verhalten zeigt auch die Quickstart-Version des Templates "Verein"   Link: quick.blau-silber.de

Haben Sie dazu Hinweise?

Kind Regards

Dieser Effekt entsteht dadurch, dass das Bild über die volle Seite angezeigt wird ( cover) und fixiert ist, demnach nicht scrollt. Mobile ready ist das natürlich schon, aber hier wird eben das Bild beschnitten.
Die Höhe des Bildes richtig sich nach der Höhe des äussereren Container und dem Modul was im Container ist. Tricksen kann man durch den inneren Abstand des Containers ( padding).

Kleine Hilfe
www.joomlaplates.de/joomla-tips-und-tricks/hintergrundbild.html

Hinweis:
Auf Smartphones und Tablets (iOS/Android) wird der Effekt oft deaktiviert oder als Standardbild angezeigt, um Ruckeln und Akkuverbrauch zu verhindern.

Ihre Antwort verstehe ich nicht:

- Der Parallax-Effekt ist wie in dem unten erwähnten Tutorial konfiguriert bzw. identisch zur Quick-Installation des Templates "Verein".
- Auf einem PC, z.B. mit Monitorgröße 1920 x 1200 px oder auch Monitorgröße 5120 x 2880 px, wird der Effekt bzw. das Hintergrundbild korrekt dargestellt (fixiert und korrekte Auflösung). Selbst bei minimalem Browser-Fenster.

- Ein Tablet, Monitorgröße 2048 x 1536 px, zeigt das unten beschriebene Verhalten (Hintergrundbild scrollt mit und das mit viel zu hoher Auflösung)
- Das würde gemäß Ihrer Analyse bedeuten, dass sich die Ränder des äußeren Containers im Fall des Tablets "weit außerhalb des Gerätes" befinden ???
- Selbst wenn dem so wäre, warum ist das Bild auf dem Tablet nicht fixed, wie konfiguriert?

Wo ist mein Denkfehler?

Bild 1: Darstellung PC     Bild 2: Darstellung Tablet         Bild 3: Hintergrundbild mit markiertem Ausschnitt Tablet, Originalgröße 1920 x 1280 px

Kind Regards

Ich hatte es Ihnen eigentlich erklärt oder verstehe Ihr Problem nicht.
Einfach ausgedrückt: es liegt an den jeweiligen mobilen Endgeräten.
Die Bilder sind zentriert und passen sich nicht dynamisch in Breite und Höhe an.
Das lässt sich bei den HG Bildern in den Sections nicht ändern.


 

Tut mir leid, wenn ich mit dem Thema genervt habe.

Mein Problem: Das Hintergrundbild hat eine Breite von 1920 px und  Höhe von 1280 px. Legt man auf dem Tablet das Sichtfenster des Hintergrundbildes zugrunde, skaliert das Tablet  das Bild grob um den Faktor 8 nach oben. Ergibt theoretisch in etwa 15.000 x 10.000 px. Das Tablet selbst hat aber nur eine Auflösung von 2732 x 2048 px. Diese Diskrepanz bzw. den Skalierungsfaktor des Tablets verstehe ich nicht. 

Ich schalte den Effekt für Tablets einfach aus.

Kind Regards

Kein Problem – die Frage ist durchaus nachvollziehbar und Sie nerven keineswegs

Das von Ihnen beschriebene Verhalten bei Tablets ist bei Parallax-/Fixed-Backgrounds tatsächlich ein Sonderfall. Die physikalische Displayauflösung des Gerätes lässt dabei keinen direkten Rückschluss auf die Größe zu, mit der der Browser das Hintergrundbild für den Parallax-Bereich intern rendert. Deshalb lässt sich der von Ihnen beobachtete Skalierungsfaktor auch nicht einfach aus 1920 × 1280 px bzw. 2732 × 2048 px herleiten.

Entscheidend ist aus meiner Sicht: Das Verhalten lässt sich mit der unveränderten Quickstart-Version ebenfalls nachvollziehen. Damit ist zumindest ausgeschlossen, dass es durch eine individuelle Joomla- oder Template-Konfiguration Ihrer Seite verursacht wird.

Bei solchen Geräten würde ich den Parallax-Effekt deshalb für den Tablet-Breakpoint deaktivieren und das Hintergrundbild dort als normales responsives Hintergrundbild darstellen. Auf Desktop-Geräten kann der Parallax-Effekt unverändert bestehen bleiben.

Das ist bei Hintergrundbildern mit cover und Parallax auf Touchgeräten in der Praxis ohnehin die robustere Variante, da die Darstellung je nach Gerät und Browser unterschiedlich ausfallen kann.