Les principes fondamentaux de l'animation CSS : maîtrisez les transitions et les cadres-clés

1. Introduction: Dans ce cours, je vais vous enseigner les bases des transitions CSS et des animations d'images clés. Vous allez ensuite prendre ces compétences et créer votre propre site web d'une seule page, qui contiendra des animations CSS qui non seulement ajoutent un élément dynamique à votre page, mais améliorent également l'expérience utilisateur. Je suis David et je suis un développeur web front-end de Norwich en Angleterre. J' ai plus de six ans d'expérience dans la construction de diverses applications numériques et sites Web pour un large éventail de clients internationaux. J' aime vraiment aider les autres à améliorer leurs compétences Web et leur donner l'occasion d'apprendre quelque chose plus aujourd'hui qu'ils ne l'ont jamais fait auparavant. Cette classe s'adresse à tout développeur qui a des connaissances de base HTML et CSS, mais qui veulent amener leurs sites Web au niveau supérieur. Maintenant, dans cette classe, j'utiliserai VS Code comme IDE de choix, mais vous pouvez utiliser tout ce que vous connaissez. Vous hébergerez également votre site Web sur GitHub Pages. Maintenant, ne vous inquiétez pas si vous n'avez jamais utilisé GitHub Pages auparavant, c'est absolument bien, je vais vous faire traverser le processus dans son ensemble, complètement gratuit. Avec ces compétences que vous gagnerez grâce à ce cours, vous serez en mesure d'offrir beaucoup plus en tant que développeur Web, vous soyez ou non indépendant ou que vous travailliez pour une entreprise, vos sites Web et applications se démarqueront complètement de la la foule. Outre les sites Web, les animations CSS peuvent être utilisées sur une variété de produits numériques, créant des applications, des infographies, des visualisations de données et des publicités numériques. À la fin de cette classe, vous serez un maître dans les animations CSS, et vous serez plus qu'à l'aise avec les transitions et les images clés. Sans plus tarder, commençons. 2. Le projet de cours: Le projet que vous allez construire est un site Web d'une seule page, qui contient un en-tête avec un menu de navigation, un pied de page, une section pour les images et une section avec des boutons. Je veux que vous montiez un site web basé sur qui est votre artiste musical préféré ou groupe. Même si vous allez vous concentrer sur les animations, il sera amusant pour vous d'inclure un peu de contenu quant à la raison pour laquelle ils sont votre artiste préféré. Peut-être inclure du texte sur vos chansons ou albums préférés. Mais ne passez pas trop de temps à vous soucier du contenu car les animations seront bien sûr le principal objectif du projet. Ce projet est un moyen parfait pour vous d'appliquer vos nouvelles compétences d'animation CSS trouvées à un site Web réel avec des composants qui pourraient bénéficier d'un certain style d'animation. Pour un projet réussi, essayez simplement d'inclure les concepts d'animation qui sont couverts dans cette classe. Bien sûr, vous obtiendrez des points bonus pour expérimenter ce qui est enseigné, alors n'hésitez pas à faire preuve de créativité. Les élèves devraient utiliser leur éditeur de code favori pour construire leur projet de classe. J' utiliserai du code VS, mais tous les autres éditeurs de code fonctionneront aussi bien. Vous allez déployer votre projet final sur les pages GitHub. Un compte GitHub est donc requis. Mais ne vous inquiétez pas, je vais vous montrer à quel point il est facile de configurer cela et pousser votre travail vers une page Web en direct pour tous à voir. 3. Pourquoi utiliser des animations ?: Maintenant, pourquoi utiliser des animations web du tout ? Eh bien, les animations peuvent aider à améliorer l'expérience utilisateur, et elles peuvent fournir des commentaires sur les actions de l'utilisateur. Les animations peuvent aider l'utilisateur à s'orienter autour de l'interface. Les animations sont également très utiles pour attirer l'attention sur une partie particulière d'une page, sorte qu'elles peuvent donner des indications visuelles à un utilisateur qu'une action est nécessaire. animations peuvent indiquer qu'il y a un élément qui est cliquable ou peut-être qu'il y a plus à voir. Bien sûr, les animations peuvent ajouter du mouvement à un site web statique et sans vie, ce qui lui donne un design esthétiquement agréable, et elles sont vraiment bonnes pour établir un mouvement avec l'utilisateur. Ils peuvent également être utilisés comme un outil de marque, donnant à l'utilisateur une expérience mémorable et amusante. Maintenant, je veux que vous preniez ces choses en considération lorsque vous créez des animations pour votre projet, et assurez-vous que vos animations servent un certain but afin qu'il y ait le bon équilibre entre esthétique et fonctionnalité. 4. Transitions CSS: Lorsque vous survolez ce bouton, vous pouvez voir que l'opacité change. Cependant, l'animation est instantanée. Ajoutons une propriété de transition. Transition, propriété, et c'est l'opacité que nous aimerions faire passer. Maintenant, ça ne suffira pas. Nous devons indiquer la durée de la transition. Il s'agit de la durée de la transition. Je vais faire cette 0,2 seconde. Là, nous pouvons voir l'animation est beaucoup plus lisse. Nous pouvons également modifier la fonction de synchronisation de transition. Maintenant, il y aura une leçon dédiée à la fonction de synchronisation et aux différents types d'assouplissement que vous pouvez choisir. Ce que cela fait, il affecte le style de la transition elle-même, sorte que la vitesse de transition du début à la fin. Nous pouvons également ajouter un retard à notre transition. Faisons une seconde. Lorsque je survole le bouton, transition commencera seulement après une seconde. Maintenant, c'est une longue façon d'écrire nos transitions. Nous pouvons écrire ceci en raccourci de la même manière. Transition, puis vous pouvez choisir l'opacité, nous pouvons mettre dans notre durée, nous pouvons mettre dans notre fonction de synchronisation, et nous pouvons également ajouter notre retard. Maintenant, si nous supprimons cela, cette transition devrait fonctionner exactement de la même manière. C'est le cas. Maintenant, une chose à retenir, lorsque vous utilisez le raccourci de transition, vous devez inclure la durée avant le délai. Mais que diriez-vous si nous voulons choisir plus d'une propriété de transition ? Disons que nous voulons changer la couleur du texte en, disons, bleu sur le vol stationnaire. Nous pouvons simplement écrire la couleur 0,5 seconde, disons l'est, et nous ne mettrons pas de retard. Pour séparer les propriétés multiples, nous utilisons juste une virgule comme ça. Voilà, plusieurs propriétés. Maintenant, il est utile de connaître certaines propriétés que vous ne pouvez pas faire de transition. Je vais juste supprimer la couleur bleue du texte et de notre transition. Ce que vous ne pouvez pas faire, si vous vouliez masquer le bouton sur le survol, vous ne pouvez pas faire l'affichage, aucun. Il montre l'affichage ici. Cela ne fonctionnera tout simplement pas. Il disparaît, mais il n'y a pas de transition entre les deux. C' est parce que nous avons display none et display block. Il est allumé ou éteint, soit il est là ou pas. n'y a pas de juste milieu. C' est pourquoi si vous voulez faire disparaître le bouton en douceur, vous pouvez utiliser l'opacité, juste comme ça. Que diriez-vous si vous voulez déplacer la position du bouton ? Maintenant, au lieu d'utiliser gauche, haut, droite, bas, par exemple, comme ceci, je recommande fortement, et c'est un truc personnel, pour utiliser transformer, traduire. Maintenant, je vais déplacer ceci vers la droite de 10 pixels afin que nous puissions utiliser TranslateX. Faisons 10 pixels dans notre transition. Nous allons nous assurer que le transformateur est sélectionné. Je vais juste supprimer le délai ici. Nous pouvons voir la transition instantanément. On y va, gentil et lisse. Maintenant, la raison pour laquelle je préférerais utiliser transform, traduire lors du déplacement dans l'élément, c'est que vous obtiendrez de meilleures performances que d'utiliser gauche, bas, haut, droite, etc. Que diriez-vous si vous vouliez changer la taille du bouton ? Maintenant, au lieu de sélectionner la largeur et la hauteur, encore une fois , à cause de meilleures performances, je vais utiliser transform, scale. Maintenant, au départ, je vais faire ce 0.8 de sa taille d'origine. Là, vous pouvez voir qu'il est légèrement plus petit. Ensuite, en survolant, ramenons l'échelle à un, comme ça. Maintenant, un autre conseil personnel, lors de la transformation de l'échelle, si vous voulez la rendre plus grande en vol stationnaire, surtout quand il s'agit d'images, essayez de ne pas aller au-dessus d'un. Ceci est pour assurer la clarté et la qualité de l'image ne sera jamais pixélisée. Ce n'est pas si mal lorsque vous utilisez un bouton HTML ici. Mais si c'était une image et que nous disons de définir l'échelle à deux, cela serait pixellisé maintenant. C' est pourquoi j'ai commencé sur 0,8 ou figure en dessous d'un, puis mis à l'échelle jusqu'à un. Ce ne sont que quelques choses à considérer lorsque vous commencez votre projet de classe. 5. Fonctions de timing: Ici, nous avons un bouton où j'ai défini une largeur maximale de 250 pixels, puis en survol, je vais augmenter la largeur à 300 pixels. Maintenant, notre transition affecte bien sûr la largeur maximale. J' ai fait cela, j'ai une seconde qui est très lent, cependant, est utile pour cet exemple. Ensuite, la fonction de synchronisation est réglée pour faciliter, et la facilité est les fonctions de synchronisation dont nous parlerons dans cette leçon. Facilité nous donnera une belle animation, où il accélère au milieu, puis ralentit à la fin. Quelles sont les autres valeurs ? Eh bien, regardons quelques exemples de plus, et essayons de faciliter l'entrée. Maintenant, ease-in démarre lentement et s'accélère à la fin. Essayons d'alléger, ce qui nous donnera le contraire. Nous allons commencer rapidement, et ralentit à la fin. Jetons un coup d'oeil à linéaire. Maintenant, linéaire nous donnera exactement la même vitesse tout au long de l'animation. Nous avons une transition cohérente vers l'extérieur. Maintenant, quelque chose de légèrement différent. Jetons un coup d'oeil aux étapes. Entre parenthèses, nous devons lui donner un nombre, alors combien d'étapes nous voulons et comment cela ressemblera-t-il ? Vous voyez qu'il y a trois étapes pour atteindre 300 pixels, puis revenir à nouveau. Si nous changeons cela à six, aura six étapes uniformément espacées. On y va. Cependant, nous ne sommes pas limités à ces fonctions d'assouplissement, parce que nous pouvons trouver les nôtres, et pour ce faire, nous pouvons utiliser les valeurs de bézier cubique. A l'intérieur des parenthèses, nous pouvons donner certaines de nos propres valeurs. Je vais lancer des nombres aléatoires ici, 0.45, mettons ceci ici, 0.9, et voyons ce que cela nous donne. Rien de trop spécial. Jouons autour d'autres valeurs et voyons ce que cela nous donne, et cela est revenu à la fin. Il s'agit de notre fonction d'accélération de transition personnalisée. Les valeurs de bézier cubique sont composées de quatre valeurs individuelles, x1, y1, x2 et y2. Maintenant, ces nombres peuvent être autre que x1 et x2, qui doit être un nombre compris entre zéro et un. Maintenant, ces valeurs sont basées sur une courbe qui donne le style d'animation. Maintenant, en regardant l'assouplissement linéaire, nous savons que la vitesse est constante partout, représentée par cette ligne droite sur le graphique. Le rapport de sortie et le rapport de temps sont cohérents dans 0, 0, 1 et 1. Mais qu'en est-il de différentes fonctions de synchronisation comme la facilité ? Eh bien, nous savons que la facilité s'accélère au milieu comme le montre cette forte inclinaison sur la courbe, puis se relâche à la fin, où nous pouvons voir la courbe devenir plus horizontale au fur et à mesure qu'elle se termine. Maintenant, si vous voulez expérimenter avec vos propres valeurs de bézier cubique, voici un conseil pratique si vous êtes dans Google Chrome. Je vais juste faire apparaître les outils de développement ici, et mettre en surbrillance le bouton. Maintenant en transition ici, si nous ouvrons cela, nous pouvons voir notre fonction de synchronisation de transition et nous avons nos valeurs personnalisées ici. Maintenant, si nous passons juste au-dessus de cette icône ici, vous pouvez voir qu'il est écrit éditeur de bézier cubique ouvert. Si nous cliquons dessus, nous pouvons voir ici une courbe pratique que nous pouvons changer en déplaçant ces poignées et nos valeurs commencent à changer. Cela affectera notre bouton ici. Il y a aussi quelques presets sur le côté ici. Nous cliquons sur cela, rapide, linéaire dans. Cliquez sur un peu plus de facilité que nous pouvons savoir. Linéaire et lente entrée. De retour et de retour, essayons ça. C' est une belle petite aire de jeux pour vous d'expérimenter avec vos fonctions de synchronisation de transition, très pratique. 6. Cadres de clés CSS: Maintenant, les transitions sont géniales lorsque vous voulez animer entre deux états différents. Mais qu'en est-il si votre animation doit avoir plusieurs étapes ? Eh bien, c'est là que les images clés CSS entrent en jeu. Comment écrire des images clés ? Sous nos styles, nous pouvons les écrire dans la même feuille de style, et vous pouvez bien sûr séparer vos images clés dans son propre fichier CSS d'animation si vous le souhaitez. Donc c'est @keyframes, et puis le mot suivant est le nom de votre animation, et cela peut être tout ce que vous voulez. Je vais juste appeler cette animation de forme. À l'intérieur des images-clés, vous devez spécifier une position de départ et une position de fin, où les animations de et d'où s'anime. Pour cet exemple, nous allons animer du rouge au bleu. Cela seul ne marchera pas. Vous devez indiquer à vos images-clés quel élément vous souhaitez animer. On aimerait animer la place. À l'intérieur du carré, le nom de l'animation est le nom que nous avons choisi ci-dessous, qui est l'animation de forme. Ensuite, similaire à nos transitions, vous devez spécifier une durée. Disons deux secondes. On y va, anime toutes les deux secondes. Maintenant, que se passe-t-il si vous souhaitez animer plus d'étapes entre le début et le vers. Eh bien, essentiellement, ils sont construits à partir de pourcentages. Nous commencerions à zéro pour cent, puis l'animation se termine à 100 pour cent. Ajoutons un point médian de disons, 50 pour cent. Changeons la couleur de fond en vert, et changeons la forme de notre carré. Donnons-lui un rayon de bordure de 50 pour cent. On y va. J' ai changé en cercle à 50 pour cent, puis à 100 pour cent. Maintenant, vous remarquerez que le carré ne se termine pas en bleu alors que l'animation se termine en bleu, mais qu'il revient ensuite à son état original de rouge. Maintenant, si vous voulez garder cela en bleu lorsque l'animation se termine, faisons-le. Il existe une autre propriété appelée animation-remplissage mode. Nous aimerions que ce soit vers l'avant, alors voyons comment cela fonctionne, et voilà, le carré est fini en bleu. Maintenant, ajoutons quelques propriétés d'animation. Déplaçons maintenant notre forme. Déplaçons cela, tournez les pixels vers la droite, et 200 pixels vers le bas. On y va, en diagonale. Ajoutons une autre étape. Donc 25 pour cent, ajoutez une autre couleur. Sauvons le jaune, et déplacons cela vers la droite de 200 pixels, et voyons à quoi cela ressemble. C' est assez rapide, je vais devoir changer ça à quatre secondes. Ce serait bien d'avoir un troisième pas où ce carré, fondamentalement, nous aimerions qu'il se déplace à droite, puis vers le bas, puis à gauche ici, puis revenir à sa position d'origine. Ce que je vais faire, c'est que je vais faire ce 75 pour cent, et je vais transformer : traduire la position à zéro, 200 pixels. Voyons à quoi ça ressemble. On y va. Dans cet exemple, nous n'avons pas besoin de spécifier 100 % car l'état d'origine est 100 %. C' est essentiellement zéro et 100 %. Une fois l'image-clé atteint 75 %, que le carré soit en bas ou que la forme soit en bas, elle reviendra à son état d'origine. Il y a une autre propriété que je voudrais vous montrer, animation-itération-count. Si nous définissons cela sur infini, comme vous pouvez le deviner, l'animation continuera pour toujours. Maintenant, je vais juste commenter ça, donc ça ne me donne pas de mal de tête. On y va, ça s'est arrêté. Maintenant, comme je vous ai montré avec la propriété de transition, il y a une façon abrégée d'écrire ceci, juste de l'animation. Nous pouvons spécifier l'animation de forme, puis notre durée, puis notre mode de remplissage. Vous pouvez inclure des fonctions de synchronisation de la même manière, une propriété d'accélération comme celle-ci. Si je les supprime, cela devrait fonctionner exactement de la même manière, nous y allons. Il y a une belle propriété d'assouplissement ajoutée à elle aussi. Maintenant, tout comme la propriété de transition, vous pouvez ajouter une durée de retard. Vous pouvez spécifier quand l'animation commence. Disons deux secondes. Après deux secondes, notre forme s'anime, et là vous l'avez. Vous pouvez voir à quel point il est facile de créer une animation à plusieurs étapes. 7. Configuration du projet: Commençons à travailler ensemble sur notre projet. Maintenant, avant d'obtenir le codage, jetons un oeil à la configuration du projet afin que vous ayez tout ce dont vous avez besoin. Je vais vous montrer étape par étape comment je vais mettre mon site web d'une seule page de mon artiste préféré. Mais au lieu de copier mon code exactement, assurez-vous de prendre ce que vous apprenez et de l'appliquer à votre propre site Web. Vous pouvez bien sûr utiliser les transitions et les animations que je vais vous montrer dans mon projet, mais je vous exhorte à venir avec les vôtres. Maintenant, à l'intérieur d'un dossier de projet, vous devez créer un fichier HTML d'index pour votre balisage de page Web, un fichier style.css, et ceci est pour vos styles animations annuelles, et un dossier pour vos images. Maintenant, en ce qui concerne les images, j'ai simplement puisé le mien à partir d'Internet, ce que je ne vous recommanderais pas normalement. Cependant, comme vous suivez un tutoriel et ne créez pas de site Web de production, vous n'avez pas besoin de vous soucier des problèmes de copyright. Pour héberger votre projet sur une page pour que tout le monde puisse voir et pour que moi et d'autres puissent vous donner des commentaires, je vais vous montrer comment héberger votre projet sur GitHub Pages. C' est complètement gratuit et c'est facile à faire. Maintenant, si vous n'avez pas encore de compte GitHub, rendez-vous sur github.com et inscrivez-vous. Maintenant, j'ai déjà un compte, donc je ne vais pas passer par tout le processus, mais suivez simplement les instructions à l'écran et vous serez réglé. Le moyen le plus simple de pousser votre travail vers GitHub est de télécharger et d'utiliser GitHub Desktop. Vous pouvez le télécharger depuis desktop.github.com. En utilisant GitHub Desktop, vous serez en mesure de prendre des instantanés de chaque étape de votre travail, puis à la fin, vous aurez tout votre travail prêt à héberger sur GitHub Pages. Je vais vous montrer comment faire ça tout au long du projet. Lorsque GitHub Desktop est opérationnel, assurez-vous que vous êtes affecté en tant que compte GitHub. Si vous n'êtes pas sûr que vous l'êtes, suffit d'aller à Préférences en haut ici, et là je peux voir que je suis en effet connecté à mon compte. Maintenant, créons un nouveau référentiel pour votre projet. Pour ce faire, accédez à Fichier et Nouveau référentiel. Maintenant nom du référentiel, je vais appeler ce Deftones Transitions, et vous devez sélectionner le chemin pour lequel vous souhaitez créer votre repo. Je vais cliquer sur « Créer un projet ». Maintenant, si je viens de déplacer cela ici, vous pouvez voir qu'il a créé le dossier Deftones Transitions ici. Maintenant, vous devez vous assurer que vos fichiers que nous avons créés au début de cette leçon sont contenus dans ce dossier de repo. Je vais juste les déplacer à l'intérieur, et ils sont là. Maintenant, nous allons juste augmenter la taille de ceci à nouveau. Maintenant, nous avons le nom de notre dépôt ici, et vous pouvez voir dans l'onglet Changements, nous avons de nouveaux fichiers à valider, et ce sont en effet nos fichiers que nous avons créés plus tôt. Maintenant, pour les valider, nous devons écrire un petit message pour aller avec le commit, et je vais juste appeler ce commit initial. Je vais juste le confier à la branche principale, comme ça. Maintenant, nous devons publier notre travail jusqu'à GitHub, et pour ce faire, nous pouvons simplement cliquer sur « Publier le dépôt ». Maintenant, assurez-vous d'être heureux avec le nom. Je vais juste cliquer sur « Publier ». Dans quelques secondes, il devrait être poussé vers le haut. Super. Pour vous assurer que notre travail est sur GitHub, vous pouvez cliquer sur « Voir sur GitHub » ici. Ensuite, tant que vous êtes connecté à votre compte GitHub, vous pouvez voir votre nom d'utilisateur ici, le dépôt que nous venons de créer et vos fichiers. Super. Vous devriez maintenant avoir tout ce dont vous avez besoin pour commencer à coder votre projet. 8. Projet - HTML: Maintenant, si vous ouvrez votre fichier HTML dans votre éditeur de code préféré, je vais utiliser VS Code ici, commençons à travailler sur notre balisage. Maintenant, évidemment, je vais coder mon site web d'une seule page. Mais jetez un oeil à ce que je fais et voyez comment vous pouvez appliquer les choses que vous apprendrez sur votre propre site. Dans VS Code pour modeler un fichier HTML, je peux juste appuyer sur le point d'exclamation et l'onglet. En utilisant le plugin Emmet dans VS Code, cela me donne un joli fichier HTML de base. Ma page sera sur les Deftones, donc je vais changer le titre là-bas. Nous devons lier à une feuille de style. Encore une fois, lien vers notre feuille de style et le href sera style.css qui est en effet notre feuille de style ici. Tout d'abord, nous allons envisager de construire un en-tête. Maintenant, je vais créer un div à l'intérieur de l'en-tête avec une classe de wrap. Maintenant, envelopper que je vais utiliser sur tous mes composants afin qu'ils aient tous la même largeur. Jetons un oeil à h1. C' est un joli gros en-tête avec le nom de votre artiste préféré. Ensuite, je vais construire un menu de navigation. À l'intérieur, il y aura une liste non ordonnée, et il y aura des éléments de liste à l'intérieur. Je vais donner à chaque ancre, une classe de nav__ancre. Ceux-ci n'ont pas été effectivement cliquer n'importe où comme il juste pour la présentation, donc je vais juste ajouter un # là. Faisons un faux sur la page, copiez et collez ceux sur. Nous allons en avoir un sur le blog, et nous allons avoir une page de contact. Assez sur la navigation. Maintenant, en dehors de l'en-tête, je vais inclure une section d'image. Donnons une div ou une section d'image en fait. Je vais faire ces étiquettes de section, puis à l'intérieur, nous allons utiliser l'enveloppe. Créons un div avec la classe de l'image section image-conteneur. Puis à l'intérieur, nous aurons une belle image de fond. Parce que c'est une image d'arrière-plan, je n'utiliserai pas la balise image. Je vais le faire dans un div. Je vais donner à cela une classe d'image-section__image. Maintenant, pour l'image d'arrière-plan, nous allons lier à ici en utilisant une balise de style en ligne. Background-image, URL, et puis nous devons lier à notre première image, et je vais les avoir enregistrés dans le dossier images, donc images/image-1.png. En dessous, créons une balise de paragraphe. Nous pouvons créer un peu de texte et je vais donner à cela une image-section__text de classe. Que devrions-nous écrire ici ? Je vais écrire sur mes chansons préférées par eux. Bien sûr, le contenu que vous incluez peut être tout ce que vous voulez. Tu n'as pas à me copier. Si j'écris la chanson 1, mettons ceci sur une nouvelle ligne, donc j'utiliserai une balise de pause là. Kimdracula est une de mes chansons préférées par eux, donc nous allons l'inclure. Maintenant. Je vais inclure quelques autres images. Copions ce div, collez-le dans quelques fois plus. Ce que nous devons changer ici, c'est que nous inclurons ma deuxième image. Puis chanson préférée numéro 2, j'aime quelque chose appelé hexagramme. Image numéro 3, changeons ça. Ma chanson préférée numéro 3. Et autour de la fourrure. Maintenant, avant de passer à autre chose, je vais ouvrir ça dans un navigateur web. Vous pouvez juste trouver le fichier HTML, double-cliquez dessus, et cela s'ouvrira dans votre navigateur. Ce que je vais utiliser est de passer en direct ici dans VS Code. Ceci est une extension, si vous n'avez pas déjà. Nous recherchons un serveur en direct, c'est ce top ici. Maintenant, ce que cela me permet de faire est, quand nous commençons à travailler sur ce CSS, vous verrez les mises à jour immédiatement à l'intérieur du navigateur. Je vais juste ouvrir un serveur en direct, et jetons un oeil dans le navigateur. Rétrécir ça. On y va. Il y a notre premier contenu ici. Allons passer à autre chose. Maintenant, je veux inclure une section avec quelques textes, mais quelques boutons pour que nous puissions jouer avec quelques animations de vol stationnaire sur les boutons. Je vais créer une section ici avec une classe de groupe de texte. Encore une fois, nous allons inclure la pellicule. Ensuite, à l'intérieur de l'enveloppe, créons un text-group__conteneur, qui contient tout, puis réfléchissons à nos textes. Nous utilisons un paragraphe, text-group__text. Touchez la croix. Ensuite, incluons quelques informations sur le groupe. Je vais écrire sur d'où ils viennent. Deftones est un groupe de metal alternatif originaire de Sacramento en Californie. Premier bit de contenu. Maintenant, incluons un bouton sur lequel nous pouvons animer, survoler. Je vais utiliser deux sections ici. Deux sections de texte, qui auront deux boutons. Appelons ce bouton, nous allons lui donner une classe de bouton-double. Donnons ça un href. Cela ne clique nulle part, donc nous allons juste utiliser un # là. Ensuite, l'appel à l'action peut être, cliquez ici. Comme je l'ai dit, je vais le faire deux fois, alors copions le conteneur, collez-le ci-dessous. Alors que puis-je écrire sur le groupe ? Ce que je peux faire, c'est peut-être parler des membres du groupe. Les membres sont Chino, qui est au chant, Stephen, qui est à la guitare principale, Sergio, qui est à la basse, Abe, qui est un batteur génial, puis Frank, qui est le DJ et sur les touches. Super. Un peu de contenu textuel. Le deuxième bouton est déjà bon pour aller. Comme mentionné, vous n'avez pas à me suivre exactement. Vous pouvez changer la façon dont le nav fonctionne, changer les liens de navigation. Vous n'avez pas besoin d'avoir une section d'image, ou si vous le faites, elle n'a pas à venir avant la section de texte et les boutons. Fondamentalement, la mise en page est à vous de choisir. Quand nous arrivons aux animations, encore une fois, c'est à vous de décider. Je vais vous montrer différents styles et techniques que vous pouvez utiliser, alors essayez d'appliquer ce que vous apprenez à votre propre page à votre manière. Ces deux boutons partagent la même animation de transition. Je voudrais un troisième bouton qui a sa propre animation unique, donc je vais ajouter une section ici. Je vais lui donner une classe de section de texte. À l'intérieur, nous aurons notre pellicule. Ensuite, nous allons avoir un paragraphe texte-section__text. Inclure un peu plus de contenu. Parlons de mon album préféré. Ils ont produit neuf albums studio, avec White Pony étant mon préféré. Je peux faire défiler ça pour que vous puissiez voir. Comme je l'ai dit, je vais inclure un autre bouton. Donnons à cela une classe de bouton-main, et l'idée de ce bouton autonome est, j'utiliserai des animations d'images-clés au lieu de la transition. Mais nous reviendrons à cela dans la section suivante ou la section suivante lorsque nous faisons quelques animations. Ce que j'aimerais que vous incluiez dans votre page, c'est un pied de page. À l'intérieur de votre pied de page, à l'intérieur de mon enveloppement, je voudrais que vous incluiez juste un paragraphe pour dire que le site est fait par vous. S' il vous plaît, mettez votre nom ici. Je vais mettre le mien. Le site est par moi. Excellent. Je vais sauver ça, et nous pouvons voir le contenu sur la droite ici. Super. Une chose avant de partir est, je vais inclure des polices personnalisées dans ma page, que je vais obtenir de Google Fonts. Ce que je peux faire, c'est augmenter cette taille. Allons à Google Fonts ici. Maintenant, nous sommes dans Google Fonts. Vous pouvez jeter un oeil. Nous pouvons faire défiler et voir s'il y a des polices que vous souhaitez inclure. Maintenant, je sais déjà que je veux utiliser la police alata. Lorsque vous en avez trouvé un qui vous plaît, si vous cliquez simplement dessus et puis sélectionnez le style, puis sur la droite ici, il vous donnera un joli lien que vous pouvez inclure dans votre fichier HTML. Je vais copier cela et l'inclure juste au-dessus de la feuille de style. Juste comme ça. Enfin, avant de passer à notre feuille de style, je vais juste engager mon travail ici. En utilisant GitHub Desktop, vous pouvez voir que l'index est le père sur lequel nous avions travaillé, et c'est tout notre nouveau contenu. Si tu veux pousser ton travail, tu peux faire la même chose que moi. Je vais juste écrire un message ici, le balisage des fonctionnalités. Je vais commettre ceci, et ensuite je vais pousser ça à GitHub. Passons à nos styles. 9. Projet - CSS: Une fois que vous êtes satisfait de votre balisage, ouvrez votre feuille de style, style.css et commençons à ajouter des styles à une page. Dans le mien, je vais tout sélectionner et juste pour inclure quelques styles de base. Je vais inclure la taille de boîte, border-box et je vais inclure la famille de polices, qui inclura la police Google que j'ai choisie. Supprimons toutes les marges. Retirons tout le rembourrage. Maintenant, ma classe de wrap, je veux maintenant rendre ma largeur maximale de tous les composants à 940 pixels. Ajoutons un rembourrage latéral de 20 pixels. Je vais afficher, flex tous mes composants. Alignons les éléments à centrer. Justify-contenu doit être espacé entre. Bien sûr, la marge, faisons zéro en haut, puis auto à gauche et à droite, sorte que tout est centré. Nous pouvons voir nos polices fonctionner bien là. Maintenant, commençons à descendre la page. Tout d'abord, je vais inclure l'en-tête. Je vais donner à cela une couleur de fond d'une couleur dorée. Maintenant, je vais vous encourager à choisir vos couleurs, alors ne copiez pas les miennes. Rembourrage en haut et en bas de 20 puis zéro gauche et droite. Tout d'abord, jetons un oeil à ce nav. Je vais afficher flex les enfants et justify-content, ajoutons un peu d'espace entre. Maintenant, nous allons cibler chaque élément de la liste. Supprimons les points de balle. Type de style de liste, aucun, puis donnons-leur à tous une marge à gauche de 50 pixels. On y va. Vous pouvez voir que tout est espacé maintenant. Maintenant, pour les ancres elles-mêmes. Pour toutes les ancres, je vais supprimer le soulignement, donc la décoration de texte, aucun. Ensuite, pour le nav ancre eux-mêmes. Laissez-moi juste vérifier que c'est la bonne classe. Oui, c'est ça. Nav ancre, faisons ces noirs. Donnons-lui une taille de police, disons, 20 pixels. Notre position, relative. On se forme bien. Passons à notre section d'images. Classe de section d'image. Je vais vous assurer qu'il y a une couleur de fond de noir. Section Image, puis nous avons la classe de conteneur d'image qui est à l'intérieur. Vous allez leur donner un débordement de cachés. Cela deviendra évident lorsque nous commencerons à travailler sur la transition ou l'animation de vol stationnaire sur ces images quant à la raison pour laquelle j'inclut le débordement caché. Nous reviendrons à ça. Comme j'ai trois images, nous allons nous assurer qu'elles sont toutes un tiers, donc 33,3 pour cent de largeur. Maintenant, pour les images elles-mêmes, l'image section__ image. Affichons, fléchissons ces images, alignons les éléments. Assurez-vous qu'ils sont au centre et la même chose pour justify-content, assurez-vous qu'ils sont au centre. Donnons-leur quelques dimensions. Hauteur, je vais faire ça 400 pixels. Alors donnons-leur un rembourrage. Rien en haut et en bas, mais 20 pixels à gauche et à droite. Maintenant, l'arrière-plan lui-même à l'image d'arrière-plan. Je ne veux pas les répéter. Faisons en sorte qu'ils soient centrés, donc 50 pour cent. Ensuite, pour la taille, je veux que l'image couvre cet espace comme ça. Toutes les images n'apparaissent pas. Laisse-moi juste vérifier si tout est correct. Image deux et trois. C' est pourquoi. Nous avons PNG pour un, JPEG, JPEG pour deux et trois, c'est pour ça qu'ils ne sont pas jumelés. JPG et il y a nos autres images. Maintenant, le plan pour le texte de l'image. Ma chanson préférée ici. Mon idée est que lorsque nous survolons les images, je veux que le texte apparaisse. Actuellement, ce n'est pas là. Ensuite, nous passons au-dessus, il apparaît. Donnons à ce texte quelques styles initiaux mais nous ne nous inquiétons pas des animations avant plus tard. Je vais donner au texte une couleur de fond légèrement noire mais avec la moitié de l'opacité. C' est clair. Zéro, zéro, zéro pour le noir, puis 0,5 pour 50 pour cent opacité et ensuite nous allons faire le texte lui-même pour être blanc f f f taille de police, faisons ce 20 pixels, texte aligné pour être centré et vous pouvez le voir là. Au départ, nous ferons l'opacité zéro et nous augmenterons l'opacité à une lorsque nous ajouterons la transition. Nous reviendrons à ça. Le texte ci-dessous, un autre texte de groupe de texte. Donnons-leur une marge inférieure de 25 pixels. Le conteneur de groupe de texte, que j'ai oublié. Le conteneur [inaudible] donne à cela un remplissage de 50 pixels tout autour. C'est mieux. Maintenant, les boutons eux-mêmes. Tous les boutons contiendront des styles similaires. Arrière-plan, nous allons supprimer cela et puis nous allons ajouter notre propre bordure de bordure solide de deux pixels, puis noir. Assurez-vous que le curseur est bien un pointeur. Augmentons la taille de la police à 18 pixels. Donnons aux boutons un rembourrage de cinq pixels en haut et en bas, 20 pixels à gauche et à droite et je vais m'assurer que la position est relative. Ils ont l'air bien. Encore une fois, nous reviendrons aux animations de vol stationnaire pour ces boutons. Passons à cette section de texte. Section de texte, couleur d'arrière-plan de, donnons-lui un gris de e e e. rembourrage haut et bas de 50 pixels et zéro gauche et droite. Je vais devoir enlever ce côlon là. C'est mieux. Maintenant, donnons quelques styles à l'enveloppe à l'intérieur de cette section de texte. C' est légèrement différent, donc l'affichage flex. La raison pour laquelle c'est différent est que je veux que la direction flexible soit dans une colonne, pas une ligne. Maintenant, ils sont au-dessus de l'autre, le texte et le bouton. Maintenant, alignons les éléments à centrer et nous ferons de même pour justifier que le contenu soit également centré. Le texte lui-même, section__ texte. Donnons notre marge inférieure de 25 pixels et le texte aligné pour être centré. Ça a l'air bien. Maintenant, le bouton dans le cadre de cette section de texte, donc bouton principal, je crois que nous avons donné une classe de. Je ne veux pas voir le gris derrière les boutons, alors donnons à cela une couleur de fond de blanc. Puis enfin, si nous faisons défiler vers le bas. Jetons un coup d'oeil à ce pied de page. Le pied de page, je vais faire ce noir pour s'adapter à la conception, mais [inaudible] du noir. Encore une fois, un peu comme notre nav, je vais donner la couleur de cette belle couleur d'or. Ça correspond. Faites défiler vers le bas Ouais, maintenant c'est le style là-bas. Vous pouvez ajouter un peu de rembourrage tout autour. Donnons un rembourrage de 20 pixels. Je vais m'assurer que l'alignement du texte est au centre. Augmentons simplement la largeur. Voyons comment cela se forme. Ouais, ça a l'air bien. C' est les styles de base ou les styles statiques de mon site web d'une seule page. Maintenant, au fur et à mesure que vous progressez dans les leçons, nous allons commencer à ajouter des transitions et des animations d'images clés pour vraiment pimenter ça un peu. Je veux, bien sûr, juste engager mon travail à GitHub. Je vais le faire maintenant. Nous pouvons voir dans le fichier d'index, c'est là que j'ai changé les images de PNG à JPEG et ensuite notre feuille de style est, bien sûr, tous nos styles. Je vais inclure un message de validation de fonctionnalité, ajouter des styles, commit et push. 10. Projet - Barre -: Je vais commencer à ajouter des animations de transition à mes éléments. Ne copiez peut-être pas exactement ce que je vais vous montrer dans les prochaines leçons. Mais pensez aux techniques que je vous montre et venez avec quelques-unes de vos idées, vos propres idées pour votre site web d'une seule page. Tout d'abord, je vais penser à animer ces éléments de navigation. Je pense que ce que je voudrais faire est que lorsque vous survolez ces éléments de menu, une ligne noire sort de dessous chaque mot. Pour ce faire, je vais d'abord créer un pseudo élément sur le nav_anchor. Ce sera notre élément sous-jacent. Donc nav_anchor après. Maintenant, j'aimerais que la couleur soit noire. Faisons la hauteur de deux pixels. Assurez-vous que la largeur est 100 pour cent de son parent, ce qui sera le mot ci-dessus. Comme il s'agit d'un pseudo élément, vous devez toujours inclure du contenu, où il peut s'agir d'une chaîne vide. Maintenant, nous devons positionner cet absolu, ce que nous pouvons faire parce que le parent est positionné relatif et vous pouvez maintenant voir les lignes qui s'y dessinent. Maintenant, réfléchissons à l'endroit où nous aimerions le placer. Bas moins cinq pixels donc il est en dessous, puis à gauche, nous voulons nous assurer que c'est zéro donc est à gauche du mot. Ça a l'air bien. Je pense que maintenant nous pouvons commencer à penser à notre animation de vol stationnaire. Maintenant, sous tous nos styles statiques, je vais juste écrire un commentaire ici qui peut être survolée et ensuite toutes nos animations et transitions peuvent s'asseoir ci-dessous. Sur le nav_anchor, lorsque nous survolons, nous voulons cibler l'élément after. Maintenant, pour forer cela, je vais utiliser l'échelle de transformation x, ce qui signifie horizontalement, donc gauche et droite, et nous voulons définir ceci sur toute la largeur, qui sera un. Ce que cela signifie, c'est que lorsque nous revenons à nos styles statiques, nous devons nous assurer que l'élément after, l'échelle x est initialement réglé à zéro, et qu'ils disparaissent. Maintenant, quand il s'agit de notre transition, nous voulons cibler la transformation parce que c'est ce que nous ciblons ici. Je vais le faire plus de 0,2 secondes et j'utiliserai l'assouplissement de ease-in-out. Voyons maintenant comment cela s'anime. Super, du centre. Maintenant, si vous vouliez animer, disons de gauche à droite, c'est là que vous pouvez utiliser l'origine de la transformation car cela indiquera où se trouve la position de départ. Si je mets cela à 0, 0, donc x et y, vous pouvez voir que la ligne s'insère de gauche à droite. Mais j'aime que ça bouge du centre vers l'extérieur. Donc, je vais juste supprimer ceci. Super. Maintenant, lorsque vous êtes satisfait de vos animations, n' oubliez pas de valider votre travail sur le bureau GitHub et de pousser votre travail sur votre compte GitHub. 11. Projet - Images: Maintenant, je vais réfléchir à la façon dont j'aimerais animer ces images, qui devraient avoir du texte qui apparaîtra devant elles une fois que vous passez le curseur sur les images. Maintenant, sur le texte de l'image, l'opacité est actuellement définie sur zéro. Si nous avons juste mis ceci sur un, vous pouvez voir le texte là-bas. Maintenant, pour une raison quelconque que le texte n'est pas là où je le veux, il devrait être au centre ici. J' imagine qu'il y a quelque chose de mal avec notre balisage, et en effet il y en a, ce texte devrait être à l'intérieur de l'image div. Laissez-moi juste mettre à jour ceci, et la dernière. Si nous gardons cela, nous y allons, beaucoup mieux, c'est là que le texte devrait être. Super. Je vais remettre l'opacité à zéro parce que c'est ce que nous allons animer. Une fois que nous sommes ici, faisons la transition, et c'est l'opacité que nous ciblons, aussi les 2,2 secondes, et notre facilité de sortie. Maintenant, nous allons cibler l'image. Image-section_image, donc c'est ce que nous allons utiliser pour passer le curseur et introduire le texte. Alors est en effet les textes de la section image qui seront animés dans. On a juste besoin de remettre l'opacité à une seule. Il y a un smoothie qui arrive. Ce que je voudrais faire avec le texte, c'est peut-être augmenter la taille de celui-ci ainsi que l'opacité. Ce que je vais faire est sur le vol stationnaire, échelle de transition suivante, et définir ceci sur un. Ensuite, quand nous arrivons au texte, définissons l'échelle initiale à 0,8. Plus petit, puis augmente en taille. La raison pour laquelle ce n'est pas animant dans la façon dont je voudrais, c'est que cela devrait être une transformation, pas une transition. Ensuite, nous devons également ajouter la transition ici même. Transformez 0,2 secondes, facilitez la sortie. L' opacité et la transformation sont ciblées. Imaginez que ça ne marche toujours pas parce que je pense que ici. Oui, j'ai dit transition au lieu de transformation. C' est une erreur facile à faire, alors ne faites pas la même erreur. Transition et transformation sont toutes deux très différentes. On y va. Il y a notre transformation, la transition. Aussi, je pense que je voudrais ajouter un peu de mouvement à ces images. Encore une fois, j'affecterai l'échelle de cette image. En transition, je vais cibler l'échelle de transformation. Transformez 0,2 seconde, et facilitons simplement l'entrée et la sortie. Ensuite, pour l'image elle-même, quand on survolera, donc je vais juste copier ceci. Nous pouvons transformer l'échelle parce que la valeur par défaut est un. Je vais définir ceci sur 1.1, puis voir à quoi ressemblent les images. Super. Travailler parfaitement. Maintenant, j'ai maintenant dit dans une leçon précédente, que vous ne devriez pas transformer l'échelle au-dessus de 1.0 surtout quand il s'agit d'images. Maintenant, la raison pour laquelle je le fais ici est parce que je sais la taille réelle de ces images est beaucoup plus grande que les dimensions initiales de l'ensemble, et c'est pourquoi les images ne sont pas pixélisées. Ça a toujours l'air bien. Maintenant, une fois que vous avez engagé votre travail, passons à la prochaine transition. 12. Projet - Boutons: Maintenant, je vais réfléchir à la façon dont j'aimerais animer ces deux boutons sur le vol stationnaire. Ma pensée initiale est en vol stationnaire, je voudrais qu'un fond d'or apparaisse du bas vers le haut dans une belle transition en douceur. Pour que cela fonctionne, je vais créer un pseudo-élément sur ces deux boutons et qui formera notre fond d'or. Pour cibler ces deux boutons et seulement ces deux boutons, pas le troisième, je dois me rappeler quelle classe nous leur avons donnée. C' était un bouton double. On va l'utiliser. Juste sous notre classe de bouton, créons ce pseudo après élément. Je sais que je veux que le fond soit ma belle couleur dorée. Nous devons inclure du contenu s'il s'agit d'un pseudo-élément. Je voudrais que la hauteur soit finalement 100 pour cent et il y a un point-virgule là. Assurez-vous qu'il remplit l'espace des boutons, gauche doit être zéro. Pour ce faire, nous devons nous assurer que la position est définie sur absolue, alors top peut être zéro. La largeur devrait être de 100 pour cent, parce que nous remplissons l'espace. Nous y allons, et nous pouvons voir l'arrière-plan qui apparaît là. Cependant, nous ne pouvons plus voir notre texte. Par conséquent, nous devons définir l'index z pour être moins un, donc il est assis derrière. Ça a l'air bien. Qu' est-ce qu'on va faire la transition ? Ce sera l'échelle de transformation cette fois. Pourquoi ? Parce que ce sera le mouvement vertical. Je vais mettre ça à zéro, et ça disparaît. En ce qui concerne la transition, nous pouvons cibler la transformation 0,2 seconde ease-in-out. Vous pouvez voir qu'il y a un thème commun ici quand il s'agit de la durée de transition. J' aime bien utiliser 200 millisecondes, c'est juste une préférence, et j'aime utiliser ease-in-out comme assouplissement. Mais je vous exhorte à simplement expérimenter vos propres chiffres et vos propres fonctions de synchronisation et à voir ce qui fonctionne bien pour vous. Faites défiler la page jusqu'à notre section de vol stationnaire. Le bouton double classe sur le vol stationnaire, nous allons cibler l'élément après et nous allons définir l'échelle de transformation y, pour être un. Comment ça a l'air ? Ça a l'air plutôt cool. Cependant, comme je l'ai dit, je ne voulais pas vraiment qu'il apparaisse du centre vers l'extérieur, je voulais qu'il apparaisse du bas. Là encore, c'est là que l'origine de la transformation peut entrer. Décaler l'origine de la transformation pour être zéro et zéro. Notez que cela apparaît de haut en bas, nous nous rapprochons. Ce que j'ai vraiment besoin de définir, c'est la partie y ou transformer les origines. origine du transfert x est zéro, y est actuellement zéro, cela devrait être 100 pour cent, donc il commence à partir du bas. On y va. Il y a mes deux boutons complets. Si vous allez animer les boutons vous-même, peut-être avoir à réfléchir à la façon dont vous pouvez animer éventuellement la bordure. Vous pouvez modifier la largeur de celui-ci, ou la couleur, ou peut-être en survol, vous pouvez ajouter une ombre, ou vous pouvez changer la couleur du texte, ou affecter l'opacité. Il y a de nombreux aspects du bouton que vous pouvez passer en survol. Avoir un jeu et voir ce qui fonctionne bien pour vos boutons. Je vais juste confier mon travail à GitHub. Dans le bureau GitHub, nous pouvons voir que les styles, voici notre bouton doublé après les styles, et le survol ici. Donc il suffit d'écrire un message de validation, fonctionnalité, deux-points, transitions de bouton, je vais valider ceci, et puis pousser cela vers le haut. 13. Projet - Cadres clés: Dans cette leçon, je vais vous montrer comment je vais utiliser les animations d' images clés pour animer le bouton final. Maintenant, mon idée pour mon animation d'images-clés est que lorsque vous passez la souris ici, la largeur de la bordure augmente en taille, et je vais le faire jusqu'à ce que vous déplaciez la souris loin. Construisons cette animation d'images-clés. Pendant que nous sommes dans la section hover, faisons @keyframes et j'appellerai ceci BorderGrow et cela peut être nommé tout ce que nous voulons. À zéro pour cent, le style de départ aura une bordure, deux pixels solides, et ce sera noir. Donc, 000. Ce ne sera pas vraiment la frontière que je vais animer, mais ce sera en fait l'ombre de la boîte. Cela donnera l'illusion de la frontière grandissante en taille. L' ombre de la boîte sera 000, donc le pixel ne sera pas là, et ce sera noir. Puis l'image-clé finale, donc un 100 pour cent. Donc, l'étape finale de l'image-clé. La bordure restera telle quelle, mais l'ombre de la boîte sera 00, mais elle sera étalée deux pixels par deux pixels et sera toujours noire. Ensuite, lorsque nous survolons le bouton principal, donc le bouton de tiret principal du deux-points survolent. Ajoutons l'animation, qui s'appelle BorderGrow. Je vais le faire assez lentement en une seconde. Je veux juste que la fonction de synchronisation soit linéaire, donc je n'utiliserai pas ease-in-out et je veux que cela s'anime pour toujours. Eh bien, jusqu'à ce que nous retirions la souris du bouton, voyons à quoi cela ressemble. Il est presque là, mais comme vous pouvez le voir quand l'ombre de la boîte est à sa pleine largeur, elle revient à son état d'origine, ce que nous ne voulons pas. Ce que je voudrais arriver, c' est de grandir en taille, puis de faire une transition vers l'arrière, sans casser en arrière. Nous pouvons le faire en utilisant le mot alternatif. Cela alterne en avant et en arrière entre l'animation. Juste comme ça, c'est génial. Pendant que je suis ici cependant, je voudrais faire la couleur de fond pour être de l'or. Cela signifie que nous avons juste besoin d'ajouter une belle transition ici pour couleur de fond 0.2 seconde, ease-in-out. Magnifique. Ça a l'air bien. Finalement, engageons notre travail. Caractéristique. Bouton, image-clé, animation, et je vais faire un message, et nous allons valider ce travail et ensuite pousser ce travail vers le haut. Jetons un dernier coup d'oeil à l'aspect de mon site web d'une seule page. C' est nos transitions de navigation, j'ai quelques belles images et du texte, quelques transitions de survol de bouton, et une animation d'image clé finale. Comme dans les leçons précédentes, je vous encourage à expérimenter vos propres styles, vos propres transitions et vos propres animations d'images-clés. Essayez de ne pas copier exactement ce que j'ai fait et de voir ce que vous pouvez trouver. En fait, quand il s'agit de vos animations d'images clés, vous pouvez inclure beaucoup plus d'étapes que ce que j'ai fait ici. Je n'ai qu'une étape de finition de façon de départ, mais vous voudrez peut-être avoir quelques étapes intermédiaires avec votre animation d'image clé. Mais jouez et voyez ce qui vous satisfait. 14. Partager votre projet: Une fois que vous avez validé et poussé votre dernier travail sur GitHub Desktop, accédez à votre compte sur github.com, puis cliquez dans votre référentiel. Donc la mienne s'appelle deftones-transitions. Ensuite, vous verrez vos fichiers source. J' ai mon dossier d'images, nous avons mon fichier d'index, mes styles ici. À droite, on peut voir qu'il y a eu huit commits. Si je clique dessus, vous pouvez voir la liste des commits des leçons précédentes, et la plus récente était l'animation de l'image-clé bouton. C' est tout bon. C'est tout présent et bien. Quand il s'agit de publier votre page sur GitHub Pages, vous devez aller dans les paramètres. Ensuite, nous allons faire défiler vers le bas de la page. Vous verrez que GitHub Pages est ici. Mais il dit, je ne suis pas encore en mesure de publier ceci parce que je dois m'assurer que le dépôt est public et qu'il est actuellement défini sur privé. En dessous, il est dit, changez la visibilité du référentiel. Ce référentiel est actuellement privé. Je vais changer ça, et je le rendrai public. Pour confirmer que c'est ce que je veux faire, il est dit, s'il vous plaît tapez et puis mon nom de dépôt, donc mon nom complet, puis deftones-transitions. Pour confirmer, je comprends, et je veux changer la visibilité du référentiel. Faisons ça. Maintenant, c'est mis au public. Si nous faisons défiler vers le bas jusqu'à GitHub Pages, vous pouvez voir quelques options ici. Tout d'abord, la source. Nous devons dire à GitHub quel nom de branche nous voulons que GitHub Pages regarde. Nous avons poussé notre travail à la branche principale, donc c'est ce que je vais sélectionner ici. Puis est dans la racine du répertoire, sorte que nous pouvons laisser cela tel quel et je vais cliquer sur Enregistrer. Une fois que cela permet, faisons défiler vers le bas dans la zone et il dit, votre site est prêt à être publié, et il nous donne une belle URL ici. Si nous vérifions cela, il peut ne pas être encore prêt, mais c'est parce que GitHub Pages prendra quelques minutes pour publier votre dernier morceau de travail. Ouvrons ceci, ouvrons une nouvelle page dans un nouvel onglet, désolé, nous allons cliquer dessus. En fait, tout est publié et prêt à partir. Toutes nos animations sont ici, toutes nos transitions sont ici, et voici l'URL de mon site web publié sur une seule page. Je vous encourage à partager l'URL de votre site Web GitHub Pages publiées et peut-être écrire sur les transitions que vous avez ajoutées en ajoutant tout cela à la section de votre projet de la classe. Maintenant, cela me permettra de vous faire part de vos commentaires et suggestions. Je vous encourage également à interagir avec les autres étudiants, afin que vous puissiez vous offrir un soutien mutuel. Bien sûr, si vous avez des questions ou avez besoin de conseils, alors s'il vous plaît laissez-moi savoir. Je suis évidemment heureux de vous aider. 15. Résumé: Félicitations énormes pour avoir terminé ce cours. Vous avez réussi à suivre avec moi et à créer votre propre site web d'une seule page plein de transitions et d'animations. Vous devriez maintenant avoir une compréhension assez décente des différents aspects des animations CSS et des transitions que vous pouvez maintenant utiliser dans vos futurs projets web. Espérons que vous ferez exactement ça. Vous serez maintenant en mesure d'offrir beaucoup plus en tant que développeur web et être en mesure de démontrer vos nouvelles capacités dans la création de sites Web dynamiques. Enfin, je veux juste dire un grand merci de vous être inscrit à ce cours. Ça veut vraiment dire beaucoup. Sans votre soutien, je ne serais pas en mesure de faire du contenu comme celui-ci. J' espère vraiment que vous avez appris quelque chose de ces leçons. J' espère vraiment que vous avez apprécié ce cours, et si vous l'avez fait, veuillez prendre le temps de laisser une revue de cours, cela fait vraiment une grande différence. Cela étant dit, merci beaucoup, maintenant allez de l'avant et codez.