Erstellen Sie vollständig animierte Widgets mit Shift.css

Webanimation bietet einen Weg zu Aufmerksamkeit erregen und ziehe sie weiter in eine Website. Es gibt viele Werkzeuge da draußen Erstellen Sie kostenlose Animationen aber Shift.css ist einer der neuesten in der Gruppe.

Es ist ein kostenloses Open Source Framework gemacht zum erstellen dynamische Animationen in einem beliebigen Container. Und diese Animationen sind nicht in einer Sequenz gesperrt. Sie können tatsächlich benutzerdefinierte Animationen für erstellen jedes Element im Block und wende diese an in einer bestimmten Reihenfolge.

Das Demo-Seite verschieben kann dir viel besser zeigen, als ich es in Worten erklären kann.

Eine Sache, die Sie feststellen werden, ist, dass jedes Element im Container ist ein separates HTML-Element. Ob es sich um eine SVG-Datei oder ein Bild oder was auch immer handelt, Sie können alles separat animieren Erstellen Sie Ihren eigenen Animationseffekt.

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

Ich kann kein GitHub-Repo für dieses Projekt finden, also müssen Sie dies tun Laden Sie die Dateien direkt herunter von der Shift.css-Website.

Der nächste Schritt ist zu Definieren Sie ein Containerelement mit etwas Inhalt. Klassennamen sind wichtig, daher muss jedes animierende Element dies tun habe die Klasse .Schaltelement angewendet.

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

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

Der Animationsname muss a sein vordefinierte Animation erstellt für die Shift-Bibliothek. Im Moment gibt es 15 Animationsnamen zur Auswahl. Sie können sie unten auf der Shift.css-Startseite aufgelistet sehen.

Gerade Kopieren Einfügen irgendwas du willst in die Einstellung des Animationsnamens und du solltest gut sein! Wenn ich beispielsweise die Exit-Fade-Animation verwenden wollte, würde ich hinzufügen data-animation = "shift_exitFade" als Datenattribut für das Element, das auf diese Weise animiert werden soll. Kinderleicht.

Ich wünschte, diese Bibliothek hätte mehr Optionen in JavaScript, weil sie den Entwicklern so viel mehr Kontrolle über die Platzierung und die Funktionen geben würde. Aber für ein einfaches (und kostenloses) Animations-Framework kann ich mich nicht beschweren.

Shift.css ist perfekt für neuere Entwickler die wollen schaffen komplexere Animationsstile ohne verbose Code von Grund auf zu schreiben.