Scrollen und animieren Sie Ihre Seite einfach mit Force.js
Webanimation ist einfacher als je zuvor, mit reine CSS3-Animationen zur Norm werden. Aber, JavaScript ist immer noch unglaublich wertvoll und es ist eine der wenigen zuverlässigen Sprachen für technische Animationen.
Das Force.js-Bibliothek ist ein kostenloses Open-Source-Skript dynamische Seitenanimationen.
Sie können Scroll-Sprunganimationen erstellen in der Seite selbst, oder Sie können Elemente animieren um die Seite. Beide sind genauso einfach einzurichten und die Bibliothek verfügt über eine Unmenge an Funktionen.
Standardmäßig Force.js stützt sich auf CSS-Übergänge wenn möglich. Diese arbeiten in allen modernen Browsern und der Code ist viel einfacher und bietet darüber hinaus eine breitere Unterstützung für Benutzer JavaScript nicht zulassen.
Die Bibliothek verwendet a natürliche Fallback-Methode mit JavaScript-Code, So ist es auch für ältere Browser sicher.
Und Force.js ist eine Vanillebibliothek erfordert keine Abhängigkeiten wie jQuery. Wenn Sie jQuery lieben, können Sie diese Syntax über Force ausführen, und es funktioniert trotzdem gut. Großartig für die Vielseitigkeit mit verschiedenen Websites.
Die zwei großen Animationstechniken sind springt und bewegt sich. Sie bestimmen, wo sich das Element bewegt, wie schnell es sich bewegt und über welche Arten von Beschleunigungsmethoden.
Die Bibliothek hat auch eine Reihe von benutzerdefinierten Optionen Sie können die Animationen noch besser steuern. Sie können Bearbeiten Sie die Anker-Link-Ziele und Legen Sie fest, welche Erleichterungen Sie benötigen-auch wenn Sie auf derselben Seite unterschiedliche Abhilfemaßnahmen wünschen!
Die gesamte Dokumentation ist verfügbar auf GitHub, zusammen mit den Dateien.
Oder, wenn Sie npm / Bower bevorzugen, können Sie Dateien direkt ziehen dieser Weg. Du musst es nur tun schließen Sie das ein force.js Datei in Ihre Kopfzeile und Sie sind gut zu gehen.
Ich empfehle außerdem, die Dokumentation zu überfluten, da sie voll ist Beispiele für die springen() und Bewegung() Methoden.
Sie beide nehmen Sie Argumente für Zeit, Lockerung und Position, Daher ist es wichtig zu verstehen, wie diese funktionieren. Wenn Sie sich erst einmal dafür entschieden haben, werden Sie nie zurückschauen, da dies die perfekte, leichte Animationsbibliothek für jedes Projekt ist.
