kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Animationen


Animiertes Scrolling (Smooth Scrolling) mit jQuery

Die Verwendung von Sprungmarken (Ankern) kann deutlich zur Verbesserung der Benutzerfreundlichkeit von Webprojekten beitragen und findet daher häufige Anwendung. Anker werden unter anderem in Inhaltsverzeichnissen, für »Zurück nach oben«-Buttons oder zur Navigation auf One-Pagern verwendet. Leider springt der Anwender bei einem Klick auf die Sprungmarke schlagartig zum Ziel – was die Orientierung und die User Experience beeinträchtigen kann. In diesem Beitrag archivieren wir ein Snippet, mit dem ihr das Verhalten durch ein animiertes Scrollen (Smooth Scrolling) ersetzen könnt.

Beitrag zu Ende lesen

Gezeichnete SVG-Pfade mit CSS animieren

Mit SVG/CSS-Animationen lassen sich ansehnliche Effekte erzeugen. Sehr beliebt ist beispielsweise der sog. »Line-Draw-Effect«, bei dem ein Pfad animiert gezeichnet wird. Um den Effekt herzustellen, behilft man sich einem Trick im Zusammenhang mit gestrichelten Linien. In diesem Beitrag erklären wir das Grundprinzip anhand eines leicht nachvollziehbaren Beispiels.

Beitrag zu Ende lesen

CSS Keyframe-Animationen

CSS-Animationen werden mittlerweile von allen modernen Browsern unterstützt und ersetzen daher in vielen Bereichen Effekte, die einst nur über JavaScript realisiert werden konnten. Neben den sog. CSS-Transitions sind vor allem die CSS-Keyframe-Animationen interessant. Mit Keyframe-Animationen können komplexe Animationsabläufe über sog. Schlüsselbilder (keyframes) erzeugt werden. Im Gegensatz zu Transitions, die eine Interaktion des Users voraussetzen, können Keyframe-Animationen auch selbstständig ablaufen.

Beitrag zu Ende lesen

Interaktionen und Mouse-Over-Effekte mit CSS-Transitions

Mit der CSS-Eigenschaft transition könnt ihr anschauliche Interaktionen und Mouse-Over-Effekte erzeugen, ohne dabei Javascript oder Flash verwenden zu müssen. Präziser ausgedrückt kann der Ausgangswert einer CSS-Eigenschaft fließend in einen neuen Wert übergehen (»Transition« zu Deutsch »Übergang«). In diesem Beitrag lernt ihr die in diesem Zusammenhang relevanten CSS-Eigenschaften kennen.

Beitrag zu Ende lesen

CSS Flip Animation – Objekte umdrehen

Bei sog. CSS-Flips (CSS3-3D-Animationen) wird ein Objekt umgedreht, so dass die Rückseite sichtbar ist. Um den Effekt zu erreichen, setzen wir CSS3-3D-Transformationen und CSS3-Transitions ein. Spannend an diesem Beispiel sind auch die perspektivischen Möglichkeiten von CSS.

Beitrag zu Ende lesen

Frame-Animation mit Photoshop – Einen Ladebalken animieren

Mit Photoshop lassen sich verschiedene Arten von Animationen herstellen. Eine davon ist die sog. Frame-Animation, in der verschiedene Einzelbilder nacheinander abgespielt werden. In diesem Video-Tutorial zeige ich euch am Beispiel eines Ladebalkens, wie ihr das Grundobjekt gestaltet und anschließend mit Hilfe der Photoshop-Zeitleiste animiert. Das Ergebnis speichern wir als GIF-Animation ab.

Beitrag zu Ende lesen