Les animations CSS

1. Bienvenue au cours !: Avec autant de sites Web époustouflants et certains moins aussi époustouflants , il peut souvent être difficile de faire en sorte que votre site Web se démarque de la foule. ce faire, vous pouvez ajouter des animations à votre texte comme un titre de page ou tout autre texte de titre. Nous ne voulons pas en faire trop et tout animer , mais un texte accrocheur peut vraiment attirer l'attention de l'utilisateur. Vous trouverez ici des exemples de ce que nous allons créer dans cette classe en utilisant HTML et CSS. Ensemble, nous allons créer 10 exemples que vous pourrez facilement appliquer à de vrais projets par la suite. Avec tous ces textes émouvants et animations d'apparence complexe, ces animations d'apparence complexe, ils pensent qu'ils sont vraiment complexes à construire. Eh bien, en fait, tout ce que vous voyez ici est assez simple la plupart n'ayant besoin que de quelques lignes de CSS pour créer l'animation. En fait, nous allons souvent écrire plus de CSS pour que notre texte ressemble à ce que nous voulons et nous l'utiliserons pour l' animation elle-même. Vous apprendrez toutes les techniques utiles telles que les images-clés, les modes de facture, la durée des animations, les retards, l'effet d' assouplissement, le calcul de valeurs à l'aide de variables, combinaison d'animations, de polygones et de trajectoires de clips, et aussi quelques CSS généraux. Ce cours est conçu pour être adapté aux débutants , bien qu'une certaine exposition au HTML et au CSS soit un réel avantage car on suppose que vous connaissez les bases. Vous n'avez pas besoin d'avoir fait travail d'animation dans le passé. De plus, tout ce que nous créons sera créé entièrement gratuitement dans le navigateur. Vous n'avez pas besoin d' achats ou de logiciels supplémentaires. Nous pouvons commencer tout de suite dans le navigateur. Passons maintenant à la première animation et je vous verrai dans la prochaine vidéo. 2. Partagez votre travail sur Skillshare !: Lorsque vous suivez un cours, il est très important de ne pas prendre l'habitude de suivre un cours juste pour le plaisir de cocher une autre conférence. Prenez le temps de comprendre chaque leçon. revue le code que vous écrivez et réfléchissez à la manière dont vous pourriez aborder ces solutions vous-même. Dans cet esprit, ce cours est basé sur des projets et vous donne l'opportunité de vraiment créer quelque chose de personnel et d'unique. Vous n'avez pas besoin de trop vous perdre et de vous éloigner de la classe. Vous pouvez même prendre du recul après avoir terminé le cours, revenir et apporter quelques modifications au projet par la suite. Cela vous donnera vraiment une bonne chance de mettre en pratique ce que vous avez appris en classe. N'oubliez pas non plus de partager votre projet ici sur Skillshare, non seulement je vais y jeter un œil, mais il inspirera également les autres étudiants. Pour plus d'informations sur le projet de classe, rendez-vous dans l'onglet Projet et ressources, où vous pouvez non seulement télécharger votre projet, mais également voir d'autres projets de classe. Dans cet esprit, j'ai hâte de voir ce que vous créerez et téléchargerez ici sur Skillshare. 3. Animation 1 : les animations de base et les images clés: Comme indiqué dans la vidéo d'introduction, aucun logiciel ou achat supplémentaire n' est requis pour terminer ce cours. Tout sera complété dans le navigateur aide d'un site Web appelé codepen.io. Jetons un coup d'œil à ce site Web et voyons comment nous organisons les choses. Pour commencer, rendez-vous sur codepen.io. Ce sera le site Web que nous allons utiliser pour créer toutes ces animations. Si vous le souhaitez et que vous avez déjà configuré un éditeur de texte tel que Visual Studio Code, l'utiliser gratuitement. C'est très bien. Mais pour moi, je vais créer un nouveau stylo pour chacun de ces exemples de code. Une fois que vous avez créé un compte et que vous vous êtes connecté à Codepen, vous verrez un écran similaire à celui-ci. Sur la gauche, nous avons une barre latérale où nous pouvons créer un nouveau stylo. Cliquez sur ce stylo et cela devrait créer de nouvelles photos de site vides. Dans le Codepen, nous allons avoir une section HTML, une section feuille de style et également une section JavaScript. Tous ces éléments seront liés et combinés afin que nous puissions écrire notre code et voir cet aperçu dans la fenêtre ci-dessous. Il est très facile de démarrer et de créer des extraits de code simples et de voir les résultats très rapidement. Dans les exemples à venir, nous allons examiner différentes variantes d' animations et la manière dont nous pouvons travailler avec différents types de texte. Pour cela, nous avons besoin d'un texte de logo impressionnant avec lequel travailler. Pour cet exemple particulier, je vais isoler chacune des lettres du texte pour en faire un seul élément et nous verrons pourquoi une fois que nous aurons commencé. Tout d'abord, créez un div, qui sera un wrapper pour l'ensemble de notre texte. Ajoutez une classe égale à title_container et nous l'utiliserons pour ajouter du style très bientôt. Pour ces exemples à venir, je vais utiliser un nom commercial appelé fabrique de cupcakes. Pour certains des exemples suivants, nous pouvons le saisir sous la forme d'une chaîne de texte complète, comme ceci. Mais pour cette animation en particulier, nous allons travailler avec chacun de ces personnages individuellement. Cela signifie que nous devons isoler chacun d'entre eux en ajoutant chaque caractère à leurs propres éléments HTML. Pour cela, nous pouvons créer quelque chose comme une travée avec des éléments de travée. Maintenant, nous allons créer nos textes avec un caractère à la fois en utilisant Control ou Command C pour copier. Coller avec Control ou Command V. Ensuite, nous continuerons à le faire jusqu'à ce que nous ayons épelé le mot fabrique de cupcakes. Vous pouvez également modifier ce nom si vous le souhaitez. Cela ne fait pas vraiment de différence. Même si votre nom est plus long ou plus court, l'animation ne fait aucune différence. T-O-R-Y. On y va. C'est notre texte tout écrit. Également pour la fabrique de derniers mots, juste pour ajouter un style différent. En effet, je vais séparer cela en ajoutant une classe. Définissez le nom de classe égal à factory , puis nous pouvons également le copier et le coller dans chacun des éléments suivants. Nous voyons le texte de la fabrique de cupcakes. En fait, nous devons nous assurer de l'épeler correctement. On y va. Ils sont tous prévisualisés en bas. Pour commencer, dans le CSS, nous pouvons ajouter du style et de la mise en page et nous ajouterons des styles généraux à la section du corps. Tout d'abord, la hauteur. C'est uniquement pour la présentation. Nous allons régler cette valeur à 100  % de la hauteur de la fenêtre d'affichage. Nous utiliserons la flexbox en définissant le type d'affichage de manière à ce qu'il soit égal à Flex. Cela nous permettra de placer notre texte au centre de cette fenêtre. Pour ce faire, nous allons placer le contenu de la justification au centre et ils doivent placer le texte au centre, horizontalement. Alignez les éléments au centre. Cela nous donnera l'alignement vertical. Ces deux options sont possibles car le type d'affichage par défaut doit se trouver dans une rangée. Cela signifie que le contenu se trouve de la gauche vers la droite sur l'ensemble de la page, plutôt que dans une colonne de haut en bas. Après notre positionnement, nous ajouterons quelques polices. Définissez la famille de polices pour qu' elle soit égale à Georgia. Une solution de rechange à l'empattement. Vous pouvez également modifier cela si vous souhaitez utiliser des polices différentes ou un style différent dans la taille de police. Faites en sorte que cela soit un peu plus grand de 62 pixels. Cela le rend un peu plus lisible dans le navigateur. N'oubliez pas que chacun de ces caractères de notre mot est entouré par cet élément span. Prenons cet élément d'envergure. Ensuite, nous pouvons nous mettre au travail en ajoutant du style. La couleur du gris ardoise. Jusqu'à présent, tout le style que nous faisons est uniquement destiné à la présentation. Cela n'a actuellement aucun effet sur l'animation que nous allons créer dans un instant. Ensuite, il suffit de le différencier un peu de la section usine. Nous allons choisir notre classe d'usine et nous changerons également la couleur de celle-ci. Comme il s'agit d'une classe, nous utilisons le point. Récupère le texte d'usine. Ensuite, nous pouvons définir la couleur à l'intérieur. Je vais opter pour une valeur hexagonale, qui est un point-virgule EEC 549. fois tous ces styles de base terminés, nous pouvons maintenant nous atteler à l' ajout de quelques animations de base. Pour créer une animation en CSS, une méthode très simple consiste à définir l' état de début et de fin de l'animation. Entre ces deux états, le début et la fin, nous pouvons modifier toutes les propriétés CSS que vous souhaitez. Par exemple, nous pouvons définir la couleur de départ de notre texte gris, puis nous pouvons définir la couleur de fin sur une couleur différente. Nous pouvons modifier la taille de la police. Nous pouvons jouer avec l'espacement et toute autre propriété que vous souhaitez. Pour définir ces modifications ou cette transition, nous devons utiliser des images-clés. Cette règle des images-clés comporte un ensemble d' accolades comme celle-ci et, à l'intérieur, nous définissons l'état de début et de fin de notre animation. Nous pouvons le faire en réglant ce paramètre à zéro ou à zéro pour cent. Ensuite, nous pouvons ajouter nos styles à l'intérieur des bretelles bouclées. Ensuite, l' état que nous voulons voir apparaître lorsque l'animation est terminée à 100 pour cent. Comme nous commençons par un exemple simple, nous n'utiliserons que ces deux pourcentages, mais vous pouvez également ajouter toutes les autres valeurs à l'intérieur desquelles vous le souhaitez. Cela créera plus d'états intermédiaires et d'animations complexes. En plus de simplement ajouter nos images-clés, nous devons également donner un nom à cette règle d' images-clés. Appelons cela une animation. Ensuite, nous définirons l'état zéro pour cent, qui est le tout début de notre animation. Pour faire bouger chacune de ces lettres, nous allons ajouter une marge, c' est-à-dire un espace à l'extérieur des éléments sur le côté gauche. Ajoutons une marge à gauche de 10 pixels. Ensuite, une fois l' animation terminée, nous la réduirons afin que la marge ne soit que de cinq pixels. Ce que cela fera pour chacun de nos éléments individuels, les éléments de la plage, nous allons ajouter cette animation qui commencera par ajouter plus d'espace dans la gauche , puis elle réduira cela jusqu' à réduire l'espacement, ce qui permettra déplacer efficacement chacune de ces lettres une par une. Pour relier cela à nos éléments de travée, nous pouvons accéder à la section de la travée. Placer le nom de l'animation, qui est égal au nom que nous avons donné à nos images-clés. Si vous l'enregistrez, nous ne voyons actuellement aucune modification dans cet aperçu. La raison en est que, bien que nous ayons défini l'état de début et de fin, nous devons également déclarer la rapidité du processus de cette animation . Combien de secondes s' écoule entre le début et la fin des images-clés. Pour cela, juste en dessous du nom de l'animation, nous pouvons ajouter la durée de l' animation. Pour cela, je veux utiliser trois secondes. Nous pouvons utiliser le S pendant des secondes ou aussi utiliser MS pour des millisecondes. Pour la milliseconde, 1 000 équivaut à une seconde entière. Je vais juste garder ça pour trois secondes. Maintenant, si nous appuyons sur le bouton Enregistrer ou que nous actualisons également, vous remarquerez deux choses à propos de cette animation. La première chose est que cela fonctionne réellement. Il part d'une marge gauche de 10 pixels et se termine à une valeur inférieure de cinq pixels, ce qui fait bouger chacune de ces lettres. Eh bien, si vous regardez aussi de plus près, rafraîchissons-nous. Une fois que nous sommes arrivés à la toute fin de l'animation, nous voyons ce saut à la toute fin. Cela fait que l' animation commence, se termine, puis revient à son état d'origine, qu'il était avant le traitement de l' animation. C'est très bien si c'est ce que vous voulez faire, si vous voulez le rétablir au format d'origine. Sinon, vous pouvez souvent vouloir laisser l'état final exactement comme l'animation s'est terminée. Eh bien, pour ce faire, nous pouvons utiliser une propriété appelée mode film d'animation et définir cette valeur pour qu'elle soit égale à la valeur suivante. Cela permettra de s'assurer qu'à la fin de notre animation, le mode avant signifie qu'elle reste dans l'état final, qui a été défini dans nos images-clés. Maintenant, si nous sauvegardons et rechargons la page, nous pouvons voir que notre animation prend effet et qu'elle reste dans l'état final de nos images-clés. Juste pour terminer, je vais lui attribuer l' équivalent du logo numéro 1 de la fabrique de cupcakes . Il s'agit maintenant de notre premier logo ou notre première animation maintenant terminée. Je te verrai dans la seconde. 4. Animation 2 : combiner les animations: Pour notre deuxième animation, nous allons combiner deux animations distinctes. Ce que nous allons faire pour commencer, c'est travailler avec le cupcake, je vais utiliser à nouveau l'espace et propriétés pour recommencer à plus grande échelle. L'animation commencera, puis elles se refermeront et ensuite, une fois que tout sera terminé, disparaîtront dans le mot de l'usine. Pour commencer, nous allons créer un nouveau stylo en cliquant sur le bouton en forme de fourchette en bas. Cela fera une copie de notre projet existant afin de nous donner un point de départ avec tout le code HTML et les styles de base dont nous avons besoin. Je vais le changer pour qu'il devienne le logo numéro deux. Comme nous l'avons mentionné, nous allons conserver tout ce texte, le corps et toutes ces polices de base, mais nous allons créer nos nouvelles images-clés en bas. Pour que ce soit clair, nous allons changer ce que nous faisons exactement pour qu'il s'agisse des images-clés appelées espacement et cela va à nouveau ajuster la marge. Bien que cela s'applique à tous nos éléments de travée, nous allons disparaître en usine, donc cela ne sera pas visible. Nous travaillerons avec le texte d'usine juste après, donc nous allons commencer par ajouter une marge complète plutôt que juste à gauche. Maintenant pour cela, plaçons une marge nulle en haut et en bas, je vais opter pour 14 pixels à gauche et à droite. Ce sera l'état de départ à zéro pour cent et je vais également l'ajouter à 25 pour cent. Cela permettra donc de s'assurer que notre marge reste la même pendant le premier quart de l' animation, puis, à la toute fin, elle se fondra pour une valeur de marge différente. Changeons la marge, nous gardons zéro en haut et en bas et nous la faisons quatre pixels à gauche et à droite, essayons de voir à quoi cela ressemble. Si nous montons jusqu'à la travée. Eh bien, je vais copier cette marge en place, comme état initial de notre animation, afin que dès que celle-ci se charge, notre espace ou nos lettres auront cette marge à gauche et à droite. Cela restera pendant le premier quart de l' animation, puis nous réduirons l'espace entre chacune d'elles à quatre pixels, donc puisque nous avons changé le nom de l'animation de animation pour être de l'espacement, changeons cela et nous pouvons également créer un raccourci pour tout cela, plutôt que d' ajouter toutes propriétés d'animation sur deux lignes distinctes, ces propriétés d'animation sur deux lignes distinctes, nous pouvons toutes les placer dans une propriété d'animation. Nous avons le nom de notre animation, et au lieu d'avoir le timing et le mode film sous forme de propriétés distinctes, nous pouvons toutes les ajouter sur la même ligne. Cela signifie que nous pouvons supprimer notre durée et notre mode de remplissage. Tout devrait continuer à fonctionner comme avant. Maintenant, sauvegardez et actualisez, nous commençons avec une marge de 14 pixels à gauche et à droite. Cela reste pour le premier quart de l' animation, puis à la toute fin, cela se réduit à quatre pixels. Puisque nous avons défini le mode de remplissage pour qu'il soit vers l'avant, il s' agit également de l'état final plutôt que de revenir à la valeur d'origine. Regardons ça encore une fois. 14 pixels jusqu'à 4, et cela reste en place. Au début de cette vidéo, j'ai mentionné que nous allions combiner deux animations distinctes. L'animation que nous avons, nous voulons simplement l' appliquer aux mots, au cupcake, puis nous disparaîtrons dans la fabrique de mots une fois que tout sera terminé. Pour cela, nous devons créer une règle d'images-clés distincte en bas au niveau des images-clés. ce que nous appellerons le délai. Cela fonctionnera donc avec la propriété d' opacité CSS et nous commencerons à 0 pour cent et également à 30 pour cent. La raison pour laquelle nous avons défini deux valeurs différentes ici est que nous avons soudainement une valeur d'opacité égale à 0. Ce que nous allons faire, c'est l'ajouter à chacune des lettres d'usine. Cela définira l'opacité, ce qui signifie qu'elle est complètement transparente, sorte qu'aucun des mots des 30 premiers pour cent de nos images-clés ne sera visible. Ensuite, à la toute fin, 100 %, nous allons faire en sorte que la valeur d'opacité soit égale à 1, ce qui est complètement opaque, ce qui signifie que notre texte retrouve sa valeur normale. Nous allons distiller jusqu'à la classe olfactive juste au-dessus, juste en dessous de la couleur. Nous allons définir l'animation, encore une fois en utilisant le raccourci que nous pouvons placer dans le nom de l' animation delay, et exécuter celui-ci pendant cinq secondes. Nous pouvons donc le voir encore une fois, si nous actualisons les 30 premiers pour cent de l'animation, l'opacité est réglée à zéro, puis vers la fin, commencera à s'estomper. Pour que cela soit un peu plus beau, je vais réduire l' espace entre chacune de ces lettres et aussi la mettre en italique. Revenez donc à la classe d'usine. Placez-le dans la propriété de style police italique, essayons celle-ci et réduisons également la marge, soit 0 en haut et en bas et cinq pixels à gauche et à droite. Allons-y un peu moins, nous allons juste changer cela à deux pixels. Voilà et c' est ainsi que nous pouvons combiner deux animations ou plus et nous pouvons également fusionner toutes ces propriétés CSS dans un raccourci d'animation. 5. Animation 3 : Faciliter le texte et détourner les choses: Bienvenue à nouveau à notre troisième démonstration. Nous allons nous en tenir au même code HTML pour ce lien et à une grande partie du même style afin démarrer rapidement en dupliquant notre projet. So fork, notre deuxième logo. Cela dupliquera notre contenu d'origine. Le code HTML restera donc exactement le même afin que nous puissions contrôler toutes les lettres individuelles, nous changerons cela plus tard. Le corps peut rester le même, la portée, nous pouvons supprimer la marge, et aussi les doublons, nous ne devrions pas avoir ça. Ensuite, vers le bas, nous nous mettrons au travail en créant nos images-clés. Pour celui-ci, nous allons faire en sorte que toutes les lettres soient plus largement étalées ou espacées grâce à la propriété letter-spacing. Nous allons donc commencer très large, lettre pour redonner à tous les avantages leur position initiale. Ensuite, à la toute fin, nous mettrons le texte en italique en définissant une transformation. Nous pouvons donc supprimer l'une de ces images-clés. Vous aurez besoin d'un ensemble d' images-clés pour celui-ci, que nous appellerons l'animation car il y a encore plusieurs éléments. Encore une fois, à zéro pour cent. Comme indiqué précédemment, nous utiliserons la propriété d'espacement des lettres pour celui-ci. Nous allons le définir sur 10 pixels au tout début, nous allons également définir un état intermédiaire, qui est de 50 pour cent, où l'espacement des lettres commencera à s'élargir. Nous allons donc commencer par 10 pixels de large dans un premier temps, puis à mi-chemin de l'animation cela l' élargira beaucoup. Optons pour 100 pixels. Ensuite, à la toute fin, nous définirons espacement entre les lettres à 20 pixels. Mais c'est un peu plus large que l'état de départ initial. Sauvegardons ça. Nous pouvons placer notre animation dans notre span, en plaçant le nom de l'animation. Voyons à quoi ça ressemble. Vous pouvez voir qu'il s'élargit puis revient au centre en trois secondes. Rafraîchissons et voyons ça encore une fois. Donc, ici, à zéro pour cent, nous fixons l'espacement des lettres à 10 pixels et nous terminons à 20 pixels de large. Nous pouvons donc aussi définir l'état initial et l'état final, nous pouvons également faciliter ou intégrer ces animations, nous pouvons les faciliter, ce qui amène progressivement notre premier rendez-vous, et nous peut également les faciliter pour finaliser ou terminer progressivement notre animation. Donc, pour ce faire dans notre animation, nous allons configurer ease-in. Cela intégrera notre animation un peu plus facilement, mais si vous souhaitez que cela soit facilité, nous pouvons sélectionner ease-in-out, rafraîchir, et tout ira bien dans ce cas. Une chose que nous devons également faire avec le texte d'usine est de supprimer l' animation non utilisée précédemment. Nous pouvons également supprimer le style de police en italique car nous allons ignorer tous les textes à l'écran ici. Une chose que vous remarquerez peut-être également, c'est que lorsque nous travaillons avec cet espacement entre les lettres ou cette marge, nous poussons le texte pour qu'il soit vraiment large et nous sortons de l'écran. Sauvegardons et actualisons. Vous verrez parfois que le texte s'enroule sur des lignes supplémentaires, ce n'est évidemment pas le look que nous allons rechercher. Pour résoudre ce problème, nous pouvons travailler avec le conteneur de titres. Prenons ceci, qui est le conteneur de tout ce texte juste ici. Il s'agit du cluster, donc nous utilisons le point. Ce que nous allons faire ici, c'est simplement régler le type d'affichage pour qu'il soit égal à Flex. Essayons-le. Vous pouvez maintenant voir que le texte sort de la page sans passer à la ligne suivante. Cela s'explique par le fait que, par défaut, nous essaierons de placer la flex-box sur une seule ligne, à moins que nous n' ajoutions une propriété supplémentaire telle que flex-wrap. Flex-wrap limitera cette largeur à celle du conteneur de la page et permettra à celle-ci de s'enrouler sur plusieurs lignes. Évidemment, nous ne voulons pas cela, nous pouvons donc le supprimer et conserver les paramètres par défaut. Ensuite, la dernière chose que nous allons faire est de revenir à nos images-clés et de modifier l'inclinaison de notre texte. premier temps, nous allons définir la transformation sur une valeur de zéro à 50 % du parcours de notre animation. la transformation, nous utiliserons la propriété skewx et définirons à une valeur initiale de zéro. Cela signifie qu'à mi-chemin de notre animation, nous n'avons aucun effet sur la transformation. Mais, une fois que nous serons arrivés à la fin, nous allons le copier et le coller à 100 % et régler la vitesse sur moins 20 degrés Cela va maintenant provoquer un décalage à la toute fin de notre animation, que nous allons voir tout à l'heure. Il s'incline ensuite de 20 degrés sur tous les textes et nous donne cet effet italique. Vous pouvez également jouer avec cela et faire des choses vraiment folles. Ainsi, par exemple, si nous voulions qu'au début de l'animation, tout ce texte soit retiré des bords de l'écran. Ensuite, pour entrer au centre, nous pourrions faire quelque chose comme ajouter une marge sur la gauche, ce que nous avons déjà fait auparavant, 100 vw, qui correspond à la largeur de l'écran. Cela commencera alors très large, puis tous les textes arriveront au centre. Supprimons simplement cela et conservons notre animation d'origine. Génial. Juste pour terminer celui-ci vous allez sauter en haut, et nous l' appellerons le logo numéro 3. Enregistrez, ouvrez et je vous verrai dans la prochaine. 6. Animation 4 : retards et traduction: Passons maintenant à l'animation numéro 4. Comme toujours, je cliquerai sur le bouton « Fourchette » pour faire une copie de notre logo numéro 3. Nous allons le remplacer par Number 4 en tant que titre, et nous pourrons réutiliser une grande partie du même code que celui des exemples précédents. Mais ce que nous allons faire, c'est séparer les mots, le cupcake et l'usine. Nous allons faire glisser l'usine de gauche à droite, puis une fois terminée, après un certain temps, nous allons ensuite disparaître dans les mots du cupcake. Nous avons déjà cette classe, une usine pour travailler avec ce mot. Nous allons également passer aux mots « cupcake » et ajouter une classe égale à « cupcake ». Cela nous permettra de travailler avec cette section particulière et de la copier et de la coller dans chacune des lettres suivantes. Maintenant, nous avons deux sections claires et plutôt que de travailler avec la travée, remplacerions par la classe des cupcakes. La couleur est bonne, mais ce que nous allons faire avec les mots du cupcake, c'est de l'estomper à la fin. Nous allons commencer par une valeur d' opacité nulle. Cela signifie que nous ne voyons pas ces deux mots au départ, mais que nous les ajouterons à notre animation. Maintenant, descendons vers le bas. Nous allons configurer nos images-clés. Pour cela, nous allons travailler avec deux outils distincts. Supprimez tout le contenu de l'intérieur de notre animation et nous l' appellerons slide-right. Celui-ci s'appliquera aux mots usine. Il va recommencer sur la gauche, puis se traduire sur l' axe X jusqu'à l'opposition. Plutôt que de configurer les pourcentages à l'intérieur des images-clés, si vous souhaitez uniquement passer d'un état à l'autre, nous pouvons simplement dire à. Cela commencera par nos propriétés CSS de départ que nous avons ci-dessus , puis nous animerons vers les propriétés que nous ajouterons ici. Nous pouvons simplement dupliquer ceci, notre section de fondu et nous l'appellerons fondu. Celui-ci peut également garder le toutou à l'intérieur. Pour le fondu, nous allons l' ajouter aux mots « le cupcake ». N'oubliez pas que nous avons actuellement défini l'opacité à zéro. Nous commencerons par zéro, puis si nous le copions et le collons dans notre fondu, nous le remplacerons par un et ce sera à la fin de notre animation. En fait, nous avons cette opacité à zéro pour cent , puis celle-ci à la toute fin. Nous pouvons ensuite le configurer. On peut changer la classe des cupcakes, avoir l'animation du fondu. Faites en sorte que cela fonctionne en 1,5 seconde. Sauvegardez-le, et nous verrons notre animation s'estomper. Nous avons un problème familier, qui est qu'à la toute fin, nous revenons à l'état d'origine de l'opacité à zéro. Nous pouvons conserver l'état final de l' animation en le définissant pour qu'il soit vers l' avant, puis essayez. Cela reste désormais en place. Nous pouvons maintenant commencer à travailler avec le texte d'usine, qui va commencer à gauche puis glisser vers la droite. Nous avons déjà cette configuration de classe et la couleur. À l'intérieur, nous pouvons configurer l'état initial de notre animation. Nous utiliserons la propriété transform dans laquelle nous translaterons la valeur de l'axe X de 150 pixels négatifs. Si nous l'enregistrons, nous pouvons voir qu' il est déplacé vers la gauche, 150 pixels, et ce sera l'état de départ de notre animation. Nous pouvons le copier et le terminer à la valeur zéro. De toute évidence, nous devons ajouter cette animation glissante vers la droite à notre classe d'usine. Placez-le dans l'animation que nous appelons la glissière droite. Nous allons le faire en deux secondes. Nous conservons également l' état final avec les avants. Tout cela fonctionne bien, mais une chose que vous remarquerez, c'est que nous avons ce chevauchement de l'usine qui passe en revue les mots « cupcake ». L'un des moyens de résoudre ce problème est d'ajouter un délai d'animation. Nous ne disparaissons qu' après avoir glissé le texte d'usine vers la droite. Pour ce faire, nous allons dans notre section des cupcakes, et nous avons deux façons de le faire. Nous pouvons soit ajouter un délai d'animation et le régler pour qu'il soit égal au nombre de secondes que vous souhaitez. Cela ajoutera un délai de 1,5 seconde à notre fondu. Ou nous pourrions également l'ajouter à la sténographie. Mettons cela juste avant le nom de notre animation. Nous allons faire un commentaire à ce sujet. Cela nous donne toujours le délai requis. 7. Animation 5 : texte glissant: Le prochain sera un petit jeu sur ce que nous avons déjà. Nous allons travailler avec le groupe d'usine, puis nous recommencerons en haut à droite, puis nous le déplacerons en diagonale vers le bas pour qu'il se trouve en dessous des mots « Cupcake ». Cela se trouvera en dessous. Ensuite, après un petit délai, nous ajouterons les mots, TheCupcake, en modifiant l'opacité. Nous allons descendre sur le bouton Fork et dupliquer notre projet. Faites-en une copie et nous le changerons pour qu' il s' agisse du logo numéro 5. Pour ce faire, nous allons d'abord ajouter une marge aux mots « Factory », ce qui va les déplacer d'un endroit en haut à droite, puis les mettre place en diagonale vers le bas. Pour ce faire, nous utiliserons une certaine marge. Maintenant, nous travaillons actuellement avec chacune de ces classes d'usines. Si nous devions ajouter une marge à chacune de ces lettres, cela s' appliquerait individuellement à chaque lettre. Au lieu de cela, pour déplacer cela comme un groupe entier, je vais supprimer chacune de ces classes d'usine, découper toutes les travées, créer une nouvelle section div. Celui-ci contiendra la classe factory_wrapper à l'intérieur, collez-le dans notre contenu. Cela nous donne maintenant un emballage pour travailler avec tous ces mots afin que nous puissions conserver nos styles de base pour le corps, le contenant et aussi le cupcake. Tout va bien. Nous pouvons déplacer cette section commentée pour qu'elle fonctionne avec l'usine afin de ne pas avoir à la transformer. Nous allons travailler avec une marge pour celui-ci. Nous pouvons déplacer l'animation puisque nous allons l'appliquer à notre emballage d'usine. Allons-y. Sélectionnez notre classe, puis ajoutez une propriété d'animation. Cette propriété d'animation permet d'utiliser le nom des images-clés existantes de la diapositive pendant deux secondes. Nous allons laisser cela à l'état avancé. N'oubliez pas que les avants conserveront les états finaux de notre animation. Jusqu'à notre animation dans nos images-clés de glisser vers la droite, à l'intérieur, en plus d'ajouter les deux propriétés, nous pourrions également ajouter l' état de départ avec les mots, from. Nous pouvons l'ajouter à l'intérieur de ces bretelles bouclées. Pour cela, nous allons déplacer notre texte d'usine en haut à droite, quelque part dans cette zone. Pour cela, ajoutez une marge sur le côté gauche. Nous allons l'étendre de 300 pixels sur la page. Ensuite, à la toute fin, nous changerons cela pour qu'il s'agisse d' une marge supérieure à 50 pixels. Voyons quel effet cela aura. Comme vous pouvez le voir, au début de la transformation cette marge de gauche s'appliquera au côté gauche, poussant ce texte vers la droite, puis progressivement à la toute fin cela en ajoutera marge sur le dessus, ce qui place le texte dessous des mots du cupcake. Sauvegardons-le et actualisons-le pour que nous puissions le voir une fois de plus. Bien, cela fonctionne bien, mais terminer, ce que je veux faire, c'est déplacer les mots, Factory, plus à gauche. Nous allons l'insérer juste en dessous des mots « gâteau ». Pour cela, passez à l' état final de notre animation. Nous pouvons ensuite réduire la marge restante. Essayons une valeur négative de 100 pixels, voyons à quoi cela ressemble. Ça a l'air mieux. Peut-être 120. Bon. Cela fait passer le mot « Factory » juste en dessous du mot « gâteau ». 8. Animation 6 : variables, rotation et calcul des retards: Bienvenue à nouveau et commençons par notre animation sur Number 6, [inaudible] qui travaille sur nos projets en cours. Renommez ce numéro 6. Nous allons nous en tenir au texte de la fabrique de cupcakes, mais nous allons le modifier un peu pour qu'il reste intéressant. Pour le moment, nous pouvons retirer l'emballage d'usine qui entoure tous les textes d'usine. Supprimez ce div, qui correspond aux balises d'ouverture et de fermeture de celui-ci. Jusqu'au corps, agrandissez-le un peu. Optons pour la taille de police de 100 pixels. Nous allons mélanger les choses avec une couleur de fond différente. Vous pouvez le placer comme vous le souhaitez, mais je vais opter pour 1f1c1c, juste pour lui donner une couleur de fond plus foncée. Nous pouvons conserver le conteneur de titres. Nous n'avons plus besoin de ce cours de cupcakes. Nous supprimerons également le wrapper d'usine afin de pouvoir également supprimer le CSS correspondant. Juste pour rétablir la couleur des mots cupcake, ajoutez-les au corps. La couleur qui était gris ardoise clair. Nous sommes maintenant prêts à poursuivre notre animation. Celui-ci sera une série de rotations sur les axes x et y et nous verrons comment procéder en l'ajoutant à chacune de nos lettres avec l'élément span. Ajoutons la plage. C'est à l'intérieur que nous placerons notre animation. utilisant les premières images clés, nous allons appeler celle-ci RotaTex. Vous n'avez besoin que d'un seul état, car nous pivotons de la valeur initiale jusqu'à 90 degrés Nous pouvons donc le placer sous la forme d' une valeur de zéro pour cent. Cela va prendre une transformation qui fait pivoter le texte sur l'axe X. À l'intérieur des crochets, nous pouvons placer une valeur à l'intérieur des degrés, et si vous voulez voir à quoi cela ressemble sans l'animation, nous pouvons simplement la placer dans les éléments de notre span. Si nous l'enregistrons à 90 degrés, nous ne verrons rien à l'écran car il est pivoté hors de vue. Mais si nous changeons ce nombre pour qu'il s'agisse d'un nombre différent , par exemple 100, nous pouvons voir la rotation de 120. C'est l'effet que nous allons obtenir en le faisant pivoter sur l'axe X, puis en le retournant à son état d'origine. Nous allons le déplacer, le placer sous forme d'animation, de trois secondes, le nom des images clés de RotaTex. Enregistrez ceci, et vous pouvez maintenant voir qu'il commence à la valeur de 90 degrés une fois que vous commencez à zéro pour cent , puis revenez à l'état par défaut. Celui-ci tourne sur l'axe X mais ce que nous pouvons également faire est de tourner sur l'axe Y pour lui donner un effet de spin. Pour cela, nous appellerons nos images clés spin. Puisque nous voulons juste commencer par une seule valeur comme ici, nous allons commencer à zéro pour cent en utilisant également la transformation, mais celle-ci sera RotateY. Pour faire un tour complet, nous allons devoir faire pivoter cette image à 360 degrés Nous allons donc la placer dans notre animation dans la limite de notre envergure. Celui-ci va être tourné. Nous allons le raccourcir à deux secondes, enregistrer et cela fera ensuite pivoter notre texte de 360 degrés, puis le fera revenir à son état initial. Comme nous pouvons le voir, cela n'est répété qu'une seule fois, mais nous pouvons également définir combien de fois nous voulons que cela se répète. Si nous en voulons deux, remplacez-les juste après, cela tourne deux fois et nous pouvons également continuer à répéter cela en le réglant sur la valeur infinie. Il existe deux manières différentes de pivoter sur l'axe x ou sur l'axe y. Mais nous pouvons aussi faire autre chose au lieu de tout faire tourner en même temps, donc pour le moment, chacune de ces lettres tourne exactement au même moment pour nous donner cet effet. Mais nous pouvons aussi rendre cela un peu plus complexe en ajoutant un délai entre chacune d'elles. Pour ce faire, nous pouvons ajouter une variable à chacune de nos lettres. Nous allons le faire sous la forme d'un attribut de style. Nous n'avons pas besoin de cette classe dans chacune de ces sections de cupcakes et nous pouvons remplacer par les attributs de style. Cela équivaut à une variable que je vais appeler —i et définir la variable comme étant égale à une valeur. La valeur va être incrémentée de la valeur de l'une de ces plages. Cela signifie que cela se multipliera avec le délai. Ne vous inquiétez pas si cela n'a pas de sens pour le moment, nous allons simplement le copier et le coller dans chacune de ces lettres. Nous verrons exactement comment cela fonctionne dans un instant. Ensuite, numéro 3, je vais le placer dans chacune de nos lettres. Nous avons maintenant une variable appelée —i et chacune d'elles a une valeur correspondante. Nous pouvons passer à notre animation, qui se trouve juste ici. Nous conserverons l'animation de rotation qui tourne sur l'axe Y de 360 degrés. Plutôt que de tout faire en même temps, nous pouvons ajouter un délai d'animation pour chacun de ces personnages. Après l'animation, passage d'un délai d'animation. Si nous le voulions, nous pourrions simplement faire un délai, par exemple une seconde, et cela s'appliquera à l'ensemble. Comme nous n'avons aucune référence à nos variables, nous l'appliquons simplement à chacune des plages. Au lieu de cela, nous pouvons appliquer un calcul, la fonction calc, et nous allons retarder chacun d' eux de 0,1 seconde. Nous allons le multiplier par la valeur de la variable, qui est —i, ce nous donne ce délai intéressant pour chacun de nos éléments de span. Revoyons ça encore une fois. Ce que j'ai fait ici, c'est que nous avons saisi chacune de nos variables une par une. La première, on va multiplier 0,1 seconde par une. Ce sera simplement 0,1 de seconde, puis ce sera 0,2 de seconde, 0,3 jusqu'à la toute dernière lettre, qui est le y, et cela sera retardé de 1,7 seconde. Restaurez la couleur comme touche finale. Nous ajouterons également cette classe d' usine à nos lettres, sorte que classe soit égale usine, copiez-la et collez-la dans les lettres suivantes. Voilà, et voici notre animation qui montre comment effectuer une rotation sur les axes x et y à l' aide des transformées de rotation et comment ajouter un délai différent à chacune d'elles. de nos caractères, par exemple en utilisant la fonction et les variables calc. 9. Animation 7 : couleurs mouvantes: Bon retour. Nous allons commencer par notre animation numéro 7, en bifurquant notre projet actuel. Pour obtenir tous les styles et contenus de base. Nous allons appeler ce numéro 7. Celui-ci sera une animation relativement simple utilisant des choses que vous avez déjà apprises, mais aussi une très belle animation. Ce que nous allons faire, c'est travailler avec différentes couleurs, et nous utiliserons également les variables du délai d'animation, lesquelles nous avons travaillé précédemment. Cela va filtrer dans nos quatre couleurs différentes et les faire pivoter. Pour cela, nous n'avons besoin que d' un seul jeu d'images-clés. Les images-clés, nous appellerons cela la couleur. Nous allons simplement définir la propriété de couleur CSS. La première va commencer en gris ardoise clair. Ensuite, nous y placerons trois couleurs distinctes. Quatre couleurs au total. Le prochain sera à 25 pour cent. La couleur dépend de vous, mais je vais opter pour le rose vif à 25 pour cent. Cinquante pour cent seront de couleur kaki. Puis à 100 pour cent, la couleur bleu clair. Voyons à quoi cela ressemble si nous mettons la couleur dans notre animation. Je vais en faire une animation de cinq secondes. Si nous sauvegardons cela, nous pouvons maintenant voir nos couleurs commencent à pivoter au cours des différentes étapes de l'animation. Mais cela ne se produit qu'une seule fois. N'oubliez pas qu'auparavant, nous pouvions également faire fonctionner ces animations en boucle. Nous pouvons définir combien de fois nous voulons que cela s'exécute, ou nous pouvons également définir cela comme une valeur infinie. Cela permettra à notre animation de fonctionner en permanence. Vous pouvez également voir qu'une fois que nous arrivons à un certain stade de l'usine, le texte a toujours cette couleur jaune, que nous avons définie précédemment. Nous devons également supprimer les classes de chacune de ces lettres. Supprimez tous ces éléments. Ceci est enregistré, et cela semble maintenant beaucoup mieux, nous n'avons aucun conflit dans le CSS. Nous pouvons également supprimer la couleur d'usine. Cela fonctionne comme dans les vidéos précédentes, car nous avons cette variable qui ajoute le délai ou un délai d'animation à chacun de ces appels. Chacune de ces couleurs est appliquée aux lettres de gauche à droite après le délai de 0,1 seconde. 10. Animation 8 : Bouncing les lettres: Nous y voilà avec l'animation numéro 8. Celui-ci sera assez simple en s'appuyant sur ce que nous avions auparavant. Actuellement, dans l' animation précédente, numéro 7, nous avons créé un délai d'animation qui provoque cet effet, et la couleur se déplace de gauche à droite. Nous l'avons fait en insérant une variable, puis nous avons pris en compte ce délai. Je l'ai multiplié par 0,1 seconde. Nous avons parcouru les quatre couleurs à différentes étapes, et nous allons nous appuyer sur cette animation pour Number 8, en créant un effet de saut sur chacune d'elles. Pour ce faire, nous utiliserons l'échelle de transformation y, que nous avons utilisée précédemment pour étendre chacun de ces caractères verticalement. Je vais le faire avec un délai entre chacune d'elles. Nous allons bifurquer ce stylo actuel et le renommer en Numéro 8. Ce ne sera pas beaucoup de couleur pour celui-ci, mais nous allons le rendre beaucoup plus beau. Tout en bas de cette page, nous allons créer une deuxième règle d' images-clés. Nous appellerons cette vague pour lui donner un effet de vague. Maintenant, tu peux devenir vraiment fou avec ça. Vous pouvez ajouter autant de transformations que vous le souhaitez pour les différentes étapes. Mais un effet agréable, simple et subtil consiste à le faire à mi-chemin ou à 50 pour cent, où nous pouvons définir la transformation pour transformer l' échelle sur l'axe y, et cela peut être n'importe quelle valeur que vous vouloir. La valeur de un est simplement la taille normale de la plage. Mais nous allons le faire 1,3 fois plus grand. En utilisant notre vague, nous pouvons l'ajouter comme deuxième animation à notre span, séparant par une virgule. Essayons-y en deux secondes. C'est dans notre vague. Voyons maintenant à quoi cela ressemble. Nous avons un bel effet qui fonctionne de gauche à droite avec le même délai que celui que nous utilisions précédemment. Mais je vais aussi accélérer les choses. Essayons une seconde. C'est très bien. Allons-y un peu plus lentement, 0,7. Vous pouvez jouer avec ces valeurs et les faire fonctionner exactement comme vous le souhaitez. Mais c'est ainsi que nous pouvons combiner ces deux animations pour créer un bel effet. 11. Animation 9 : effet de lueur: Bienvenue pour l' animation numéro 9. Nous allons mélanger un peu les choses et travailler avec un titre différent. Concentrez-vous, créons une copie. C'est le numéro 9. En fait, celui-ci va utiliser un texte différent nous allons donc appeler ces délicieux hamburgers et passer ensuite au code HTML. Nous allons déplacer chacune de ces travées depuis l'intérieur du conteneur de titre et simplement placer un élément p. Cet élément p va contenir le texte de délicieux hamburgers. Ce que j'aimerais faire pour celui-ci, c'est créer un bel effet de néon en arrière-plan. Pour ce faire, nous allons à nouveau travailler avec l'animation, mais nous allons utiliser la propriété CSS text shadows. Nous allons commencer par l' ombre technologique pour obtenir une certaine valeur. Ensuite, pour l'animation nous l'augmenterons , puis remettrons à la valeur inférieure et vous verrez à quoi cela ressemblera très bientôt. Au niveau de la carrosserie, on peut garder la hauteur de l'écran. Nous pouvons déplacer cette couleur pour le texte. Le conteneur de titre permettant de le maintenir au centre déplacera la plage puisque nous avons supprimé tous les éléments de la plage et que nous travaillons uniquement avec ce conteneur de titre. Les images-clés, nous n'avons besoin que d'un seul jeu d'images-clés puisque nous utiliserons l'animation unique avec le contenu et nous la renommerons en glow. Comme nous allons animer d' un état à l'autre, nous pouvons utiliser zéro pour cent ou 100 pour cent. Ou nous pouvons utiliser ce que nous avons examiné précédemment, à le provenance et l'arrivée. C'est l'état de début et de fin. La lueur. Cela sera dû à la création d' une couleur différente et également d'une ombre de texte. À partir de l'état, qui est le tout début, nous définirons la couleur comme étant une couleur gris clair de CCC. Ensuite, à l'intérieur du double état, changez la couleur pour qu'elle soit simplement blanche. Nous y reviendrons dans un instant et nous verrons à quoi cela ressemble en ajoutant nos images-clés conteneur de titres à l'intérieur de la propriété d'animation. J'envoie une lueur. Je vais le faire sur une période de deux secondes. Notre animation fonctionne comme vous pouvez le voir. Nous allons simplement rafraîchir cela. Il part de la couleur grise, qui est CCC, puis passe à la couleur blanche avant revenir à l'état noir par défaut. Il y a maintenant un certain nombre de choses que nous voulons faire pour améliorer cela. Tout d'abord, nous voulons que cela continue à fonctionner à l'infini afin pouvoir ajouter la propriété infinie à l'intérieur d'ici. Cela permettra à l' animation de continuer à s'exécuter de la couleur de face vers le blanc. Nous pouvons à peu près voir cela prendre effet , mais qu'est-ce qui serait vraiment bien de passer du Color CCC au blanc, puis de revenir au CCC, puis revenir au blanc et de continuer à parcourir en boucle chacun de ces corrélatifs continue de parcourir l'animation et de se déplacer du haut vers le bas. Pour que cela fonctionne de manière alternative, nous pouvons également ajouter une propriété appelée alternative. Regarde à quoi ça ressemble. Cela pivote maintenant entre chacune de ces couleurs. Nous pouvons mieux le voir si nous le changeons pour une couleur plus foncée, comme le rouge. Cela fonctionne clairement. Nous allons le rétablir dans notre CCC. Ensuite, pour donner cet effet de lueur en arrière-plan, nous allons utiliser la propriété CSS appelée text-shadow. Quand le provient de l'état, dans l'ombre du texte. Nous ne voulons pas de décalage sur l'axe x ou l'axe y pour l'ombre, nous voulons simplement qu'elle soit au centre de chacun de ces caractères, puis qu'elle soit poussée vers l'extérieur depuis le centre. Nous le garderons à 00 heures. Nous pouvons ajouter une ombre de texte de 10 pixels et la couleur cyan. C'est la façade. Copiez ceci et ajoutez-le aux deux sections. Mais cette fois, ça va être un peu plus grand. Optons pour 50 pixels. Il s'agit maintenant de cycles par rapport à notre valeur plus ou moins élevée. Ensuite, comme il l'a fait la couleur puisque nous utilisons la propriété ultime, elle reviendra à la petite valeur et continuera de se déplacer entre les deux. Cela nous laisse maintenant ce bel effet lumineux pour notre logo. 12. Animation 10 : chemins de vague de fond et de clip: Félicitations, vous avez atteint l'animation finale et celle-ci va être un effet vraiment cool. Comme toujours, nous allons cliquer sur le bouton Fork pour créer une copie, et nous la renommerons. Celui-ci va utiliser un autre morceau de texte. Je vais l'appeler le Waterside Cafe qui est notre animation numéro 10. Nous allons lui donner un thème aquatique parce que nous allons utiliser un fond d'eau. Nous verrons à quoi cela ressemble dans un instant. Pour l'instant, nous allons supprimer le conteneur de titres. Nous pouvons également supprimer ces images-clés et remplacer les textes par Waterside Cafe. Nous pouvons déplacer cette classe. Ensuite, cela donne à nos textes une charge de travail groupée. La classe sera égale à vague parce que nous allons créer un effet de vague semblable à celui de l'eau. Nous aurons les grandes lignes de nos textes actuels, à savoir Waterside Cafe. Ensuite, en arrière-plan, nous aurons un effet d'arrosage, qui monte et descend comme une vague. Cela va nous donner un très bel effet. Pour cela, je vais changer la famille de polices. Allons-y pour Garamond. Nous pouvons garder l'arrière-plan, c'est tout à fait correct. Tout le reste va bien. ensuite à notre classe Wave. Pour commencer, avant de créer des animations, nous allons nous assurer que le texte est bien encadré. Nous pouvons voir la vague de manière efficace, comme si elle se déplaçait de haut en bas à l'intérieur de chacune de ces lettres. Pour ce faire, nous allons utiliser deux propriétés, à savoir la largeur du trait de texte et la couleur du trait de texte. Le trait va nous donner le contour de chaque caractère plutôt qu' une lettre entièrement pleine comme nous l'avons fait. Cela utilisera le préfixe Webkit pour s'assurer qu'il est compatible avec les navigateurs modernes. Ensuite, une largeur de trait de texte. J'ai réglé la ligne pour qu'elle ait une largeur d'un pixel. Nous pouvons voir que cela définira la couleur de l' arrière-plan pour qu'elle soit transparente. Ensuite, définissez la couleur de notre trait de texte comme vous le souhaitez, et je préfère le bleu clair. Encore une fois, tout comme pour la propriété ci-dessus, nous devons également utiliser le préfixe Webkit pour des raisons de compatibilité, donc la couleur du trait de texte. Je préfère le bleu clair. Cela nous donne la base de l'effet. Nous avons le plan, puis l'étape suivante consiste à créer notre animation, qui va s'agiter de haut en bas sur notre texte. Créez nos images-clés de Wave. Pour ce faire, nous devrons utiliser ce que l'on appelle un clip-path en forme de polygone. Jetons un coup d'œil à la façon dont nous travaillons avec cela. Un clip-path est en fait une forme ou un tracé qui découpe ou bloque le reste du contenu. Vous avez créé un clip-path avec un cercle. Cela masque l' image en bloquant tout le contenu qui l'entoure. dessous, nous avons la forme d' une ellipse, ce qui nous donne ce bord arrondi. Ensuite, nous avons un polygone en forme de losange, puis une forme complètement différente en bas. Pour atteindre l'un de ces chemins, nous devons passer une série de points ou de coordonnées. Comment les obtenir ? Eh bien, nous pourrions jouer avec ces chiffres manuellement. Nous pourrions les dessiner dans certains graphiques, programmes, ou nous pourrions également utiliser des générateurs en ligne. Un exemple de ceci est un site Web appelé cssportal.com, possède un générateur de clip-path qui nous donne de nombreuses formes différentes pour commencer. Vous pouvez voir que tous ces éléments masquent la forme de fond. Nous pouvons également faire glisser chacun de ces points pour créer un clip-path différent. Ceci est généré automatiquement pour nous. C'est une manière très simple de créer nos clip-paths. Puisque nous créons un effet de vague, nous voulons examiner quelque chose comme un polygone personnalisé. Cela nous donne plusieurs points sur la page. Nous pouvons cliquer sur les différentes étapes de l'image, telles qu'elles sont ici. Je vais créer autant de points différents que je le souhaite. Comme vous pouvez le voir, cela nous donne ce clip-path, qui est une forme polygonale. Ensuite, à l'intérieur de chacun de ces points se trouvent chacun de ces points une certaine position sur les axes x et y. Vous pouvez jouer avec ces valeurs si vous le souhaitez. J'ai déjà quelques chiffres en tête que je vais utiliser. Revenons à notre projet dans les images-clés. L'idée sous-jacente, ce que nous allons faire, est de créer deux ensembles distincts de clip-paths. Nous allons configurer un certain chemin qui sera l'état de départ à zéro pour cent. Définissez la règle du zéro pour cent. Ensuite, nous changerons cette moitié de 50 % pour qu'il s'agisse d'un style de vague différent. Cela assurera la transition entre nos deux valeurs. Ensuite, à la toute fin, à 100 %, nous reviendrons à l'état d'origine. Dans cette optique, nous pouvons également utiliser un raccourci qui sépare ces deux valeurs par une virgule, puis placer nos clip-paths à l'intérieur de celles-ci. Commençons. Comme nous l'avons vu dans le générateur, nous utiliserons le clip-path qui est une forme polygonale. Ensuite, entre crochets, nous allons insérer chacun des chemins que nous voulons utiliser. La première position est à zéro pour cent, puis à 65. Ensuite, nous passerons en revue une série de tous les points, comme nous l'avons vu sur le générateur. La valeur suivante est 15 et 49 pour cent, c'est-à-dire toutes les valeurs présentes séparées par une virgule, 32 pour cent et 55 pour cent, 58 et 69, 69, 74, 82 et 89, 94, 93, 100 pour cent et 100 pour cent, et le dernier pour celui-ci est zéro pour cent et 100. Il s'agit du début et la fin de notre transition. Ensuite, nous pouvons passer à une valeur différente à l'intérieur des 50 pour cent. Comme auparavant, nous allons configurer notre clip-path, qui est un polygone, puis insérer nos valeurs. Ces valeurs seront une petite variante des chiffres ci-dessus, cela donne un effet subtil, nous commencerons à zéro pour cent et 60 pour cent, 12 et 65, 31 et 66, 49 et 62, 57 et 50, 68 et 45 pour cent, 100, 46, 100, 100, 100, et enfin à zéro pour cent et 100. Voici notre clip-path maintenant terminé. Nous allons faire la transition entre ces deux éléments à l'intérieur de notre vague, comme toujours nous le ferons avec l'animation , en transmettant le nom des images-clés. Faites en sorte que cela soit relativement lent pendant six secondes. Nous voulons également répéter cela avec Infinite. Maintenant, dès que vous faites cela, vous remarquerez que l'animation commence à prendre effet, mais ce n'est pas tout à fait l' effet que nous voulions. Nous voulons conserver les contours de ce café au bord de l'eau à tout moment et insérer efficacement la vague à l'intérieur. Actuellement, comme vous pouvez le constater, nous avons été supprimés texte du plan plutôt que de placer la vague à l'intérieur. Pour ce faire nous allons également accéder à notre vague juste au-dessus. Nous ajouterons les pseudo-éléments d'avant. Cela ajoute efficacement un élément d'enfant avant notre vague. Créer efficacement quelque chose juste avant ces éléments p sans le créer réellement. Mais que voulons-nous réellement créer ? Nous voulons insérer notre animation, afin de pouvoir la découper à notre place et la coller dedans. Assurez-vous que les éléments que nous venons de créer ont également le même contenu que celui que nous voyons ici. Nous pouvons également ajouter la propriété de contenu qui va ajouter le texte de Waterside Cafe. Cela lui permet de conserver la même forme que celle que nous avons actuellement. Mais comme vous pouvez le constater maintenant, si nous économisons, nous avons effectivement deux éléments. C'est avant les éléments, et c'est celui que nous avons créé avec les éléments p. La première étape consiste à le supprimer des documents et à le placer directement derrière. Nous pouvons le faire en définissant la valeur de position CSS comme étant la valeur absolue. Cela supprime efficacement le flux du reste du contenu, ce qui signifie qu'il ne prend pas de place. Maintenant que nous avons terminé, ce contenu se trouve maintenant derrière la vague d'origine ou le texte original, ce qui signifie que nous ne pouvons pas le voir. Pour voir cela, nous devons en fait lui donner de la couleur. Réglons ce paramètre en bleu clair, de la même couleur que le contour du texte. Cela nous donne ce bel effet de vague d'eau, qui semble se trouver à l'intérieur du texte. 13. Merci: Toutes mes félicitations de ma part pour avoir suivi ce cours et être arrivé jusqu'au bout. J'espère que vous l'avez apprécié et que également appris de nouvelles techniques. J'espère que vous pourrez mettre certaines de ces techniques en pratique dans un futur projet, et j'ai hâte de voir ce que vous avez créé partageant votre projet dans la zone de projet Skillshare. Encore une fois, merci et j' espère vous voir dans un prochain cours.