Tutoriel sur les micro-interactions pour les développeurs débutants: comment créer un bouton interactif “J’aime” avec CSS et JavaScript

Tutoriel sur les micro-interactions pour les débutants


Je pense qu’il est sûr de dire que les micro-interactions sont cool. Nous, les internautes, nous les apprécions tous. Et que vous les remarquiez ou non, ils améliorent considérablement l’expérience utilisateur. En donnant vie à votre site Web ou à votre outil Web de manière subtile et conviviale, ils permettent simplement à l’utilisateur d’apprécier un peu plus l’ensemble de l’interaction..

Dans cet esprit, je veux vous donner un rapide tutoriel sur les micro-interactions et vous montrer comment créer un cool "Comme" bouton pour votre site. Avec un code minimal. Le voici en action:

Assez excitant pour un bouton de pouce levé, n’est-ce pas? Allons-y!

Mais d’abord:

Pourquoi s’embêter avec les micro-interactions en premier lieu?

Je ne vais pas essayer de vous convaincre trop ici, mais regardons juste quelques choses.

Les micro-interactions existent depuis un certain temps – suffisamment pour qu’elles aient même livres complets écrit à leur sujet. De plus, de nombreuses expériences et études ont examiné leur utilité et leur efficacité.

L’une des maisons de recherche les plus remarquables, le Nielsen Norman Group, a étudié les micro-interactions plus étroitement en 2018. Selon leurs conclusions, les micro-interactions se sont avérées, entre autres, améliorer l’expérience utilisateur en encourageant l’engagement et la communication de la marque.

En bref, les micro-interactions peuvent être vraiment bénéfiques si elles sont utilisées correctement et, pas trop, non plus. Aujourd’hui, nous allons vous montrer un exemple simple d’une micro-interaction en action:

Tutoriel sur les micro-interactions: le balisage et le CSS de base de notre bouton de pouce levé

�� Remarque; en bas, nous avons quelques options pour vous qui n’impliquent pas d’écrire du code à la main.

Tout d’abord, nous avons besoin d’une bonne vieille magie HTML et CSS pour le faire fonctionner. La structure est assez simple.

Nous allons utiliser une balise SVG pour l’icône similaire elle-même – cela vient de Police Awesome; vous pouvez trouver la plupart des icônes ici. Juste pour ajuster les attributs de largeur et de hauteur de la balise SVG, nous allons utiliser le code HTML ci-dessous:

Maintenant, pour le CSS, nous allons aller vraiment basique. Ce que nous voulons arriver ici, c’est donner une belle apparence à notre bouton J’aime et avoir tout bien centré sur l’écran. Nous savons déjà que nous allons basculer une classe au clic (la classe active), nous devons donc en tenir compte. Nous allons remplir l’icône d’une couleur bleue lorsqu’elle est active et d’un gris foncé dans le cas contraire:

corps {
affichage: flex;
align-items: centre;
justifier-contenu: centre;
hauteur: 100vh;
}

.bouton J’aime {
affichage: flex;
align-items: centre;
justifier-contenu: centre;
}

.like-button.active {
-webkit-animation: pop 0.9s tous les deux;
animation: pop 0.9s tous les deux;
}

.bouton-like svg {
opacité: 1;
}

.chemin svg du bouton j’aime {
remplissage: # 333;
transition: remplissage .4s facilité;
}

.chemin svg like-button.active {
remplissage: # 2196f3;
}

Une autre chose que nous voulons ici est l’animation pop utilisée lorsque le bouton devient actif, nous allons donc l’ajouter à notre fichier CSS:

@ -webkit-keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
transformer: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1,25, 0,75, 1);
transformer: scale3d (1,25, 0,75, 1);
}
40% {
-webkit-transform: scale3d (0,75, 1,25, 1);
transformer: scale3d (0,75, 1,25, 1);
}
50% {
-webkit-transform: scale3d (1,15, 0,85, 1);
transformer: scale3d (1,15, 0,85, 1);
}
65% {
-webkit-transform: scale3d (0,95, 1,05, 1);
transformer: scale3d (0,95, 1,05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
transformer: scale3d (1,05, 0,95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
transformer: scale3d (1, 1, 1);
}
}

@keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
transformer: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1,25, 0,75, 1);
transformer: scale3d (1,25, 0,75, 1);
}
40% {
-webkit-transform: scale3d (0,75, 1,25, 1);
transformer: scale3d (0,75, 1,25, 1);
}
50% {
-webkit-transform: scale3d (1,15, 0,85, 1);
transformer: scale3d (1,15, 0,85, 1);
}
65% {
-webkit-transform: scale3d (0,95, 1,05, 1);
transformer: scale3d (0,95, 1,05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
transformer: scale3d (1,05, 0,95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
transformer: scale3d (1, 1, 1);
}
}

le "interaction" partie de ce tutoriel de micro-interactions

Maintenant que nous avons éliminé le style de base, il est temps de gérer les interactions réelles – cela signifie que JavaScript!

Tout d’abord, nous allons avoir besoin d’une fonction JavaScript qui génère un entier aléatoire entre un intervalle donné (un minimum et un maximum):

fonction randomInt (min, max) {
return Math.floor (Math.random () * (max – min + 1) + min);
}

Ensuite, nous allons avoir besoin d’une autre fonction qui renvoie aléatoirement +1 ou -1 afin que nous puissions avoir des valeurs aléatoires négatives ou positives:

fonction plusOrMinus () {
return Math.random () < 0,5? -1: 1;
}

Maintenant, pour la manipulation réelle de l’interaction; regardons le code pour l’expliquer correctement:

  • Tout d’abord, nous allons enregistrer notre bouton dans une variable et y ajouter un écouteur d’événements Click.
  • Lorsque le bouton est cliqué, nous allons ajouter une fonction preventDefault () afin que nous soyons sûrs que rien de indésirable ne se produit.
  • Après cela, nous allons ajouter notre classe active au bouton, que nous avons précédemment stylisé avec une couleur bleue via CSS.
  • Ensuite, nous allons exécuter la fonction generateClones () (qui n’est pas encore définie), en passant notre bouton comme paramètre via ce.

let button = document.querySelector (".bouton J’aime");

button.addEventListener ("Cliquez sur", fonction (e) {
e.preventDefault ();
this.classList.toggle ("actif");
generateClones (ceci);
});

Définissons maintenant la fonction generateClones () et exécutons les étapes suivantes avec:

  1. Tout d’abord, décidons d’un nombre aléatoire de clones. Nous allons instancier entre deux et quatre clones pour l’icône. Nous allons utiliser la fonction randomInt () précédemment définie.
  2. Ensuite, pour chaque clone, nous allons utiliser la balise SVG à l’intérieur de notre bouton comme "modèle" et utilisez la fonction JavaScript cloneNode (true) pour le cloner dans une nouvelle variable. Nous allons également définir une taille entre 5 et 16 pour notre clone à l’aide de la fonction de générateur d’entiers aléatoires.
  3. Ensuite, nous allons ajouter nos clones au bouton, définir leur largeur et leur hauteur avec le nombre généré précédemment, et rendre leur position absolue afin de pouvoir les déplacer indépendamment du bouton.
  4. Une autre chose dont nous avons besoin est une transition pour nos clones, afin qu’ils ne se contentent pas de rentrer dans leur nouvel emplacement en cliquant.
  5. Maintenant, pour ajouter les transformations réelles qui déplaceront notre icône, nous allons devenir un peu fous. Nous voulons que nos clones se déplacent de façon aléatoire du centre de notre bouton vers l’extérieur. En utilisant une combinaison de nos fonctions randomInt () et plusOrMinus (), nous allons déplacer nos clones dans l’axe XY avec la propriété CSS translate3d. Nous allons également utiliser un "pirater", car notre transition ne s’appliquerait pas autrement. Donc, l’ajout d’une simple fonction setTimeout () va nous aider à y parvenir. En même temps, nous allons déplacer l’opacité à 0, faisant disparaître les clones.
  6. Suppression de nos clones. Nous devons nettoyer le DOM après avoir fini avec tout le jazz. Nous avons donc besoin d’une autre fonction setTimeout () qui va supprimer nos clones du DOM après une seconde.

generateClones (bouton) {
// 1. Générez des clones et parcourez le nombre défini
laissez clones = randomInt (2, 4);
pour (soit = ​​1; il <= clones; it ++) {
// 2. Récupère le clone du tag SVG dans une variable et génère une taille aléatoire
laissez clone = button.querySelector ("svg") .cloneNode (vrai),
taille = randomInt (5, 16);
// 3. Ajoutez notre clone au bouton et changez sa ‘largeur / hauteur / position
button.appendChild (clone);
clone.setAttribute ("largeur", Taille);
clone.setAttribute ("la taille", Taille);
clone.style.position = "absolu";
// 4. Ajoutez des transitions flashy
clone.style.transition =
"transformer 0,5 s cube-bezier (0,12, 0,74, 0,58, 0,99) 0,3 s, opacité 1 s atténuer 0,5 s";
// 5. Animez notre icône vers l’extérieur avec une fonction setTimeout pour que CSS soit conforme.
laissez animTimeout = setTimeout (function () {
clone.style.transform =
"translate3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Suppression des clones après 0,9 seconde
laissez removeNodeTimeout = setTimeout (function () {
clone.parentNode.removeChild (clone);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

C’est ça! Nous avons réussi jusqu’à la fin! Ci-dessous, vous trouverez l’exemple CodePen:

Voir le stylo
Bouton J’aime
par Andrei Băicuș (@abaicus)
sur CodePen.

Merci d’avoir vécu ça!

Autres options pour ajouter des micro-interactions à WordPress

Si l’écriture manuelle de code n’est pas entièrement votre truc, il existe en fait une poignée de plugins WordPress que vous pouvez utiliser pour obtenir des micro-interactions sur votre site sans avoir à vous soucier de la façon dont tout cela fonctionne sous le capot.

Tout d’abord, vous pouvez utiliser le L’animer! plugin pour animer à peu près n’importe quel élément de vos pages en utilisant CSS3.

Par exemple, vous pouvez ajouter un bouton ou un morceau de texte, puis le configurer pour l’animer d’une certaine manière en cliquant.

Voici un exemple de ce que le plugin peut faire – vidéo ��.


L’animer!

Auteurs): eLEOPARD Design Studios


100% Évaluations


40000 + installations


4.7.0Requires

Plus d’informations

animate-it.2.3.7.zip

Version actuelle: 2.3.7

Dernière mise à jour: 20 mars 2020


100% Évaluations


40000 + installations


4.7.0Requires

Page Plugin WordPress.org


L’animer!

Un autre plugin, et l’un des favoris de notre éditeur, est Shortcodes Ultimate.

Parmi une multitude de shortcodes différents, il y en a un pour des animations simples. Il y a quelques préréglages sur la façon dont l’animation doit se comporter, et vous pouvez mettre à peu près tout dans le bloc qui va s’animer.

Voici un exemple de bouton animé (remarque; l’animation ne fonctionne que la première fois qu’elle défile dans la fenêtre; si vous ne la voyez pas, actualisez la page):

Cliquez moi


Plugin WordPress Shortcodes – Shortcodes Ultimate

Auteurs): Vladimir Anokhin


98% Évaluations


800 000 + installations


WP 4.6 + Requiert

Plus d’informations

shortcodes-ultimate.5.9.0.zip

Version actuelle: 5.9.0

Dernière mise à jour: 24 mai 2020


98% Évaluations


800 000 + installations


WP 4.6 + Requiert

Page Plugin WordPress.org


Plugin WordPress Shortcodes – Shortcodes Ultimate

Ces deux plugins devraient vous donner plus qu’assez d’options pour animer certains éléments sur vos pages et les faire apparaître un peu plus lorsque l’utilisateur interagit avec eux. Bien sûr, vous ne voulez pas aller trop loin avec ceux-ci, mais donner à l’utilisateur un coup de pouce supplémentaire lorsqu’il interagit avec votre appel à l’action clé pourrait aider beaucoup.

Que pensez-vous des micro-interactions, envisagez-vous de mettre ce tutoriel sur les micro-interactions à bon escient et d’ajouter quelque chose à votre site? Faites le nous savoir dans les commentaires.

N’oubliez pas de rejoindre notre cours accéléré sur l’accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez réduire votre temps de chargement de 50 à 80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map