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…

SVG Animation oder wie die Bilder laufen lernten

SVG-Animationen werden immer beliebter. Kürzlich las ich im Smashing Magazine einen Beitrag von Heydon Pickering – Creating Cel Animations with SVG, der mich zu dieser kleinen SVG Animation inspiriert hat. See the Pen awjjVo by Susanne (@sue007) on CodePen. Worum geht es: Animation von Zeichnungen, ähnlich einer GIF-Animation, aber hier mit einer Vektordatei im SVG-Format.…

CSS-Animation – die Schaukel

Meine Schaukel – vor Jahren mal in Flash animiert – wollte ich unbedingt als SVG-Datei zum Leben erwecken. Eigentlich gar nicht so kompliziert mit animate.css. Schwieriger war es, das Ganze in einem WordPress-Post hinzubekommen (Jetzt als CodePen). See the Pen rwrrrX by Susanne (@sue007) on CodePen. AI-Vektorgrafik in SVG-Datei konvertieren Die Illustrator-Datei kann in Illustrator…