Das neue User Interface von Icinga DB

Während mit Icinga DB sehr viel unter der Haube passiert ist, kommt mit dem Release auch ein rundum neu geschriebenes Monitoring Modul für Icinga Web 2. In diesem Zuge erhielt auch das User Interface ein ausführliches Redesign. In diesem Blogpost werden die wichtigsten Änderungen erklärt.

Listen

Wie im bewährten Monitoring Modul gibt es im Monitoring Modul für Icinga DB viele Listenansichten. Daher wurden diese komplett überarbeitet. Allen Listenelementen liegt eine grundlegende einheitliche Anatomie zugrunde.

ListItem Anatomy.jpg

Anatomie eines Listenelements

Visual

Für jedes Listenelement wird ein so genanntes Visual verwendet. Dieses dient dazu, in langen Listen bestimmte Elemente hervorzuheben bzw. einen intuitiven Überblick geben, welchen Zustand das zugrunde liegende Objekt hat. Bei Host- bzw. Servicelisten wird dadurch beispielsweise der State dargestellt. So wird in der Übersicht unmittelbar ersichtlich, bei welchen Objekten Probleme vorliegen.

Title

Der Titel beschreibt ergänzend kurz zusammengefasst den Zustand des Listenelements. So enthält er beispielsweise die Info, dass ein Host gerade Down ist. Während das Visual einen intuitiven Eindruck gibt, erklärt der Titel, was genau passiert ist.

Meta

Der Metabereich ist für zusätzliche Informationen vorgesehen. In der Regel werden hier Zeitangaben des Listenelements angezeigt. In Host und Servicelisten steht hier, wie lange sich das Objekt bereits im entsprechenden Zustand befindet.

Caption

Der Caption-Bereich enthält detaillierte Informationen zum Listenelement. Dies kann im Falle von Hosts und Services der Plugin Output sein. Bei Kommentaren und Downtimes werden hier die Kommentartexte des Users angezeigt. Um die Listendarstellung kompakt und einheitlich zu halten, werden lange Texte auf eine oder mehrere Zeilen gekürzt.

Klickbare Elemente

Viele der Listenelemente enthalten neben dem Hauptelement zwei oder mehrere klickbare Elemente. Alle Teile des Listenelements, die auf weitere Detailinformationen verweisen sind eindeutig hervorgehoben. Dadurch ist sofort erkennbar, hinter welchen Textteilen sich Zusatzinformationen befinden.

Overdue Checks in Host- und Service Listen

In Host und Servicelisten werden Overdue Checks nun besonders auffällig hervorgehoben. Dadurch ist auf den ersten Blick sofort ersichtlich, welche Objekte möglicherweise nicht mehr aktuell sind.

Artboard Copy.jpg

Das neue Icinga DB Design: Hostliste und Detailbereich

Detailgrad der Listenansichten wählen

Der Detailgrad der Host- und Servicelisten ist nun wählbar. Die Standardansicht zeigt den Titel und einen zweizeiligen Plugin Output. In der detaillierten Ansicht wird der gesamt Plugin Output angezeigt. Will man einen größeren Überblick bekommen gibt es außerdem die Minimalansicht. Hier wird in einer Zeile der Plugin Output angeschnitten, wenn genügend Platz vorhanden ist. Dafür sieht man auf einem Bildschirm wesentlich mehr Listenelemente als in den anderen Darstellungen.

State Change Visual in History- und Notification Elementen

In History und Notification Listen sind unter anderem Statewechsel-Elemente zu finden. Hier wird im Visual der Wechsel nun auf den ersten Blick deutlich gemacht. Neben dem aktuellen State wird gleichzeitig auch der vorherige State ersichtlich.

State Changes sind in den Notificationlisten nun besser ersichtlich.

Detailansichten

Optimierte Headerbereiche

Die Headerbereiche der einzelnen Objekttypen erhalten ein neues Design. Während die herkömmlichen Headerbereiche sehr viel Platz brauchten, sind die Informationen kompakter.

Graphen

Die Detailansichten der Elemente waren bisher sehr textlastig. Nach dem Redesign sind die Detailbereiche deutlich visueller angelegt. Nun werden anstatt der bloßen Auflistung Informationen kombiniert und Zusammenhänge dargestellt.

Modaldialoge für schnelle Aktionen

Wollte man bisher aus dem Detailbereich einen Kommentar anlegen oder eine Downtime setzen wurde der Dialog in einer weiteren Spalte angezeigt, so dass die Inhalte der linken Spalte verloren gingen. Im neuen Monitoring Modul gibt es nun ein Modal-Element für kurze Interaktionsdialoge. Für Aktionen im Detailbereich erscheint nun ein Modaldialog. Dadurch bleibt die linke Listenspalte und somit der Kontext besser erhalten.

 

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.
Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Weniger ist mehr: Gestaltung unter dem Aspekt der Aufmerksamkeitsökonomie

Das Konzept der Aufmerksamkeitsökonomie versteht die menschliche Aufmerksamkeit als eine begrenzte Ressource. Je mehr Informationen auf den Wahrnehmenden »einprasseln«, desto mehr dieses knappen Gutes benötigt ein Mensch um diese zunächst zu sortieren und zu priorisieren, bevor sie verarbeitet werden können.

(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Wahrnehmungspsychologie im UI Design

Beim Gestalten von grafischen Benutzeroberflächen ist es oft hilfreich sich einiger Paradigmen aus der Wahrnehmungspsychologie zu bedienen bzw. diese im Hinterkopf zu haben.
Konkret gebe ich hier einen kurzen Überblick mit Beispielen über 5 Prinzipien aus der Gestalttheorie, die man sich beim UI Design zu nutze machen kann.
(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

MySQL-Datenbanken verwalten mit Sequel Pro

Eines meiner meist genutzten Apps am Mac ist Sequel Pro. Das kann man kennen, muss man aber nicht. Daher liest man – wenn man möchte – in den folgenden Zeilen eine kurze Vorstellung.
(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Was kann eigentlich CSS-Grid?

Die Entwicklung für CSS Layout ist nicht aufzuhalten. Nachdem das Flexible Box Layout (aka “Flexbox”) inzwischen salonfähig ist, steht bereits die nächste CSS-Spezifikation vor der Tür. Diese soll nicht nur einfache Layout-Eigenschaften einfacher und direkter möglich machen (Stichwort “vertikal zentrieren”), sondern auch bisher nicht mögliche Layouts direkt in CSS ermöglichen, ohne das Markup anpassen zu müssen.
(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Bilddateien verlustfrei kleiner machen

Wer oft größere Bilder im Web verwendet, kennt vielleicht das Problem. Gerade qualitativ hochwertige Bilder brauchen oft unverhältnismäßig viel Speicherplatz.
Das liegt nicht selten daran, dass unnötige Daten (für die Verwendung im Web) wie z.B. Metainformationen zur Kamera, Aufnahmeort, und so weiter eingebettet sind. Aber auch die Codierung des Bildes selbst ist oft nicht optimal. Leider ist es verhältnismäßig aufwendig, das Bild per Hand mit Photoshop selbst zu optimieren und vor allem: Man braucht dazu Photoshop.
Zum Glück ist auf die Open Source Community Verlass und es gibt ein freies Tool für den Mac, welches das zumindest halb automatisch erledigt. Darf ich vorstellen: ImageOptim.
(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Flexbox in der Praxis: ein paar einfach Beispiele

Inzwischen wird das Flexible Box Layout (kurz FlexBox) ja soweit von Browsern unterstützt, dass es in vielen Fällen auch ruhigen Gewissens für die Produktion verwendet werden kann.
Größtenteils vereint FlexBox viele Layout-Funktionen unter einem Featureset. In erster Linie macht es bestimmte Layout-Funktionen leichter und direkter zugänglich, ohne das Markup verändern zu müssen. Dadurch lassen sich nun relativ elegant und mit wenigen CSS-Angaben viele Layout-Probleme lösen, die man eigentlich schon lange für selbstverständlich hielt.
(more…)

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Kampf den nutzlosen Menu Bar Icons (macOS)

Tools auf dem Mac gibt es mittlerweile wie Sand am Meer. Große oder kleine praktische Apps, welche die Arbeit erleichtern oder Aufgaben automatisieren. Viele haben einige dieser Systemwerkzeuge wie z.B. Alfred installiert, weil es das Arbeiten angenehmer macht.
Leider nutzen viele dieser Werkzeuge die Möglichkeit, um sich in der Menüleiste von macOS zu verewigen. Bei einigen macht es durchaus Sinn – und natürlich hängt dies auch vom Geschmack des Nutzers ab. Allerdings bieten die meisten davon aus meiner Erfahrung keinen richtigen Mehrwert.
Bisher gibt es keine Out of the box Möglichkeit, diesen Exzess einzudämmen. Zwar kann man viele der System-Icons einfach ausblenden, aber viele 3rd-Party Icons sind sehr hartnäckig, wenn sie denn keine Option zum Deaktivieren des Icons implementiert haben.

Abhilft schafft … ein weiteres Tool

 

Vanilla Demo

Vorher – Nachher: Mit Vanilla lassen sich selten genutzte Menüleisten-Icons ein und ausblenden.


Vor kurzem habe ich ein kleines Helferlein namens Vanilla gefunden, welches den User unnötige oder nicht genutzte Icons ausblenden lässt (es gibt auch eine Pro-Version, mit der man die Icons komplett ausblenden kann). Das bringt wieder etwas Übersicht in die Menüleiste zurück.
 

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Mac sperren mit Automator Actions

In diesem Beitrag möchte ich einen kurzen Kniff am Mac zeigen, der es einfacher macht, den Rechner zu sperren. Es gibt dafür auch Tools wie Alfred, mit der etwas ähnliches problemlos zu konfigurieren ist. Wer die zusätzlichen Funktionen solcher Tools nicht benötigt oder einfach kein weiteres Tools installieren will, kann das auch mit Bordmitteln bewerkstelligen.
Grundlage des ganzen ist folgender bash-Befehl. Dieser logged den aktuell angemeldeten User aus dem System aus.

/System/Library/CoreServices/Menu\ Extras/User.menu/Contents/Resources/CGSession -suspend

Automator-App erstellen

So, was hat es nun mit dem Automator auf sich? Zunächst starten wir die App. Für diejenigen, denen die Anwendung noch nie aufgefallen ist: Sie befindet sich im Programme-Ordner.
Nun wählen wir Neues Dokument und wählen im nächsten Fenster Programm.
Bildschirmfoto 2016-07-28 um 11.15.53
Daraufhin werden einem die einzelnen Aktionen präsentiert, die Automator vom Betriebsystem bzw. anderen Applikationen zur Verfügung gestellt werden. In unserem Fall wählen wir aus der Liste die Aktion Shell-Skript ausführen und ziehen es in den rechten Bereich.
In das Textfeld Fügen wir nun einfach unser Shell Skript ein. Um zu testen, ob alles richtig läuft, können wir rechts oben auf den Button Ausführen klicken. Dadurch wird die Aktion ausgeführt.
Nun exportieren wir das Skript noch als App. Dazu wählen wir Ablage > Exportieren …, vergeben einen aussagekräftigen Namen und wählen einen Speicherort (in der Regel den Programme-Ordner).

Bildschirmfoto 2016-07-28 um 11.25.42

Einfach per ⌘ + Leertaste mit Spotlight nach dem Namen, unter dem die Aktion gespeichert wurde suchen


Nun kann das Programm einfach über den Finder aufgerufen werden. Schneller geht es natürlich mit der Spotlight-Suche.

Das Auge isst mit

Das Automator-Icon für die Anwendung ist zwar schön, leider nicht allzu aussagekräftig. Also wollen wir zuguterletzt der Sperren App auch noch ein Icon spendieren.
Mit einer kurzen Suche in der Suchmaschine der Wahl finden wir ein passendes Icons Symbol (macOS benötigt .icns Dateien, eine Bilddatei reicht leider nicht aus).
Wir suchen unser Programm im Finder und öffnen mit ⌘ + i das Infos Fenster. Um das Icons zuzuweisen ziehen wir die .icns Datei auf das Symbol.
2016-07-28 11_51_56
 

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.

Vektorgrafiken mit CSS animieren

Nachdem SVGs (Scalable Vector Graphics) inzwischen von den meisten aktuellen Browsern recht zuverlässig unterstützt werden, findet man sie immer häufiger im Web. Die Vorteile liegen klar auf der Hand: SVGs sind auflösungsunabhängig und benötigen in der Regel weniger Speicherplatz als entsprechende Bitmap-Pendants.
Ein weiterer Vorteil: SVGs basieren nämlich (wie HTML) auf einem XML-Standard. Das heißt konkret, dass alle Elemente eines SVG-Vektorbildes (in der Regel Formen wie Kreise, Rechtecke oder Pfade) in der Datei in Form von Text beschrieben werden. Und jetzt kommt der Clou: Dadurch können ebendiese Elemente durch CSS gestyled werden und dementsprechend auch animiert werden (Das Zauberwort lautet CSS-Animationen).
Im folgenden wird in einer kleinen Case Study veranschaulicht, was beim Animieren von SVG-Vektografiken mit CSS beachtet werden muss.
Dazu erstellen wir zunächst eine SVG-Datei. Passenderweise verwenden wir in diesem Beispiel das Icinga Logo. Für den SVG-Export verwenden wir Adobe Illustrator, ebenso wäre das aber auch mit Sketch oder einem ähnlichem Vektor-sicheren Programm wie Sketch, InkScape, etc. möglich.

Vektorgrafik vorbereiten

Wir öffnen das Icinga Logo in Illustrator. Im Vorfeld muss die richtige Gruppierung der Ebenen (siehe Screenshot) berücksichtigt werden, damit man die einzelnen Elemente später gezielt ansprechen kann. Generell ist es wesentlich zeitsparender, wenn man im Vorfeld grob weiß, wie die Animation letztendlich aussehen soll.
In diesem Fall legen wir den zentralen Kreis und die einzelnen „Satelliten“ samt Ihrer Verbindungslinien auf jeweils eine Ebene. Danach gruppieren wir die Satelliten-Objekte.
Bildschirmfoto 2016-06-08 um 14.53.19

Export als SVG

Nun exportieren wir das Logo als entsprechende SVG Datei. Dies bewerkstelligen wir über Datei > Speichern unter …. Als Dateityp wählen wir SVG und aktivieren die Option Zeichenflächen verwenden. Dadurch würde bei mehreren Zeichenflächen für jede Zeichenflächen eine einzelne Datei angelegt.
Bildschirmfoto 2016-06-08 um 17.46.04

Aufbereitung des SVG-Codes

Um die einzelnen Element per CSS-Selektoren ansprechen zu können muss der SVG-Code vorbereitet werden. Dazu öffnen wir die SVG-Datei in einem Texteditor der Wahl und sehen uns den Code erst mal etwas genauer an.
Die Struktur ist recht offensichtlich: Die einzelnen Ebenen, die im Vektorgrafik-Programm angelegt wurden finden sich hier als -Elemente wieder. Die Ebenengruppen umschließen die einzelnen Ebenen mit einem -Tag. Man könnte den SVG-Code bereits so verwenden, um das ganze etwas verständlicher aufzubauen geben wir den einzelnen Elementen jeweils ein id-Attribut, damit wir diese besser ansprechen können. Der Zentrale Kreis erhält die ID primary die Satelliten benennen wir mit sat-0 … 4. Die Gruppe bekommt die id satellites.
Zum Schluss bereinigen wir den SVG-Code noch und entfernen die fill-Attribute. Diese fügen wir später im CSS wieder ein.
Hier wäre der fertige SVG-Code:

<svg>
<g id="icinga-logo">
<g id="satellites">
 <path
   id="sat-0"
   d="M70.9,0C64,0,58.4,5.6,58.4,12.5c0,4.2,2.1,7.9,5.3,10.2L43.3,64.8l3.8,1.8l20.4-42.1c1.1,0.3,2.3,0.5,3.5,0.5c6.9,0,12.5-5.6,12.5-12.5S77.8,0,70.9,0z"
 />
 <path
   id="sat-1" d="M112.6,37.5c-4.6,0-8.3,3.7-8.3,8.4c0,0.1,0,0.2,0,0.3L44.6,63.7l1.2,4l59.7-17.6c1.5,2.4,4.1,4.1,7.2,4.1c4.6,0,8.3-3.7,8.3-8.4C120.9,41.2,117.2,37.5,112.6,37.5z"
 />
 <path
   id="sat-2"
   d="M68.8,95.9c-0.5,0-1,0.1-1.5,0.2L46.9,64.6l-3.5,2.3l20.4,31.4c-0.8,1.1-1.3,2.4-1.3,3.8c0,3.4,2.8,6.3,6.2,6.3c3.5,0,6.3-2.8,6.3-6.3C75,98.6,72.2,95.9,68.8,95.9z"
 />
 <path
   id="sat-3"
   d="M21.3,103.6l25.6-36.7l-3.4-2.4l-25.6,36.7c-1.6-0.8-3.4-1.2-5.3-1.2C5.6,100,0,105.6,0,112.6c0,6.9,5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5C25,109.1,23.6,105.9,21.3,103.6z"
 />
 <path
   id="sat-4"
   d="M45.7,63.5l2.7-3.2L20.1,36.9c0.5-1.1,0.8-2.3,0.8-3.5c0-4.6-3.7-8.4-8.3-8.3c-4.6,0-8.3,3.7-8.3,8.3c0,4.6,3.7,8.4,8.3,8.3c1.8,0,3.5-0.6,4.9-1.6L45.7,63.5z"
 />
</g>
 <path
   id="primary"
   d="M31.8,46c9.5-7.7,23.4-6.3,31.1,3.2c7.7,9.4,6.3,23.4-3.2,31.1c-9.5,7.7-23.4,6.3-31.1-3.2C20.9,67.7,22.3,53.7,31.8,46z"
 />
</g>
</svg>

 
Jetzt wollen wir die SVG-Datei in unser HTML einbinden. Grundsätzlich gibt es zwei Möglichkeiten, SVGs mit entsprechendem CSS anzulegen.

1. Inline SVG direkt im HTML einbinden

Im HTML wird der SVG Code innerhalb eines -Tags direkt in die HTML-Datei eingebunden. Dadurch können die einzelnen Elemente direkt mit Inline-Styles oder über ein externes CSS-File wie gewohnt angesprochen werden. Diese Variante ermöglicht außerdem, die  <svg>-Elemente per Javascript zu manipulieren.

2. SVG in eine separate Datei auslagern und per <img>-Tag oder als CSS-Background einbinden

Möchte man das animierte SVG an mehreren Stellen einbinden, ist es sinnvoll den SVG-Code samt Styleangaben in eine separate Datei auszulagern. Diese .svg Datei kann dann wie gewohnt per <img>-Tag oder CSS-Background eingebunden werden. Leider ist es in dieser Variante nicht möglich die Elemente per Javascript anzusteuern und entsprechend zu manipulieren.
Der Einfachheit halber wird in diesem Beispiel Variante 1 gewählt

Animation des zentralen Kreiselements

Nun kann es los gehen. Zunächst definieren wir eine Animation in unserem CSS mit @keyframes. Hier sollte beachtet werden, dass in diesem Beitrag der Übersichtlichkeit wegen keine Vendor-Prefixes berücksichtigt werden.

@keyframes primaryPulse {
  from { transform: scale(1) }
  to   { transform: scale(1.1) }
}

Diese Animation weisen wir dem mittleren Kreiselement mit der id primary zu und vergeben eine Dauer von 3 Sekunden in der die Animation abgespielt werden soll. Wichtig ist in diesem Fall den transform-origin anzugeben.

#primary {
  animation-name: primaryPulse;
  animation-duration: 3s;
  transform-origin: center center;
}

Die Animation wird dadurch einmal abgespielt. Um die Animation dauerhaft abzuspielen erweitern wir die CSS-Angaben mit animation-iteration-count. Dadurch würde die Animation abspielen und am Ende wieder abrupt zum Anfang zu springen. Das ergäbe einen unschönen Sprungeffekt. Um einen pulsierenden Effekt zu erzielen vergeben wir zusätzlich noch die animation-direction Eigenschaft. Somit wird die Animation abwechselnd vorwärts und rückwärts abgespielt.

#primary {
  animation-name: primaryPulse;
  animation-duration: 3s;
  transform-origin: center center;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

 

Bewegung für die Satelliten

Nun wollen wir den Satelliten etwas Leben einhauchen und auch diese animieren. Diese sollen einen leichten Rotationseffekt erhalten, der wie beim zentralen Kreis alternierend abgespielt werden soll. Dadurch definieren wir zunächst wieder die Animation über @keyframes.

@keyframes rotate {
  from { transform: rotate(-3deg) }
  to   { transform: rotate(3deg) }
}

Wir weisen den einzelnen Satelliten-Elementen die Animation zu. Über animation-delay erzielen wir, dass die Satelliten-Animation leicht versetzt startet. Dadurch wird vermieden, dass die Animation zu synchron abläuft und zu mechanisch wirkt. Wichtig hierbei ist auch die entsprechende Angabe der transform-origin Eigenschaft, damit die Satelliten um die Mitte des Logos rotieren.

#sat-0 {
  transform-origin: bottom left;
  animation-name: rotate;
}
#sat-1 {
  transform-origin: bottom left;
  animation-name: rotate;
  animation-delay: 1.5s;
  animation-duration: 6s;
}
#sat-2 {
  transform-origin: top left;
  animation-name: rotate;
  animation-delay: 3s;
  animation-duration: 6s;
}
#sat-3 {
  transform-origin: top right;
  animation-name: rotate;
  animation-duration: 6s;
}
#sat-4 {
  transform-origin: bottom right;
  animation-name: rotate;
  animation-delay: 3s;
  animation-duration: 6s;
}

Um den Code schlank zu halten, verwenden wir die CSS Selektoren und wählen alle <path>-Elemente der #satellite Gruppe aus. Hier setzen wir alle Eigenschaften, die für alle Satelliten-Elemente nötig sind.

#satellites > path {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

Zu guter letzt erstellen wir noch eine Animation für die gesamte Satellitengruppe um die Logoanimation noch etwas organischer zu machen …

@keyframes globalPulse {
  from { transform: scale(1) }
  to   { transform: scale(1.2) }
}

… und weisen diese der #satellites-Gruppe zu

#satellites {
  animation-name: globalPulse;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: center center;
}

 

Und so sieht die Animation aus

See the Pen RRWmay by Florian Strohmaier (@flourish86) on CodePen.

Florian Strohmaier
Florian Strohmaier
UX Designer

Mit seinen Spezialgebieten UI-Konzeption, Prototyping und Frontendentwicklung unterstützt Florian das Dev-Team bei NETWAYS. Trotz seines Design-Backgrounds fühlt er sich auch in der Technik zuhause. Gerade die Kombination aus beidem hat für ihn einen besonderen Reiz.