Webdesign: Fullscreen-Slider mit SVG-Animation

Ein fullscreen Slider mit SVG-Elementen für die Animation der Übergänge

Mal ein etwas anderer Slider. Bei den Webdesign-Kollegen von codyhouse fand ich diesen attraktiven Slider. Dort gibt es auch einen Download für das gesamte Dateienpaket. Für die animierten Übergänge werden hier Pfade aus einer SVG-Grafik und die Javascript library snap.svg genutzt.

Slider-Demo ansehen »

Das HTML unterteilt sich in 3 Hauptelemente:

  • eine unordered list (ul.cd-slider), die die einzelnen Bilder/Slides enthält
  • eine ordered list (ol.cd-slider-navigation) für die Slider-Navigation
  • und ein Element div.cd-svg-cover, das für die animierte Fläche benötigt wird, die auftaucht, wenn man von einem Bild zum nächsten navigiert

CSS

By default haben alle Bilder opacity: 0, sind absolut positioniert und liegen übereinander, ausgerichtet mit top: 0 und left: 0.

Das ausgewählte Bild erhält dann jeweils die Klasse .visible.

Handling Events

Um die SVG-Grafik zu animieren wird das ‚d‘-Attribut des Pfad-Elements innerhalb des .cd-svg-cover animiert.

Zuerst müssen die einzelnen Schritte der Animation definiert werden. In diesem Beispiel 5 Schritte für die Animation von einem Bild zum nächsten und weitere 5 Schritte von einem Bild zurück zum vorherigen. Somit haben wir 10 verschiedene SVG-Pfad-Elemente (alle mit der gleichen Anzahl an Ankerpunkten, damit die Animation funktioniert). Siehe Screenshot aus der Illustrator-Datei. Beachte, einige Schritte erscheinen leer, enthalten aber ebenfalls einen Pfad.

Sind einmal die Pfade definiert, fügen wir der Klasse .cd-svg-cover ein data-stepn Attribut an (eines pro Schritt) entsprechend des ‚d‘-Attributs des festgelegten Pfads (um es mit JavaScript aufrufen zu können).

Dann nutzen wir die animate () method, die uns snap.svg liefert, um von einem zum nächsten Schritt zu animieren.

Die easing-function ist eine custom cubic-bezier function. Diese ist eigentlich nicht in snap.svg enthalten. Aber man kann eine custom timing function aus der cubic-bezier function bilden (siehe hierzu den StackOerflow-Beitrag)

Illustrator Trick: Damit diese Technik funktioniert, braucht man <path> Elemente. In Illustrator erhält man ein <polygon> Element, wenn man gerade Linien zeichnet. Um es in einen Pfad zu verwandeln, kann man einem Ankerpunkt einen ‚border-radius‘ zufügen.

Übersetzt und nachgebaut nach einem codyhouse Post

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.