Erstellen Sie vollständig animierte Widgets mit Shift.css

Webanimation bietet eine Möglichkeit, die Aufmerksamkeit der Menschen zu gewinnen und sie in eine Website einzubinden. Es gibt viele Tools, um freie Animationen zu erstellen, aber Shift.css ist eine der neuesten im Bundle .

Es ist ein kostenloses Open-Source-Framework, das zum Erstellen dynamischer Animationen in jedem Container dient . Und diese Animationen sind nicht in einer Sequenz eingeschlossen . Sie können für jedes Element im Block benutzerdefinierte Animationen erstellen und diese in einer bestimmten Reihenfolge anwenden.

Die Shift-Demo-Seite kann dir viel besser zeigen, als ich in Worten erklären kann.

Eine Sache, die Sie bemerken werden, ist, dass jedes Element innerhalb des Containers ein separates HTML-Element ist . Ob es sich um ein SVG oder ein Bild oder was auch immer handelt, Sie können alles separat animieren, um Ihren eigenen Animationseffekt zu erstellen .

Die Bibliothek enthält zwei Dateien, eine .css und .js Bibliothek, und beide müssen Ihrem Dokumentkopf hinzugefügt werden .

Ich kann kein GitHub Repo für dieses Projekt finden, daher müssen Sie die Dateien direkt von der Shift.css Webseite herunterladen.

Der nächste Schritt besteht darin , ein Containerelement mit einigen Inhalten zu definieren . .shift-element sind wichtig, daher muss jedes animierende Element die Klasse .shift-element .

Zusammen mit diesen Klassen können Sie auch HTML5-Datenattribute hinzufügen, um zu definieren, wie die Animation funktioniert. Momentan gibt es nur drei, aber sie sollten ausreichen, um einen vollständigen Animationseffekt zu erstellen.

1. Datenanimation : Name der Animation
2. Datenverzögerung : Gesamtverzögerung (in Sekunden) vor Beginn der Animation
3. Datenlänge : Gesamtlänge (in Sekunden) der Animation

Der Animationsname muss eine vordefinierte Animation sein, die für die Schichtbibliothek erstellt wurde. Momentan stehen 15 Animationsnamen zur Auswahl . Sie können sie am unteren Rand der Shift.css Homepage sehen.

Einfach kopieren / einfügen, was Sie wollen, in die Animationsnameneinstellung und Sie sollten gut gehen! Wenn ich zum Beispiel die Exit-Fade-Animation verwenden möchte, würde ich data-animation="shift_exitFade" als data-animation="shift_exitFade" zu jedem Element hinzufügen, das auf diese Weise animiert werden soll. Kinderleicht.

Ich wünschte, diese Bibliothek hätte mehr Optionen in JavaScript, weil Entwickler so viel mehr Kontrolle über die Platzierung und die Funktionen haben würden. Aber für einen einfachen (und freien) Animationsrahmen kann ich mich nicht beschweren.

Shift.css ist perfekt für neuere Entwickler, die komplexere Animationsstile erstellen möchten, ohne ausführlichen Code von Grund auf schreiben zu müssen.