Die Schaukel-Animation hier mit einer inline SVG Grafik und mit Hilfe von GSAP animiert.
Kategorie: Webdesign
webdesign – schöne websites
CSS-Animation
Eine kleine CSS-Animation mit Keyframes – kein Javascript, nur HTML, CSS und SVG.
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 Schaukel by Susanne (@sue007) on CodePen. AI-Vektorgrafik in SVG-Datei konvertieren Die Illustrator-Datei kann in Illustrator…
SVG-Animations-Experiment mit SMIL
Jetzt bin ich auf den Geschmack gekommen – endlich! Schlanke Animationen von SVG-Grafiken mit SMIL. Ein sehr schöner Beitrag auf meiner Lieblings-Lern-Website CSS-Tricks hat mir geholfen.

Aus dem Kaffesatz gelesen – eine Web-Sinnsuche

Information Architecture (IA): Ordnung in das Chaos bringen

Webdesign – ist das noch mein Lieblingsjob?
