Parallax Scrolling

fuerteventura-2007 schrieb am 13.06.2019 um 10:16 Uhr

Hallo Forum,

vor einiger Zeit und nur dank der tatkräftigen Unterstützung durch dieses Forum (siehe Post) habe einen Parallax-Scrolling-Effekt in einer Homepage umsetzen können. Etwa in der Mitte der Seite fließt eine dicke weiße Schrift über das Bild "HörZu-Mecki" und dann über das Bild mit der Fee.

<style>
.parallax_auto  {
  background-attachment: fixed !important;
  background-position: top center !important;
  background-size: auto !important;
}
</style>

<div id="xr_xrc1" class="xr_ap xr_xri_ xr_xrc" style="width: 1400px; height: 9874px; overflow:hidden;">
 <span class="xr_ar parallax_auto" style="left:0px;top:4807px;width:1400px;height:544px; background:url('index_htm_files/3306.jpg') 0px 0px no-repeat;"></span>
 <img class="xr_rn_ xr_ap" src="index_htm_files/2704.png" alt="" title="" style="left:0px;top:5859px;width:1400px;height:1px;"/>
 <span class="xr_ar parallax_auto" style="left:0px;top:3753px;width:1400px;height:544px; background:url('index_htm_files/6199.jpg') 0px 0px no-repeat;"></span>
 <img class="xr_ap" src="index_htm_files/6200.jpg" alt="Ferrero Schokobon" title="" style="left:0px;top:1615px;width:1400px;height:745px;"/>

Wobei den beiden Bildern der Name "parallax_auto" zugewiesen ist.

Das funktioniert auf allen Geräten und Browsern, die ich in die Finger kriegen konnte - nur nicht auf der Kombination iPhone/Safari 😧. Hier werden die Bilder schlicht nicht angezeigt und weiße Schrift läuft über weißen Hintergrund....

Ergänzung 13.06.2019, 19:12 Uhr:
Auch unter Android mit Chrome wird das Parallax Scrolling nicht korrekt ausgeführt, aber immerhin sind Bild und Schrift zu sehen, wenn auch nicht animiert. Es wird ja immer bunter....

Und nun stehe ich dumm da. Hat jemand auch nur die leiseste Idee, was ich tun kann?

Ich nutze WD 15 Premium unter Win 7.

Vielen Dank im Voraus und viele Grüße
Michael

Kommentare

BeRo schrieb am 15.06.2019 um 22:35 Uhr

[...] Das funktioniert auf allen Geräten und Browsern, die ich in die Finger kriegen konnte - nur nicht auf der Kombination iPhone/Safari [...]

Der parallax Effekt kann nur funktionieren, wenn die betroffenen Browser (und ggf. Betriebssysteme) mit dem Programmcode "einverstanden" sind.
Wie Du gesehen hast, haben unterschiedliche Browser ganz eigene "Ansichten" was die Umsetzung von codierten Befehlen angeht. Bei der Vielzahl von unterschiedlichen Browsern, die aktuell im Einsatz sind, ist es nahezu unmöglich eine halbwegs einheitliche Darstellung von Sondereffekten selbst auf den aktuellen Geräten zu garantieren. Beziehst Du nun noch ältere Geräte und Browser mit ein, stehst Du auf verlorenem Posten.

Natürlich kannst Du versuchen die Codezeilen in Deinem Projekt zu optimieren und so viele Fallbacks einzubauen, dass auch der antiquierteste Browser noch eine lesbare Seite darstellen kann. Der zeitliche und materielle Aufwand den Du dafür treiben musst, steht aber i. d. R. in keinem vernünftigen Verhältnis zum Erfolg.
Mal ganz davon abgesehen, dass Du für die Umsetzung über außergewöhnlich gute Kenntnisse in HTML und in den gängigen Scriptsprachen verfügen musst, brauchst Du selbstverständlich auch von jedem gängigen Tablet/Smartphone- inkl. der zugehörigen Browser (und den Varianten) je ein Gerät zum Test...

Die Lösung Deines aktuellen Problems ist also leider nicht mit ein/zwei kleinen Änderungen am Programmcode zu machen. 😫