Comment ajouter rapidement des microinteractions à votre site Web

Dans le conseil rapide d'aujourd'hui, je vais vous montrer comment ajouter des micro-interactions à votre site Web à l'aide d'une bibliothèque JavaScript appelée micron.js. Avec micron.js, vous pouvez ajouter des animations subtiles aux éléments de votre page Web sans avoir à écrire les styles vous-même. Tout est fait en utilisant des attributs de données dans votre balisage. Nous allons jeter un coup d'oeil!

Regardez le screencast de Micron.js

1. Obtenez micron.js

Visitez la page d'accueil micron.js et vous trouverez, avec quelques démos, un lien vers le dépôt. Pour commencer, vous aurez besoin du fichier CSS et du fichier JavaScript, les liens CDN pour lesquels cela ressemble à ceci:

Ajoutez-les à votre page comme vous les voyez ou, si vous utilisez un stylet CodePen, ajoutez les liens vers les onglets CSS et JavaScript dans les paramètres du stylet..

2. Ajouter une microinteraction

Utilisons un élément d'ancrage à titre d'exemple. Prenez ce qui suit:

Défaut

En cliquant sur une ancre comme celle-ci ne fera absolument rien. Cependant, en ajoutant un attribut data par le nom de micron de données, nous pouvons ajouter un peu de talent à notre ancre.

Défaut

Ici, vous verrez que nous avons ajouté la valeur secouer à notre attribut. Cela aurait pu être l’une des nombreuses valeurs, toutes nous donnant une interaction différente:

• secouer
• se faner
• gelée
• rebondir
• tada
• rainure
• balançoire
• écraser
• vaciller
• secousse
• cligner
• pop

Maintenant, lorsque vous cliquez sur l'ancre, vous verrez un retour visuel sous la forme de notre microinteraction.

3. Ajuster la durée de l'animation

Ajouter un autre attribut data nous permettra de modifier la durée de l'animation:

data-micron-duration = "1"

La valeur donnée est en secondes, donc l'attribut ci-dessus ralentirait l'animation par défaut pour qu'elle dure une seconde..

4. Ajuster la fonction d'accélération

Vous comprenez ça maintenant, non? Ajoutons un autre attribut pour ajuster la fonction d'accélération de l'animation.

data-micron-timing = "linear"

Encore une fois, un certain nombre de valeurs connues sont supportées ici:

• linéaire
• facilité dans
• soulagement
• facilité d'entrée

5. Lier à un autre élément

Nous pouvons utiliser micron.js pour cibler des éléments autres que ceux sur lesquels l'utilisateur clique, cette fois avec deux attributs de données:

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

Dans ce cas, nous disons que la liaison est vrai, et que nous voulons que l'animation prenne effet sur un élément portant l'identifiant de cible. 

Découvrez la démo ci-dessous pour une collection de tous ces exemples, y compris la liaison (cliquez sur le lien lié bouton et voir le div rouge animer):

Conclusion

Micron.js fait encore plus pour les microinteractions que ce que nous avons démontré dans ce tutoriel: visitez le site Web, mettez-vous en train de jouer, et constatez vous-même!

Apprendre encore plus