201225Mär

jQuery Scroll Path: Navigation entlang eines Pfades

Mit Skripten wie Scrollorama oder Waypoints lassen sich besondere Effekte erzielen, die durch das Scrollen einer Seite erzeugt werden. Ein weiterer Ansatz könnte darin bestehen, Elemente entlang eines definierten Pfades zu bewegen. Das jQuery-Plugin Scroll Path ermöglicht eine solche Pfad-Animation und kommt mit einer eigenen Scrollbar.

jQuery Scroll Path

Auf der Demo-Seite des Plugins ist gut zu sehen, wofür sich das Skript einsetzen lässt. Optional kann der gezeichnete Pfad eingeblendet werden: DOM-Elemente werden an diesem Pfad ausgerichtet und können direkt angewählt werden. Zudem können der Pfad und seine Elemente rotiert werden, sofern der Browser des Benutzers die CSS3-Attribute dafür unterstützt. Für das Zeichnen der Pfad-Elemente kommt Canvas zum Einsatz. Bei GitHub finden sich weitere Informationen und kurze Beispiele.