Automatischer Scroll-Parallaxeneffekt ohne JavaScript_Experience-Austausch

Dieser Effekt wurde nach dem Parallaxen-Tutorial von Chris Coyier modelliert und der Sternenhimmelhintergrund wurde mit Chris‘ Erlaubnis verwendet.

Laufeffekt:
Hier ansehen: http://www.fofronline.com/experiments/parallax/#experiment
Dies Der Effekt kann in Safari 4 Beta und Google Chrome normal in der Vorschau angezeigt werden und es ist kein JavaScript erforderlich, um diesen Effekt zu erzielen.
(Aber es kann nicht in IE7 und niedriger angezeigt werden)

Implementierungsmethode:
Der HTML-Code dieser Seite ist sehr einfach. Ein Div wird verwendet, um den Hintergrund zu definieren, und ein anderes Div wird verwendet, um den zu definieren Inhalt: Hier wird die Mehrfachhintergrundtechnologie verwendet, daher sind zusätzliche Tags erforderlich, um andere Hintergrundbilder darzustellen.

Setzen Sie den CSS-Hintergrundcontainer auf eine feste Position und lassen Sie ihn über die Attribute „oben“, „links“, „unten“ und „rechts“ den unteren Rand der Seite einnehmen. Das Hintergrundbild wird über das Hintergrundattribut angegeben, und der Hintergrund der obersten Ebene wird zuerst angegeben. Jedes Bild ist prozentual positioniert und ihre Positionen sind unterschiedlich, sodass sich jedes Bild bewegt, wenn sich die Größe des Containers ändert, wodurch ein Parallaxeneffekt erzeugt wird

Animationseffekte lassen sich nach gängiger Denkweise nur erzeugen, wenn die Seite gezoomt oder per JavaScript gesteuert wird. Hier kommt eine andere Methode zum Einsatz. Durch Verschieben des linken Randes des Hintergrundbildcontainers (z. B. von 0px auf 100px). Dadurch ändert sich die Gesamtbreite des Containers, wodurch sich das Hintergrundbild je nach Prozentsatz unterschiedlich bewegt. Wenn Sie die Dauer und die linke Position groß genug einstellen, wird ein kontinuierlicher Parallaxenbewegungseffekt erzeugt.

Sie können die Bewegungsgeschwindigkeit erhöhen, um interessantere Effekte zu erzielen, und Sie können auch einige Mausaktionen hinzufügen. Der endgültige CSS-Code lautet wie folgt:

Kleine Information: Der Parallaxeneffekt ist ursprünglich ein astronomischer Begriff. Wenn wir den Sternenhimmel beobachten, bewegen sich Sterne, die weiter von uns entfernt sind, langsamer, während Sterne, die näher an uns sind, schneller. Wenn wir im Auto sitzen und aus dem Fenster schauen, haben wir auch dieses Gefühl. Die Berge in der Ferne scheinen sich nicht zu bewegen, aber die Reisfelder in der Nähe ziehen schnell vorbei. Parallaxeneffekte werden in vielen Spielen verwendet, um einer Szene ein dreidimensionales Gefühl zu verleihen. (Übersetzung/Cao Sijia)