Come aggiungere rapidamente microinterazioni al tuo sito web

Nel suggerimento rapido di oggi ti mostrerò come aggiungere microinterazioni al tuo sito web usando una libreria JavaScript chiamata micron.js. Con micron.js puoi aggiungere animazioni sottili agli elementi della tua pagina web senza dover scrivere gli stili da te - tutto viene eseguito utilizzando gli attributi dei dati nel tuo markup. Diamo un'occhiata!

Guarda lo Screencast di Micron.js

1. Ottieni micron.js

Visita la homepage di micron.js e troverai, insieme ad alcune demo, un link al repository. Per iniziare avrai bisogno del file CSS e del file JavaScript, i collegamenti CDN per i quali assomigli a questo:

Aggiungili alla tua pagina mentre li vedi, oppure se stai usando una penna CodePen, aggiungi i link alle schede CSS e JavaScript nelle impostazioni della penna.

2. Aggiungi una microinterazione

Usiamo un elemento di ancoraggio come esempio. Prendi il seguente:

Predefinito

Fare clic su un'ancora come questa non farà assolutamente nulla. Tuttavia, aggiungendo un attributo dati con il nome di Dati micron, possiamo aggiungere un tocco alla nostra ancora.

Predefinito

Qui vedrai che abbiamo aggiunto il valore scuotere al nostro attributo Questo potrebbe essere stato uno dei tanti valori, tutti con una diversa interazione:

• scuotere
• dissolvenza
• gelatina
• rimbalzo
• tada
• scanalatura
• swing
• spremere
• barlume
• cretino
• lampeggiare
• pop

Ora quando fai clic sull'ancora, vedrai un feedback visivo sotto forma di microinterazione.

3. Regola la durata dell'animazione

L'aggiunta di un altro attributo dati ci consentirà di modificare la durata dell'animazione:

Dati micron-duration = "1"

Il valore indicato è espresso in secondi, quindi l'attributo precedente rallenterebbe l'animazione predefinita per un secondo.

4. Regola la funzione di attenuazione

Stai imparando tutto questo ora, giusto? Aggiungiamo un altro attributo per regolare la funzione di andamento dell'animazione.

dati micron temporizzazione = "lineare"

Ancora una volta, un certo numero di valori familiari sono supportati qui:

• lineare
• facilità in
• facilità-out
• facilità in-out

5. Lega a un altro elemento

Possiamo utilizzare micron.js per selezionare elementi diversi da quello su cui è stato fatto clic, questa volta con due attributi dati:

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

In questo caso diciamo che è vincolante vero, e che vogliamo che l'animazione abbia effetto su un elemento con l'ID di bersaglio. 

Controlla la demo di seguito per una raccolta di tutti questi esempi, inclusa la rilegatura (fai clic sul pulsante limite pulsante e vedi il div rosso animato):

Conclusione

Micron.js fa ancora di più per le microinterazioni di quante ne abbiamo dimostrate in questo tutorial, visita il sito web, gioca e vedi tu stesso!

Per saperne di più