SVG-Animationen mit Hilfe von CSS Keyframe-Animationen oder Transitions haben in der letzten Jahren stark an Beliebtheit gewonnen. Das Ein- und Ausblenden von Objekten, Drehungen, Verschiebungen und sonstige Transformationen stellen kein Problem dar. Doch für Morphing musste man auf Technologien wie SMIL oder JavaScript zurück greifen. Nun ist Morphing auch mit CSS möglich.
Grundsätzliche Funktionsweise
In einer SVG-Grafik werden die einzelnen Punkte eines Pfads im d-Attribut angegeben. Mit der d-Eigenschaft von CSS ist es möglich diese Pfadpunkte zu überschreiben. Sofern die Anzahl der Punkte gleich bleibt, kann beispielsweise mit Hilfe einer Transition ein interessanter Mouse-Over-Effekt erzeugt werden. Mit Hilfe von CSS Keyframe-Animationen sind selbstablaufende Animationen möglich.
Die path()-Funktion von CSS ist aktuell experimentell und funktioniert zum Veröffentlichungszeitpunkt dieses Beitrags nur in Chrome. Die Funktion ist Teil der Motion Path-Spezifikation von CSS.
Jetzt bist Du gefragt
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Mit Hilfe der SVG-Technologie können interessante Interaktionen und Animationen auf einer Website realisiert werden. Leider ist der Browser-Support höchst unübersichtlich, denn ob etwas funktioniert oder nicht ist davon abhängig wie die SVG eingebunden wurde und welche Sprache (JavaScript, SMIL, CSS) zur Erzeugung der Animation verwendet wurde. Wir haben daher für die interne Nutzung eine Übersicht erstellt, die wir euch natürlich nicht vorenthalten wollen.
Kompatibilität von Animationen und Interaktionen in SVG
Die folgende Tabelle listet die für uns wichtigsten Kriterien im Zusammenhang mit SVG-Animationen und -Interaktionen auf. Wir freuen uns über Ergänzungen und Anmerkungen.
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
Fixierte Navigationsleisten, die sich horizontal über die volle Breite der Website erstrecken sind keine Seltenheit. Um den Blick des Anwenders auf den Inhalt zu lenken und gleichzeitig den wertvollen Platz auf dem Display bestmöglich ausnutzen zu können, wird die Navigation auch häufig beim runterscrollen versteckt und beim hochscrollen wieder angezeigt. Insbesondere sog. Onepager und Landingpages nutzen vermehrt den Effekt. In diesem Beitrag archivieren wir eine CSS/jQuery-Lösung um das Verhalten herzustellen.
HTML-Grundaufbau
Die HTML-Struktur besteht in unserem Beispiel lediglich aus einem leeren <nav>-Element.
<nav></nav>
Scroll-Richtung mit jQuery abfragen
Zunächst prüfen wir mit Hilfe von jQuery in welche Richtung der Anwender scrolled. Wenn er nach unten scrolled, wird dem <body> die Klasse down hinzugefügt. Wenn es nach oben geht wird die Klasse entfernt.
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!$('body').hasClass('down')) {
$('body').addClass('down');
}
} else {
$('body').removeClass('down');
}
lastScrollTop = st;
if ($(this).scrollTop() <= 0) {
$('body').removeClass('down');
};
});
Verstecken der Navigation mit CSS
Der CSS-Code ist ebenfalls recht übersichtlich. Die Navigation wird eingefärbt, oben im Browserfenster fixiert und über die volle Breite ausgedehnt. Zusätzlich erhält sie eine feste Höhe und eine Transition, damit sie später animiert aus dem Viewport fährt, sobald per JavaScript die Klasse hinzugefügt wird.
Sobald die Klasse down vorhanden ist, wird mit der CSS-Eigenschaft transform die Navigation um Ihre Höhe nach oben aus dem Viewport geschoben.
nav {
height:100px;
background:lime;
position: fixed;
top:0;
right:0;
left:0;
transition: transform .25s .1s ease-in-out;
}
.down nav {
transform: translate3d(0, -100px, 0); // um 100px nach oben verschieben
}
Gefällt Dir dieser Beitrag oder bist du anderer Meinung? Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.
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.
Smooth Scrolling mit Hilfe von jQuery
Mit Hilfe des folgenden jQuery-Snippets scrollt der Anwender nach dem Klick auf einen Anker-Link animiert zum Ziel. Dieses Verhalten wird auch als »Smooth Scrolling« bezeichnet.
Die Animation ist nicht nur optisch ansprechender, sie steigert auch die Benutzerfreundlichkeit. Der Anwender versteht intuitiv, dass keine neue Seite geladen wurde, sonder dass er auf der gleichen Seite an eine andere Stelle springt, und dass diese sich entweder oberhalb oder unterhalb seines Ausgangspunktes befindet.
$('a[href*="#"]').on('click',function(e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
Eine Bewegung in einer ansonsten statischen Umgebung zieht den Blick auf sich. Der <title>-Tag einer Website, der im Browser-Tab angezeigt wird, ist in der Regel statisch und somit eher unauffällig. Wir archivieren in diesem Beitrag ein jQuery-Snippet, mit dessen Hilfe ihr den Inhalt des im Hintergrund geöffneten Browser-Tabs austauscht und auf Wunsch animiert.
Text im Browsertab mit jQuery austauschen
Mit dem nachfolgenden Snippet könnt ihr, wie angekündigt, den Text des <title>-Tags, austauschen, sobald der Browser-Tab bzw. das Browserfenster nicht mehr im Vordergrund geöffnet ist.
focusTitle = $('head title').text(); // Originalen Title speichern
$(window).on('blur focus', function(e) {
var prevType = $(this).data('prevType');
if (prevType != e.type) {
switch (e.type) {
case 'blur':
var i=0;
tab = setInterval(function() {
switch(i++%2) {
case 0: document.title = 'Wir sind'; // Erste Anzeige im Tab
break;
case 1: document.title = 'kulturbanause'; // Zweite Anzeige im Tab
}
}, 1000); // Zeit zwischen dem Wechsel der Anzeigen
break;
case 'focus':
clearInterval(tab);
document.title = focusTitle; // Originalen Title einsetzen
break;
}
}
$(this).data('prevType', e.type);
});
Voraussetzung für die Funktionsweise des Codes ist, dass ihr eine Version von jQuery vor dem Snippet in eurer Website eingebunden habt. jQuery kann beispielsweise über den Hochverfügbarkeitsserver von Google eingebunden werden. Eine Anleitung dazu findet ihr auf Google Hostet Libraries.
Das Snippet enthält einen »Switch« mit zwei Zuständen. Die Anzahl der Zustände kann auf eine beliebige Anzahl erweitert werden. Mit setInterval() gehen wir die angelegten Zustände im Sekundentakt nacheinander durch und tauschen über document.title = ''; den Text im <title>-Tag. Damit erscheint der Text im Browser-Tab animiert.
Die Funktion wird ausgeführt, sobald sich der Fokus-Zustand des Browserfensters ändert. Beim Wechsel zurück vom Hintergrund in den Vordergrund des Tabs bzw. Fensters wird wieder der ursprüngliche Text in den <title>-Tag eingesetzt. Dieser wurde nämlich beim ersten Seitenaufruf zwischengespeichert.
Als »Smooth Scrolling« wird eine animierte Scrollbewegung zu einem bestimmten Punkt einer Website bezeichnet. Diese wird häufig automatisch oder z. B. via Klick ausgelöst. Eingesetzt wird »Smooth Scrolling«, um nachvollziehen zu können wohin gescrollt wurde. Das hilft die Orientierung auf der Website zu behalten.
Von Faden (engl. verblassen) spricht man im Web Design, wenn Elemente von einem Zustand in den anderen übergehen – »überblenden«. Der Übergang von dem einen in den anderen Zustand ist beim Faden nicht schlagartig sondern an eine Zeitkomponente gekoppelt. »Fade-In« oder »Fade-Out« beschriebt dabei im speziellen den Übergang vom unsichtbaren in den sichtbaren Zustand, bzw. umgekehrt.
Die Berücksichtigung von Einstellungen, die Menschen auf ihren Geräten vornehmen, ist für moderne Websites von zentraler Bedeutung. Die Browser stellen immer mehr Funktionen zur Verfügung, die es uns ermöglichen, auf diese Präferenzen einzugehen. Analog zur Abfrage des bevorzugten Farbschemas mit prefers-color-scheme, ist es mit prefers-reduced-motion möglich abzufragen, ob die betrachtende Person eine Seite mit allen Animationen und Bewegungen sehen oder ausdrücklich darauf verzichten möchte.
Im Web werden Animationen häufig verwendet, um eine visuelle Rückmeldung zu geben, z. Bsp. um zu informieren, dass Daten verarbeitet werden oder eine Aktion ausgeführt wurde. Ebenso können bewegte Elemente auf Webseiten eingesetzt werden, um Wahrnehmungen zu beeinflussen. So kann etwa eine Ladeanimation, welche abläuft, während die eigentlichen Inhalte im Hintergrund geladen werden, die gefühlte Ladezeit verkürzen.
Außerdem gibt es noch dekorative Effekte wie animierte Farbverläufe, Parallax-Scrolling, Zoom-Effekte, Hintergrundvideos etc. Im Idealfall verbessern Animationen die User Experience, da sie eine sonst statische Seite in eine interaktive Erfahrung wandeln.
Probleme mit bewegten Website-Elementen
Viele Websites überschwemmen ihr Publikum jedoch mit automatisch ablaufenden, batteriezehrenden und ressourcenhungrigen Animationen. Während viele Menschen Gefallen an solchen Animationen haben, fühlen sich andere durch sie abgelenkt, ausgebremst oder eingeschränkt. Im schlimmsten Fall sorgen animierte Inhalte sogar für gesundheitliche Probleme: sie führen nicht selten zu Konzentrationsproblemen oder Übelkeit. Es besteht also eine Notwendigkeit, dass Menschen die Kontrolle über Animationen im Web haben.
Viele Betriebssysteme verfügen in den Einstellungen zur Barrierefreiheit über eine Option, mit denen eine Präferenz für reduzierte Bewegungen festlegt werden kann. Mit der Media-Query prefers-reduced-motion können wir diese abfragen und die Menge sowie Art der Animationen entsprechend anpassen.
prefers-reduced-motion in CSS
Für die Media Query prefers-reduced-motion gibt es die beiden Werte no-preference und reduce. Wird kein Wert angegeben, wird die Anfrage als true ausgewertet; das reduce muss also nicht unbedingt verwendet werden. Um die Lesbarkeit des Codes zu erhöhen, ist es jedoch sinnvoll, den Wert explizit anzugeben.
// Angewendete Styles, wenn Reduced Motion aktiviert ist
@media screen and (prefers-reduced-motion: reduce) { }
// Angewendete Styles, wenn keine Präferenz angegeben wurde
@media screen and (prefers-reduced-motion: no-preference) { }
Zur Veranschaulichung gehen wir davon aus, dass wir die Aufmerksamkeit betrachtender Personen mit einer auffällige Animation auf einen wichtigen Anmeldebutton lenken wollen. Für Menschen, die sich bewusst gegen Animationen entschieden haben, können wir, unter Nutzung der Media Query prefers-reduced-motion, einfach den selben Button animationsfrei ausliefern.
button {
// »vibrate«-Keyframes sind an anderer Stelle definiert
animation: vibrate 0.3s linear infinite both;
}
@media (prefers-reduced-motion: reduce) {
button {
animation: none;
}
}
Wenn es umfangreiches CSS für Animationen gibt, kann es sinnvoll sein, dieses in ein separates Stylesheet auszulagern, welches dann nur bedingt über das Media-Attribut am Link-Element geladen wird. Auf diese Weise können wir für Menschen, die eine Website mit Reduced Motion betrachten möchten, die Datenmenge und Ladezeit reduzieren.
Wie alle Media-Queries kann prefers-reduced-motion nicht nur im CSS-Kontext, sondern auch in JavaScript abgefragt werden. Damit ist es möglich, Aktionen den Benutzereinstellungen entsprechend dynamisch auszuführen, zu stoppen und zu starten.
// Reduced Motion-Einstellung abfragen
var mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)');
// Prüfen, ob Media Query stimmt oder nicht unterstützt wird
if (!mediaQuery || mediaQuery.matches) {
doSomethingWithoutAnimation();
} else {
doSomethingWithAnimation();
}
// Event Listener, um auf Änderungen der Media Query zu reagieren
mediaQuery.addEventListener('change', function () {
if (mediaQuery.matches) {
doSomethingWithoutAnimation();
} else {
doSomethingWithAnimation();
}
});
Browser Support
Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.
Mit Hilfe von Lottie-Animationen lassen sich frei skalierbare und interaktive Animationen in Websites integrieren. Da Lottie-Dateien keine pixelbasierten Animationen sind, sondern auf SVG und JSON basieren, können sie sich positiv auf die Performance der Website auswirken.
Lottie ist ein, von Airbnb entwickeltes, vektorbasiertes Grafikformat basierend auf SVG und JSON. Alle Informationen zu Vektoren, Aussehen und Funktion werden in einer einzigen JSON-Datei, dem sogenannten »LottieFile« gespeichert. Mit Hilfe von JavaScript kann das LottieFile anschließend interpretiert und die Animation gesteuert werden.
Der große Vorteil von Lottie-Animationen ist, dass sie systemübergreifend funktionieren und pixelbasierte Animationen, wie beispielsweise GIFs oder Videos, welche deutlich mehr Ressourcen verbrauchen, ablösen können.
Lottie kann unkompliziert mit Hilfe von JavaScript in eine Website integriert werden. Auch Design Tools wie XD oder Figma sind in der Lage Lottie Files darzustellen.
Woher bekomme ich Lottie-Animationen?
Eigene Lottie-Animationen erstellen
Um eigene Lottie-Animationen zu erstellen könnt ihr zum Beispiel Adobe After Effects verwenden. Dazu benötigt ihr das Plugin »bodymovin«, welches ihr hier findet. Zusätzlich gibt es auf dieser Seite auch eine Einführung und weitere Informationen zur Erstellung eigener Lottie-Animationen mit Adobe After Effects.
LottieFile aus Bibiothek verwenden
Es gibt eine Vielzahl an fertigen, teilweise kostenfreien LottieFiles auf der gleichnamigen Website lottiefiles.com:
Exemplarischer Screenshot einer LottieFiles-Bibliothek
Wie baue ich Lottie-Animationen in meine Website ein?
JavaScript-Bibliothek lottie.min.js einbinden
Grundvoraussetzung für den Einsatz von Lottie-Animationen ist die Einbindung der lottie.min.js. In diesem Script enthalten ist der sogenannte Lottie-Player, der für das Ausspielen von Lottie-Animationen benötigt wird.
Die lottie.min.js könnt ihr hier herunterladen oder direkt über ein CDN in eure Website integrieren.
Für die Positionierung der Lottie-Animation im HTML-Code muss ein Container angegeben werden, in dem später die Animation positioniert wird. Im Beispiel haben wir dem Container dafür die ID lottie-container gegeben. Mit einem Button starten wir später die Animation.
Lottie-Animation über JavaScript einbetten und steuern
Anschließend wird über JavaScript eine Variable item mit der Funktion bodymovin.loadAnimation erstellt, an die nun die Eigenschaften übergeben werden, die für die Animation relevant sind.
wrapper = gibt den Container an, in den die Animation gerendert werden soll
animType = gibt an, was animiert wird
loop = gibt an, ob die Animation in einer Schleife abgespielt werden soll
autoplay = gibt an, ob die Animation automatisch starten soll
path = gibt den Pfad zum LottieFile an
Im Beispiel wird über einen EventListener gesteuert, dass die Animation über den Klick auf den Button gestartet wird.
