Améliorer votre site web : Comment animer un bouton J'aime

1. Introductions: Qu' est-ce qui rend un site Web bien paraître ? Comment utiliser les animations pour mieux interagir avec votre public ? Ce qui est impliqué dans la conception et l'interface utilisateur intuitive. Bienvenue dans Apprendre en faisant : animer un bouton comme. Dans ce cours, nous allons apprendre comment faire un simple bouton en animation. Salut, je m'appelle Jude sub et je fais des sites web et de l'interface utilisateur slick depuis plus de huit ans. Nous allons apprendre ensemble sur la façon d'utiliser HTML, CSS et JavaScript pour créer des micro-interactions amusantes et une interface utilisateur cool. nous aurons terminé, nous aurons appris à utiliser des icônes de polices personnalisées, à écouter les clics de l'utilisateur et à manipuler le DOM pour afficher nos animations sympas. Cela dit, vous devriez avoir une connaissance très basique de HTML, CSS et JavaScript. Mais ne vous inquiétez pas, je vous guiderai tout au long de la route. Avec ça, commençons. Faisons de l'interface utilisateur génial l'écraser. 2. Téléchargement de l'éditeur VS-Code: Avant de commencer, téléchargeons un éditeur de texte. J' aime VSCode, vous verrez ici, j'en ai un disponible. Allons de l'avant et ouvrez notre navigateur et sur la barre de recherche, allons taper le code visuel studio. Maintenant, allez-y et cliquez sur ce lien. Maintenant, j'utilise Windows, mais si vous utilisez Mac ou tout autre système d'exploitation, hésitez pas à télécharger les binaires qui conviennent au système d'exploitation, alors cliquez ici et là vous l'avez. Maintenant, allez-y et cliquez sur « Télécharger » et le téléchargement devrait apparaître. Je ne vais pas passer par ce processus d'installation parce que j'en ai déjà un disponible. Encore une fois, n'hésitez pas à faire sauter le long et à me rejoindre, nous utilisons Visual Studio Code. On se voit dans la vidéo suivante. 3. Configuration de Live Server: Maintenant que nous avons installé le code Visual Studio, allons de l'avant et personnalisez-le. Une des façons de le faire est de trouver ce petit bouton appelé Extensions. Nous allons en ajouter un appelé Live Server. Sur la recherche, tapez Live Server, et en haut à droite ici, allons de l'avant le bouton d'installation. Cela peut prendre un peu, mais une fois qu'il est terminé, vous voulez appuyer sur le bouton de rechargement juste ici. Ce que Live Server fait, c'est qu'il nous permet de développer localement et de voir les choses changer instantanément sur notre navigateur. Plutôt nifty. 4. Comment démarrer un serveur Live: Super. Maintenant que nous avons installé Live Server, allons de l'avant et voyons comment cela fonctionne. Allons l'explorer. Vous remarquerez qu'il demande notre dossier d'espace de travail. Alors allons-y et ajoutez-en un. J' ai déjà créé un dossier de partage de compétences dans mes documents afin que vous puissiez avoir la structure que vous voulez, mais je vais l'utiliser et il dit que c'est skillshare. Je vais ajouter un nouveau fichier et nous allons appeler ce index.html. Maintenant, VS Code est équipé d'Emmet. Alors utilisons-nous ça. Nous allons taper html:5 et appuyer sur « Entrée ». Maintenant, nous avons une plaque d'ébullition HTML carry qui nous est donné gratuitement. Allez-y et tapez maintenant, Bonjour, Monde et appuyez sur « Enregistrer ». Nous allons cliquer sur maintenant « Afficher » palette de commandes, puis ouvrir en direct et vous remarquerez qu'il est déjà auto-rempli pour nous. Serveur, ouvrez avec Live Server. Vous remarquerez que nous avons maintenant un serveur en direct de notre développement local. Laissez-moi minimiser ce très rapide, juste un peu plus. Super. Une chose que vous pouvez faire est de taper, Ceci est un test, et appuyez à nouveau sur « Enregistrer ». Notez que nous voyons les changements apparaissent instantanément sans avoir à appuyer sur « Rafraîchir », c'est une fonctionnalité astucieuse. Laissez-moi aller de l'avant et tapez h2, C'est cool. Appuyez sur « Enregistrer ». Vous remarquerez que Live Server reprend les modifications, et c'est pourquoi je recommande vraiment d'utiliser Live Server pour le développement local. 5. Ajouter un bouton de base: Pour le premier projet, je veux passer un peu plus de temps décrire mon processus de pensée lorsque j'aborde un problème de conception. Une chose que nous savons est qu'un bouton similaire est techniquement une case à cocher. Allons de l'avant et faisons juste un HTML de base. Nous allons faire est de se débarrasser de cela et je tape moins de signe, entrée, type égal guillemet, « case à cocher ». Nous allons le fermer en ajoutant une barre oblique puis un signe supérieur à. Maintenant, si nous appuyons sur « Enregistrer » maintenant, vous remarquerez que tout ce que nous obtenons est une case à cocher, mais ce n'est pas assez descriptif ; quoi sert la case à cocher ? Allons de l'avant et ajoutons, Comme nous, puis appuyez sur « Enregistrer ». Maintenant, nous savons pourquoi la case à cocher est là, et bien qu'elle soit très basique, les prochaines vidéos, nous allons la styler et l'ajouter quelques fonctionnalités. 6. Étude de cas de Button: Pour notre premier projet, nous allons commencer très simple. Nous allons regarder le bouton Like d'Instagram comme une inspiration, quand vous cliquez dessus, il devient rouge et il remplit le cœur. C' est une très bonne rétroaction visuelle. Mais que faire si vous pouviez réellement l'animer et le pulser lorsque l'utilisateur clique dessus. C' est ce qu'on va essayer de faire. Nous allons utiliser HTML, CSS et JavaScript de sorte que lorsque l'utilisateur clique dessus, il pulse. Si vous n'avez touché aucune de ces technologies, cela pourrait sembler un peu intimidant. Mais ne t'inquiète pas, c'est pour ça que je suis là. Je te vois dans la prochaine vidéo. 7. Ajouter une fiche de styles externe: Super. Maintenant que nous avons notre normaliseur, nous pouvons maintenant avoir un CSS qui est cohérent sur tous nos navigateurs. Une autre chose que nous devons faire maintenant est d'ajouter le style. Allons-y et faisons-le. Vous remarquerez que nous allons créer un nouveau fichier et nous appellerons le style.css. Dans notre style.css, je vais aller de l'avant et faire une règle simple pour html et cela va changer la couleur en tomate. Très bien, et après, nous allons appuyer sur « Enregistrer » et passer à notre Index.html et je vais copier ceci et nous devons nous assurer de ne pas l'appeler normaliser, mais plutôt style.css. Une fois que vous faites et appuyez sur « Enregistrer », vous remarquerez que les couleurs changent en fait à la tomate. Vous remarquerez que j'ai réellement mis style.css sous normalize.css. C' est vraiment important parce que vous voulez normaliser réellement normaliser d'abord, puis nos styles. 8. Utiliser des polices pour des icônes: Dans quel design, il y a plusieurs façons de faire les choses. Une des façons dont nous aurions pu ajouter un cœur était par CSS, mais je vais juste créer un nouveau dossier et nous allons utiliser une police. Créons un répertoire de polices, et vous remarquerez qu'il n'y a rien ici, et nous avons l'intention d'en obtenir un de j'aime mon Fontello. Allez-y et tapez Fontello dans votre barre de recherche. Vous remarquerez qu'il faut un peu à charger. Il y a une police impressionnante, et vous remarquerez ces deux-là. Il y a un cœur et le cœur vide. Je vais aller de l'avant et sélectionner ces deux-là et le télécharger. Je n'ai pas besoin de télécharger l'ensemble Font Awesome, et vous remarquerez qu'il est à l'intérieur du lecteur zip, et je vais aller de l'avant et ouvrir via l'Explorateur Visual et cliquez avec le bouton droit sur ceci et appuyez sur Reveal dans Explorer. Vous remarquerez ici que nous avons un répertoire similaire dans le même sens. Je vais aller de l'avant et les faire glisser dans mon dossier de polices, et vous remarquerez qu'il est là. Revenons au partage de compétences et appuyez sur CSS. Dans notre lecteur zip, je vais frapper le dossier CSS, et j'ai juste besoin de celui-ci ici et de le déplacer vers vous, CSS, et vous remarquerez que j'ai tous les trois maintenant. Parfait. Laissez-moi y aller et fermer ces deux-là, et vous remarquerez sur le répertoire des polices qu'il est en fait vide. Assurez-vous d'appuyer sur ce bouton d'actualisation, et voilà. Tout est rempli correctement. Allons de l'avant et ouvrons notre Fontello CSS. Vous remarquerez tous ces CSS que nous obtenons gratuitement. Il fait référence aux fichiers de polices et il est en panne. Ce sont les classes dont vous devrez vous souvenir lorsque nous déclarons réellement les icônes du cœur. Revenons à index.html et nous allons devoir le référencer car c'est un CSS externe. Je vais aller de l'avant et l'inclure par l'abréviation Emmett, et c'est dans le répertoire courant, le dossier CSS, et le nom est fontello.css, laissez-moi aller de l'avant et appuyez sur save. Tu ne verras rien immédiatement. Nous allons avoir besoin d'ajouter une balise I et aller de l'avant et taper dans la classe égale deux-points. Nous allons appeler ce coeur de tableau de bord d'icône, et encore une fois, c'est des références au fontello.css, et vous remarquerez ici que nous avons tous les trois. Maintenant, si nous voulons le vide, nous allons juste aller de l'avant et faire le coeur icône oops vides, mal orthographié ce T, enlever l'autre T, frapper sauver, et voilà. Nous voyons les deux cœurs, le plein et le vide. Encore une fois, j'ai choisi la route de la police. Il y a beaucoup d'autres façons que vous auriez pu faire cela, mais j'ai senti que la route des polices était la plus facile. Cool. On se voit dans la prochaine. 9. Utiliser CSS pour « l'impulsion » un cœurs: Jusqu' à présent, beaucoup de ce que nous avons fait, c'était juste un travail de configuration. Mais maintenant, nous sommes prêts, nous avons Fontello, nous avons notre normalisé, et nous avons notre style.css. Allons de l'avant et supprimons le type d'entrée. Ce que nous voulons faire maintenant, c'est créer un conteneur. Créons un div et créons une classe appelée conteneur. Super. Ce que nous allons faire, c'est déplacer ces gars dans notre conteneur div qui est un peu formaté. Ça a l'air un peu plus propre. Ok, répare ce petit peu, et voilà, bien, génial. Maintenant, tout est aligné et nous allons frapper sauver. Vous remarquerez que l'index a l'air bien. Nous avons créé une classe de conteneur, alors passons à style.css, et supprimons ceci. Ce que nous allons faire est de créer cette classe de conteneur et d'ajouter un affichage, un flex. Une fois que vous appuyez sur Enregistrer, vous remarquerez qu'une tomate rouge a disparu, mais nous allons aller de l'avant et aussi changer notre cœur d'icône, sorte que lorsque vous rajoutez la couleur tomate, vous remarquerez que nous avons le cœur rempli et c'est à l'intérieur du cœur icône et remarquez nos couleurs là, grande. Maintenant, nous allons ajouter un effet pulsant. Créons une classe appelée pulse, et nous allons ajouter l'animation et le nom sera pulse. La durée, nous allons faire 0,3 seconde, et nous allons le faire fonctionner infiniment. On peut enlever tout le reste ici, super. Ce que nous voulons faire, c'est créer cette animation d'impulsions, ajouter une image clé aux images clés, et nous allons l'appeler impulsion. Oups, débarrasse-toi de cette période. A l'intérieur de nos accolades, nous allons ajouter un pourcentage. Commençons par zéro pour cent, et fondamentalement, nous allons ajouter transform : scale. On va le mettre à un, n'oubliez pas le point-virgule. On va finir pour la même transformation. Allons de l'avant et ajoutons la transformation à nouveau et la mettre à l'échelle à un. Mais entre les deux, nous allons avoir à 50 pour cent. Allons de l'avant et ajoutons 50 pour cent, et nous allons modifier cela un peu. Ajoutons la transformation à nouveau, l'échelle des deux-points, et cette fois nous allons faire 1.3 point-virgule. Vous allez remarquer que je viens de frapper Save, mais rien ne se passe même avec mon animation de pouls. Nous avons mis à l'infini, mais remarquez notre classe ici pour l'œil, il s'appelle Icône coeur, mais ce que nous devons faire est d'ajouter du pouls à elle. Faisons ça, et là vous l'avez, c'est palpitant maintenant, c'est parce que nous avons ajouté la classe d'impulsions à notre balise i. Allons-y et faisons-le maintenant dans notre index. Je vais ajouter du pouls, frapper Save, et voilà, vous avez un cœur pulsant. Cela va être une leçon clé pour l' animation dans les prochaines vidéos. On se voit dans la prochaine. 10. Comment manipuler le DOM: La prochaine chose que nous voulons faire est de manipuler le DOM. Par DOM, je veux dire le modèle d'objet de document. On va vouloir cibler ce petit cœur. Comment on fait ça ? Eh bien, nous allons avoir besoin de JavaScript. L' une des rares façons de le faire est de cliquer avec le bouton droit de la souris et « Inspecter » ou Ctrl+Maj+I ou Commande+Maj+I, et vous remarquerez qu'il y a ce bouton de console. Cela nous permet de taper une cible JavaScript. Allons d'abord comprendre. Nous appelons cette icône coeur, et nous allons cliquer sur « Console » et nous allons taper document.QuerySelector. Assurez-vous que le S est en majuscule. Paren ouvert, citation unique, point parce que c'est une classe que nous allons cibler, icon-coeur, et fin citation et parenthèses. Vous voyez, nous avons maintenant une référence à notre classe de coeur icône. Ce sera la base de la façon dont nous pouvons utiliser JavaScript pour modifier le DOM. Vous pouvez même aller de l'avant ici et cliquer sur la petite flèche et vous verrez que le DOM entier est répertorié. Ce que nous voulons faire est de supprimer la pause. Je vais le faire directement et vous remarquerez que l'animation s'arrête. Maintenant, nous savons comment référencer le DOM. Ce sera crucial pour la prochaine vidéo où nous utiliserons réellement JavaScript pour la supprimer. 11. Ajouter un Javascript externe: Cette fois, je veux parler de la façon dont nous pouvons ajouter JavaScript à l'extérieur. Auparavant, nous avons parlé de la manipulation DOM et de la façon dont nous pouvons le faire via JavaScript. Nous allons commencer par supprimer la première icône. Maintenant, il nous reste avec le cœur vide. Nous allons vouloir ajouter une balise de script, mais nous allons l'ajouter juste au-dessus de la balise body de fin. Element a à nouveau cela disponible, mais vous pouvez le taper tout le chemin. Avant d'aller de l'avant et de taper quelque chose, nous allons réellement avoir besoin de créer un dossier. On va l'appeler Scripts. Dans Scripts, nous allons créer un nouveau fichier et nous allons nommer ce main.js. Je vais faire quelque chose de vraiment simple, console.log ('c' est un script java ! ') et je vais sauver ça. Nous allons retourner à notre index.html. Maintenant que nous avons un endroit que nous pouvons référencer, nous allons regarder le répertoire courant et il est à l'intérieur de Scripts. Il s'appelle main.js et appuyez sur « Enregistrer ». Rien ne devrait changer. Je vais frapper « Console ». Voilà, tu y vas. Nous avons maintenant une référence à ce main.js parce que nous l'avons ajouté dans notre index.html. 12. Toggling un cœur de base: Dans cette leçon, nous allons rassembler tout ce que nous avons appris jusqu'à présent en un seul. instant, nous voulons que ce cœur se mette à basculer. Actuellement, il est vide, mais si nous supprimons le modificateur vide, nous avons maintenant le cœur plein. Maintenant, on pourrait certainement cibler le coeur de l'icône vide, mais ça va nous causer des problèmes. J' aimerais créer un coeur js-heart. Ce que cela nous permet de faire est de cibler sans se soucier de l'icône de classe réelle. Nous sommes de retour à notre js principal, je vais me débarrasser de l'instruction console et obtenir une référence à notre HeartDom égal document.QuerySelector ( 'js-heart ') ; encore une fois, je vais le déplacer juste un peu. La raison pour laquelle nous faisons cela est que nous voulons obtenir une référence au HeartDom, et je vais aller écrire un commentaire à ce sujet. Super. La prochaine chose que nous voulons faire est d'ajouter un écouteur d'événement. Écrivons un commentaire rapide, créons un écouteur onclick, puis nous allons ajouter le HeartDom, et encore une fois nous avons la référence de celui-ci. Allez-y avec le .on-click= (event) =>, qui est égal à plus grand que signe, puis une accolade bouclée, et si vous ne le saviez pas, c'est la façon ES6 d'écrire une fonction. La prochaine chose que nous allons avoir besoin est une variable appréciée, pour vérifier si l'utilisateur l'avait aimé ou pas auparavant. Allons de l'avant et créons ça dès maintenant. Laissez aimé égal à faux. Fondamentalement, nous l'initialisons à faux. Allons écrire un commentaire à ce sujet. On va dire initialisé à faux. Probablement aide à être un peu plus descriptif, initialisé comme faux. Plus précisément, c'est lorsque l'utilisateur n'a pas sélectionné. Super. Maintenant que nous avons créé la variable like, lorsque l'utilisateur clique dessus, nous voulons que la variable like retourne réellement. Comment on a fait ça ? Nous ajoutons le point d'exclamation et la variable aimé à nouveau, fondamentalement une façon fantaisie de basculer le similaire. Gardez cela à l'esprit que c'est un petit moyen de retourner une variable. Comme vous pouvez le voir ici, j'ajoute le point d'exclamation qui signifie fondamentalement le contraire de ce qu'il est actuellement. Ensuite, nous allons vérifier si aimé est réglé sur une valeur véridique. Nous allons avoir Target.ClassList. Assurez-vous que le L est en majuscule .remove ('icon-heart-vide') ; encore une fois, cela va le retourner afin que nous supprimions l'iconheart. Mais remarquez la cible ici, je vais vraiment définir ça. Nous aurons target= événement, à partir de l'objet événement, point CurrentTarget, le T en majuscule pour Target. Le CurrentTarget contre la propriété de l'objet d'événement que nous avons transmis et nous allons faire un const car il ne changera pas. Soyons un peu plus descriptifs. Cette cible est essentiellement ce que nous avons cliqué. Nous le signons ici. Allons écrire quelques commentaires à ce sujet. C' est ce que nous avons cliqué. Super. Encore une fois, nous utilisons une cible pour supprimer fondamentalement l'ancienne icône et ajoutons une nouvelle avec ClassList. ajouter et maintenant nous devons définir la classe que nous utilisons, qui est iconheart et grand. Nous avons enlevé le vide et nous ajoutons le rempli. Il nous faut maintenant le contraire. Faisons d'autres accolades à l'intérieur. Nous allons en fait copier ces deux lignes et les coller ici et je devrais juste retourner la suppression dans l'annonce. Faisons ça. Supprimer devient maintenant ajouter et ajouter devient supprimer. Une autre chose que j'aime faire est d'être plus cohérent. Déplaçons la fonction de suppression vers le haut et l'annonce se trouve en dessous. Maintenant, c'est cohérent avec les déclarations précédentes. Juste pour m'assurer que nous comprenons ce qui se passe, je vais écrire quelques commentaires. Pour le premier cas, nous enlevons le cœur vide si vous le souhaitez, et ajoutons le cœur plein. Nous allons faire le contraire lorsque l'utilisateur ne l'a pas aimé. Allez-y et collez-la ici et changez ça en plein cœur. Si nous n'aimons pas, nous voulons ajouter le cœur vide. Parfait. Juste pour un examen rapide à nouveau, base de la variable appréciée, nous allons fondamentalement basculer les coeurs et c'est ce que nous venons de faire. Rafraîchissons et, là, ça marche. Maintenant, ce n'est pas vraiment bon feedback parce que je veux vraiment que ce curseur pour vous montrer un doigt de pointeur. Ce que nous allons faire, c'est que nous allons créer une classe cardiaque qui comprend essentiellement un pointeur de curseur. Allons faire ça. Je vais taper Iconheart et commencer par une accolade bouclée. En fait, laissez-moi aller avec coeur et nous allons taper pointeur de curseur et cela nous permet de revenir à notre fichier indexé et nous allons ajouter dans notre classe cardiaque. Chaque fois que nous le retournerons, nous allons voir un pointeur de curseur, comme ceci. Parfait. Maintenant, c'est vraiment bon retour car maintenant un utilisateur peut savoir, si je survole, je peux réellement le basculer. 13. Animer le cœurs en utilisant JavaScript: Maintenant que nous sommes capables de basculer un cœur, comme ça, ce que nous voulons vraiment faire est de le faire pulser une fois qu'un utilisateur clique dessus. Allons de l'avant et sautons sur notre main.js. La façon simple de faire les choses est vraiment d'ajouter la classe d'impulsions. Faisons ça maintenant. Vous pourriez être tenté d'aller de l'avant et de retirer la classe d'impulsions quand elle n'est plus légère. Mais cela va nous donner un effet légèrement indésirable. Regarde ça. Je vais cliquer sur « Enregistrer » et revenir à notre navigateur. Ce n'est pas ce qu'on veut. Nous ne voulons pas qu'elle pulsation éternelle, nous voulons cliquer dessus une fois et avoir une impulsion. Ce que nous allons faire est d'aller de l'avant et d'enlever le pouls que nous pensions allait l'enlever après un contrairement. Au lieu de cela, nous allons commencer avec le HeartDom et joindre, et ajouter un EventListener, et nous allons écouter une fin d'animation. Une fois l'animation terminée, nous voulons que le cœur supprime la classe d'impulsion. Allons de l'avant et passons dans l'événement via la fonction flèche, et ce que nous allons faire est d'aller de l'avant et de cibler l'objet événement. Ensuite, nous allons vouloir accéder à la cible actuelle de l'objet d'événement, et ce que nous voulons faire est de supprimer la classe d'impulsions. Faisons cela, .ClassList.remove, et nous allons taper dans impulsion parce que c'est la classe que nous voulons supprimer du DOM. Super. Allons de l'avant et commentons cela. Tapons dans supprimer la classe d'impulsions une fois qu'elle se termine. Super. Appuyons sur « Enregistrer » et vérifions. Attends, qu'est-ce qui se passe ici ? Eh bien, si vous revenez à notre style.css, vous remarquerez que notre classe d'impulsions s'est en fait définie à l'infini. Allons et supprimez cela, enregistrez et essayez-le encore une fois. Parfait. Il pulsait exactement une fois. Lorsque vous regardez l'inspecteur DOM, vous remarquerez que clignote rapidement la classe d'impulsions, puis se retire lui-même, et c'est parce que nous attachons l'EventListener au HeartDom, écoutant la fin de l'animation. Ce sera la base de beaucoup de nos animations à l'avenir. Bon travail sur le premier projet. 14. Conclusion: Ce tutoriel d'animation était assez simple. Cependant, les principes de ciblage d'un dôme, d' ajout d'un écouteur d'événement pour l'animation se terminent et d'écoute l'interaction d' un utilisateur comme un clic peuvent être utilisés pour créer des animations complexes. J' espère que cela vous a été utile.