Hi zusammen,
ich hoffe, dass ihr mir helfen könnt. Ich bin mit meinem Latein am Ende und brauche eure Expertise, da ich kein CSS und Optimierungsguru bin [Blockierte Grafik: http://xhtmlforum.de/images/smilies/icon_smile.gif].
Es geht um meine Homepage http://www.ziin.de. Hier nutze ich einen Parallaxeneffekt für meinen Hintergrund, der mittels JavaScript und dem Ändern der background-position funktioniert. Das läuft unter geringen Auflösungen fließend (40fps +), aber unter Retinaauflösungen (PixelRatio = 2) ruckelt das Ganze mit 7-12fps vor sich hin (Firefox, Chrome und Safari).
Ich habe dann gelesen, dass man hardwarebeschleunigte CSS Eigenschaften verwenden soll wie translate3d. Jedoch habe ich keine Ahnung, wie ich das bewerkstelligen soll, wenn es sich um ein Hintergrundbild handelt. Ich habe zwei Seiten gefunden, welche Beispiele zeigen, aber ohne Hintergrund:
http://davegamache.com/parallax/
sowie
https://pixelcog.github.io/parallax.js/
Unter
http://blogs.sitepointstatic.com/examples/tech/…form/index.html
habe ich eine Idee bekommen, wie ich einen Hintergrund in einem DIV Container mit translate3d bearbeiten kann. Aber wenn ich hier translate3d anwende, dann funktioniert das mit dem Background repeat nicht, da ich ja den DIV Container transformiere. Und wenn ich den verschiebe, dann wird der ja nicht wie "repeat" fortgeführt.
Wie kann ich meinen Hintergrund flüssig beim Scrollen bekommen?
Danke für Eure Hilfe!!!
Viele Grüße,
Sven
