10 besten kostenlosen Animationsbibliotheken für das Web
Animation ist einer der wichtigsten Trends für 2018, aber Sie müssen das Rad nicht neu erfinden, um Ihren Websites mehr Bewegung zu verleihen. Wir betrachten die besten kostenlosen Animationsbibliotheken für Webprojekte.
Sie können einige verrückte Dinge mit bauen UI-Animationen im Internet. Dies wird schnell zur Norm für moderne Websites, bei denen das Engagement der Benutzer eine große Rolle spielt.
Wenn Sie sich umsehen, finden Sie viele Codegeneratoren und benutzerdefinierte Werkzeuge um mit Animation zu helfen. Sie können aber auch kostenlose Bibliotheken finden, die Ihnen beim Codieren Zeit sparen.
Dies sind meine 10 Tipps für die besten Open-Source-Web-Animationsbibliotheken. Dies beinhaltet eine gute Mischung aus JavaScript-Bibliotheken und reinen CSS-Animationen. Beide Stile sind großartig und beide haben ihre eigenen Vor- und Nachteile.
Wie auch immer, ich garantiere, dass diese Liste etwas haben wird, das Sie lieben werden.
1. GSAP
Das GSAP-Bibliothek ist eine der coolsten kostenlosen Ressourcen für Entwickler. Es läuft rein auf JavaScript und es ist eine der robusteren Animationsbibliotheken, die Sie verwenden können.
Es funktioniert über HTML5-Spezifikationen und spielt mit allen modernen Browsern, ganz zu schweigen vom Team, das diese Bibliothek ständig mit neuen Funktionen aktualisiert. Es kann mit SVGs, Canvas-Elementen oder sogar jQuery-Objekten zusammen mit anderen verwandten Bibliotheken wie Staffelei .
Auf jeden Fall lohnt sich eine Suche, wenn Sie eine leistungsstarke Webanimationsbibliothek benötigen. Dies kann auch einfache Aufgaben bewältigen, aber es gibt viele kleinere Bibliotheken, die Sie ausprobieren können.
2. Anime.js
Als ich das erste Mal fand Anime.js Bibliothek Ich war platt. Diese Sache ist unglaublich mächtig und geht über einfache UI / UX-Animationen hinaus.
Mit Anime.js kannst du ästhetische Animationen mit Logos, Buttons, Bildern gestalten. Dies unterstützt alle typischen Benutzerauslöser wie Klicks / Hovers / Swipes und Sie haben Zugriff auf eine Reihe von benutzerdefinierten Animationen.
Wenn Sie sich ansehen die Dokumentation Sie können tatsächlich eine Reihe von Beispielen finden, die direkt in die Seite eingebettet sind. Außerdem gibt es ein Sammlung auf CodePen voll mit Anime.js-Beispielen zum Durchlesen.
3. Wicked CSS
Hier ist eine der neueren Bibliotheken mit einem Fokus auf reinem CSS-Code. Böses CSS funktioniert über CSS3-Eigenschaften, um einige ziemlich unglaubliche Ergebnisse zu bieten.
Auf der Hauptseite finden Sie eine Reihe von Live-Demos, die Sie direkt im Browser testen können. Dazu gehören Objektrotationen, Spiegelungen, Slide-Ins und so viele ähnliche Animationseffekte.
Einige davon sind vielleicht einfach genug, um sie selbst zu bauen. Aber andere werden sehr komplex und das ist es, was die Wicked CSS-Bibliothek so spaßig macht.
4. Animiere CSS
Vielleicht ist die definitive Ressource für Web-Animation Animate.css . Diese Open-Source-Bibliothek wurde vor einigen Jahren veröffentlicht und ist noch relevanter denn je.
Entwickler Daniel Eden hat dieses Projekt als eine vereinfachte Möglichkeit entwickelt, um benutzerdefinierte CSS3-Animationen auf einer Webseite hinzuzufügen. Im Laufe der Jahre hat es sich zu einer vollwertigen Animationsbibliothek entwickelt, die genug Kraft besitzt, um bei jedem größeren Projekt zu funktionieren.
Die Homepage bietet viele Demos, damit Sie die Animationsstile testen und sehen können, was Sie denken. Außerdem gibt es eine Menge toller Dokumentation auf GitHub einschließlich einer Liste von Klassen und einige Beispiel-Code-Schnipsel.
5. Dienstag
Die eine Sache, die mir am meisten gefällt Dienstag ist die Einfachheit dieser Animationen. Mit dieser Bibliothek steuern Sie, wie Elemente auf der Seite erscheinen und verschwinden.
Aber diese Animationen sind nicht übertrieben oder super glamourös. Stattdessen packen sie einen schönen subtilen Punch, der die Seitenästhetik wirklich verbessert, aber nicht vom Inhalt oder der Benutzererfahrung ablenkt.
Ich habe nicht viele Websites mit Dienstag gesehen, aber es ist vielleicht die sauberste Bibliothek da draußen.
Es läuft auf reinem CSS und die Animationsstile sind so verdammt vernünftig. Sie können mit jeder Seite verschmelzen und Sie haben über ein Dutzend Ein- und Ausblendungsstile, mit denen Sie arbeiten können.
6. CSShake
Ich habe noch keine CSS-Bibliothek als Spaß oder seltsam zu sehen CSShake . Dies ist ein Teil verrückt und ein Teil einzigartig, so wird es wahrscheinlich nicht mit jeder Website passen.
Der Grund, warum es die Liste erstellt hat, ist, dass ich mir keine ähnliche Bibliothek mit diesen Funktionen vorstellen kann. Mit CSShake können Sie Hover-Animationen mit Schütteleffekten aus allen Arten von Stilen aktivieren, die alle auf reinem CSS laufen.
Von leichten Bewegungen bis zu kräftigem Schütteln und allem dazwischen hat diese Bibliothek alles mit einem ziemlich einfachen Setup.
7. Mo.js
Aus den vielen detaillierten JavaScript-Bibliotheken für Animation muss ich sagen Mo.js ist einer der besten. Diese Bibliothek ist massiv und es ist wirklich für Bewegungsgrafiken über UI / UX-Animationen.
Aber Sie können dies für alles verwenden, wenn Sie lernen, wie es funktioniert. Die Codes sind ziemlich einfach zu manipulieren und es gibt ein Haufen Tutorials Sie können folgen, um Ihr Leben einfacher zu machen.
Ist das die perfekte Animationsbibliothek? Kaum.
Es hat jedoch viele erstaunliche Funktionen und es vereinfacht wirklich den Animationsprozess, ob Sie eine Navigationsleiste, ein Logo oder ein anderes komplexes Objekt animieren.
8. Animiere Plus
Für eine superleichte, einfach-luftige Animationsbibliothek check out Animiere Plus . Dies wiegt nur 2 KB, wenn es minimiert wird und es hat alle grundlegenden Funktionen, die Sie mit benutzerdefinierten JavaScript-Animationen erwarten würden.
Dies ist einfach zu installieren mit npm und Sie können es nach den Code-Schnipsel auf GitHub einrichten. Die meisten davon sind nur einfache Demos, damit sie nicht zu etwas Komplexem werden, aber Sie können alle Optionen und Callback-Methoden auch auf GitHub finden.
Schau es dir an diese Beispieldemo direkt aus dem Code-Snippet im Hauptrepo gezogen. Es ist nicht viel, aber es zeigt Ihnen, wie Sie Animate Plus einrichten und ein wenig Standardcode von Grund auf neu starten.
9. Bounce.js
Mit Bounce.js Sie können mit wenigen Klicks leistungsstarke CSS3- und JS-Animationen erstellen.
Auf der Startseite finden Sie einen benutzerdefinierten Animation Builder mit einem Fokus auf Module zuerst. Auf diese Weise können Sie die gewünschten Animationsfunktionen auf der Seite hinzufügen, ohne zusätzlichen Code hinzuzufügen.
Der größte Unterschied zu Bounce.js ist, dass es nicht nur als Bibliothek funktioniert. Obwohl Sie Setup-Informationen finden können auf GitHub Es ist nicht nur ein einfaches Skript. Es kommt tatsächlich mit einem Web-Builder, so dass Bounce eine der wenigen Animationsbibliotheken ist, die Sie in Ihrem Browser stilisieren können.
10. Magie
Spaßanimationen mit einem Schuss Verspieltheit beschreiben am besten Zauber Bibliothek.
Diese gesamte Sammlung konzentriert sich auf CSS3-Animationen und drückt benutzerdefinierte Stile, die anderswo nicht zu finden sind. Es ist eine ziemlich große Sammlung von CSS3-Codes und Sie finden hier auch viele nette Tricks. Rotationen, perspektivische Slipps, verblassende Effekte, viel Bewegung.
Wenn Sie auf die Demoseite Sie können einige dieser Effekte in Aktion sehen.
Zugegeben, diese Bibliothek ist immer noch viel kleiner als andere CSS3-Bibliotheken, so dass sie nicht mit Dienstag oder Animate.css konkurrieren kann. Aber es hat viele nette Web-Animationen, die Sie einfach nicht in anderen Bibliotheken finden werden.
