Parallaxe angetrieben von CSS -benutzerdefinierten Eigenschaften

In diesem Artikel wird beschrieben, wie Sie einen faszinierenden Parallaxeffekt unter Verwendung von CSS -benutzerdefinierten Eigenschaften erstellen und ein statisches Bild in eine dynamische, interaktive Szene umwandeln. Die neue Website von Kent C. Dodds bot die Inspiration mit einem zentralen Bild, das Bewegung forderte. Die Lösung nutzt nur zwei CSS-benutzerdefinierte Eigenschaften, --ratio-x und --ratio-y , um den Parallaxeffekt zu steuern.

Der Core JavaScript -Code erfasst die Cursorposition und ordnet ihn in einen verwendbaren Bereich ab. Die Funktionen von GSAP mapRange() und clamp() vereinfachen diesen Prozess und stellen sicher, dass die Werte innerhalb von -1 und 1 bleiben. Eine generateHandler -Funktion erstellt wiederverwendbare Ereignishörer, wobei die Cursorposition relativ zu bestimmten Elementen abgebildet wird. Diese zugeordneten Werte werden dann als CSS -benutzerdefinierte Eigenschaften festgelegt.

Die Magie liegt in der CSS. calc() kombiniert die benutzerdefinierten Eigenschaften mit anderen Werten, um verschiedene Aspekte wie Skala und Farbton zu steuern. Das Beispiel zeigt, dass sich die Skala basierend auf --ratio-y und HUE basierend auf --ratio-x basierend anhand des HUSE verändern. Die Flexibilität ermöglicht eine kreative Kontrolle, ohne das Kern -JavaScript zu ändern.

Um die Szene zu erstellen, werden das Bild in einzelne Elemente zerlegt, eine Technik, die der CSS -Kunstverfolgung ähnelt. Diese Elemente, die als Kinder in einem Behälter dargestellt werden, werden unter Verwendung von Scoped Customeigenschaften gestaltet. Jedes Element definiert seine eigenen Bewegungs- und Rotationsparameter und interagiert mit den globalen Werten für --ratio-x und --ratio-y . Ein Bild Sprite optimiert die Leistung, indem mehrere Bildanforderungen vermieden werden.

Der Artikel führt durch mehrere Demos und veranschaulicht die Prozessschrittschritt. Es zeigt die Verwendung eines Konfigurationsobjekts zum Definieren von Elementpositionen, Größen und Transformationen. Responsive Design wird unter Verwendung von Prozentwerten für die Positionierung und Größe erreicht. Die Hinzufügung von --allow-motion richtet sich an Benutzer, die eine reduzierte Bewegung bevorzugen und für alle eine glattere Erfahrung bieten.

Schließlich zeigt der Artikel, wie diese Technik in einer React -Komponentenstruktur implementiert wird, wobei ein benutzerdefinierter Hook ( useParallax ) zur effizienten Wiederverwendung und Wartbarkeit von Code verwendet wird. Die React -Implementierung verkauft die Parallax -Logik und macht sie leicht in größere Projekte integriert. Das Ergebnis ist ein polierter, leistungsfähiger Parallaxeffekt, der ausschließlich von CSS und einer kleinen Menge JavaScript angetrieben wird. Der Artikel schließt mit der Betonung der Vielseitigkeit von Bildsprites und der Kraft der benutzerdefinierten CSS -Eigenschaften bei der Erstellung ansprechender Weberlebnisse.

Das obige ist der detaillierte Inhalt vonParallaxe angetrieben von CSS -benutzerdefinierten Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!