So fügen Sie Ihrer Website schnell Mikrointeraktionen hinzu

In dem heutigen schnellen Tipp zeige ich Ihnen, wie Sie mit einer JavaScript-Bibliothek namens micron.js Mikrointeraktionen zu Ihrer Website hinzufügen. Mit micron.js können Sie subtile Animationen zu den Elementen Ihrer Webseite hinzufügen, ohne die Stile selbst schreiben zu müssen. Alles wird mithilfe von Datenattributen in Ihrem Markup erledigt. Lass uns einen Blick darauf werfen!

Schauen Sie sich den Micron.js Screencast an

1. Holen Sie sich micron.js

Besuchen Sie die Homepage von micron.js und Sie finden dort neben einigen Demos einen Link zum Repo. Um zu beginnen, benötigen Sie die CSS-Datei und die JavaScript-Datei. Die CDN-Links für die wie folgt aussehen:

Fügen Sie diese entweder Ihrer Seite hinzu, wie Sie sie sehen, oder fügen Sie bei Verwendung eines CodePen-Stifts die Links zu den Registerkarten CSS und JavaScript in den Stifteinstellungen hinzu.

2. Fügen Sie eine Mikrointeraktion hinzu

Verwenden wir ein Ankerelement als Beispiel. Nimm folgendes:

Standard

Wenn Sie auf einen Anker wie diesen klicken, wird absolut nichts unternommen. Durch Hinzufügen eines Datenattributs mit dem Namen von Daten-Mikron, Wir können unserem Anker etwas Flair verleihen.

Standard

Hier sehen Sie, dass wir den Wert hinzugefügt haben Shake zu unserem Attribut. Dies könnte einer von mehreren Werten gewesen sein, die alle unterschiedliche Interaktionen ermöglichen:

• Shake
• verblassen
• Gelee
• prallen
• Tada
• Rille
• Swing
• drücken
• flackern
• Trottel
• blinken
• Pop

Wenn Sie jetzt auf den Anker klicken, erhalten Sie visuelles Feedback in Form unserer Mikrointeraktion.

3. Passen Sie die Animationsdauer an

Durch das Hinzufügen eines weiteren Datenattributs können Sie die Dauer der Animation ändern:

Daten-Mikrometer-Dauer = "1"

Der angegebene Wert ist in Sekunden. Das obige Attribut verlangsamt die Standardanimation um eine Sekunde.

4. Stellen Sie die Lockerungsfunktion ein

Sie haben jetzt den Dreh raus, richtig? Fügen Sie ein weiteres Attribut hinzu, um die Beschleunigungsfunktion der Animation anzupassen.

Daten-Mikron-Timing = "linear"

Auch hier werden einige bekannte Werte unterstützt:

• linear
• Leichtigkeit
• Bequemlichkeit
• Bequemlichkeit

5. Binden Sie an ein anderes Element

Wir können micron.js verwenden, um andere Elemente als das anzuklicken, auf das geklickt wird, diesmal mit zwei Datenattributen:

data-micron-bind = "true" data-micron-id = "target"

In diesem Fall sagen wir, dass bindend ist wahr, und dass die Animation auf ein Element mit der ID von wirken soll Ziel. 

In der untenstehenden Demo finden Sie eine Sammlung all dieser Beispiele einschließlich der Bindung (klicken Sie auf gebunden button und sehen das rote div animieren):

Fazit

Micron.js macht noch mehr für Mikrointeraktionen als wir in diesem Tutorial gezeigt haben. Besuchen Sie die Website, spielen Sie und überzeugen Sie sich selbst!

Lern mehr