Créer un site Web de portefeuille personnel réactif

1. Introduction: Bienvenue dans ce tout nouveau cours, vous expliquera comment créer un site Web de portfolio personnel à un site Web de portfolio personnel partir de zéro à l'aide de trois technologies de base, HTML, CSS et JavaScript. Si vous souhaitez créer votre propre portfolio, qui vous aidera à vous représenter de la meilleure façon possible et à vous faire embaucher. Alors c'est le cours qu'il vous faut. Si vous demandez à l'un des employeurs ou chefs de projet comment choisir les meilleurs développeurs, à chacun d'entre eux. Mais le plus important pour le développeur est de se présenter lui-même avec une bonne valeur par défaut. Si vous connaissez le HTML, le CSS et le JavaScript, vous pouvez déjà créer un très bon site Web de portfolio personnel qui vous permettra de vous exprimer et de montrer à tout le monde vos compétences et vos connaissances. Tout au long de ce cours, nous allons créer un modèle de site Web de portfolio qui sera plein de fonctionnalités et d'effets modernes et esthétiques. Parce que si vous souhaitez créer un site Web en utilisant uniquement ces trois technologies de base, il doit certainement être avancé et cool. Nous ne disons pas qu'il deviendra votre propre site Web de portfolio et que vous pouvez le copier. Mais ce sera une grande source d'inspiration qui vous aidera à créer votre propre portfolio web ou à l'améliorer si vous en avez tous un. Comme nous l'avons déjà dit, nous allons construire ce projet à partir de zéro. Nous n'utiliserons aucun outil, bibliothèque ou framework tiers. Une fois que nous aurons créé un site Web, nous vous apprendrons à héberger le projet et à le rendre accessible à tous. Vous serez également en mesure d'apprendre comment faire fonctionner le formulaire afin d'obtenir les commentaires de vos clients, de quelles parties du projet sont de grande taille afin que chaque utilisateur puisse accéder au site Web à partir de n'importe quel appareil optique. Je pense que ce cours sera intéressant et utile pour tout le monde. Je veux dire, c'est du tartare ou des développeurs expérimentés. Alors n'attendez pas et rejoignez-nous 2. Configuration: Bonjour et bienvenue au cours. Nous sommes heureux que vous soyez ici et nous espérons que vous apprécierez le cours avant d' approfondir et de commencer à créer nos projets. Tout d'abord, nous devons préparer notre environnement de travail. Je suis sûr que la plupart d'entre vous sont déjà prêts à écrire le code. Si c'est le cas, n'hésitez pas à ignorer cette vidéo et à vous lancer immédiatement dans les projets. Mais si ce n'est pas le cas, ce n'est pas le problème. Allons-y et configurons quelques outils. Tout au long de ce cours, nous aurons besoin de deux outils principaux , à savoir un navigateur Web moderne et un éditeur de texte. En tant que navigateur Web, je vais utiliser principalement Google Chrome. Et dans certains cas, nous aurons également besoin de l'aide de Mozilla Firefox. Je suis sûr que vous savez déjà comment installer ce navigateur Web, et je pense que vous les possédez déjà tous. Quoi qu'il en soit, voyons comment les télécharger. Pour accéder à Google Chrome, nous devons accéder à cette URL ici et télécharger le navigateur Web. Le processus d'installation est assez simple, je ne vais donc pas le parcourir. En ce qui concerne Mozilla Firefox, vous devez utiliser cette URL et télécharger le navigateur Web à partir d'ici. Les deux liens seront joints à cette conférence. Très bien, passons à autre chose et parlons de l'éditeur de texte. Nous allons utiliser Visual Studio Code car c'est actuellement l'un des meilleurs éditeurs de texte au monde. Bien sûr, vous pouvez vous sentir libre et utiliser votre éditeur de texte préféré. C'est à vous de décider, mais je recommande d'utiliser le code VS. Pour télécharger le code VS, vous devez visiter ce site Web et obtenir l'éditeur de texte pour Windows, Mac ou Linux. Ce lien sera également joint à cette conférence. Le processus d' installation Visual Studio Code est également très simple, donc je suis sûr que cela ne posera aucun problème. Très bien, donc une fois que vous aurez installé les deux outils, vous serez prêt à partir Passons donc directement aux projets 3. Aperçu du projet: Bonjour et bienvenue à la toute première conférence de ce cours au cours de laquelle je vais passer en revue le projet et décrire toutes ces sections en détail. Avant cela, je voudrais mentionner que le projet sera créé sur la base de HTML, CSS et JavaScript. Vous devez donc avoir une compréhension de base de ces technologies afin de suivre toutes les conférences. Très bien, allons-y et passons en revue les projets. La première section que nous allons construire sera l'atterrissage, dans laquelle nous avons ces cercles animés. Ils bougent. Une fois que nous avons déplacé le curseur. Toujours au centre du prêt, nous avons la photo du web designer et des cercles improbables. Il se déplace à l'intérieur de son propre cercle et crée cet effet agréable et cool. De plus, l'image est fusionnée avec l'arrière-plan. Vous allez donc apprendre à créer cet effet à l'aide du CSS. Dans le coin supérieur droit de la page , vous trouverez quelques éléments de navigation. Ils sont connectés aux sections appropriées. Si nous cliquons dessus, nous naviguerons vers les sections pertinentes. De plus, si nous commençons à faire défiler le bas, les éléments de navigation se transformeront en icône de menu. Et si nous cliquons dessus, ils s'afficheront à nouveau. Dans le coin supérieur gauche de la page, nous avons le logo, le nom complet du designer. Sur les côtés gauche et droit du prêt, vous pouvez voir le texte collant. Si je commence à faire défiler la page vers le bas, elle sera bloquée pendant un certain temps. D'accord ? En plus de cela, nous avons ici un bouton avec un bel effet de survol. Si je clique sur ce bouton, cela nous dirigera vers la section des projets. Très bien, c'est tout pour l'atterrissage. Ensuite, nous avons la section À propos de moi. Il inclut des textes de grande taille qui, par défaut, sont mélangés à l'arrière-plan. Et si je commence à survoler le texte, les électrons s' éclairciront avec de jolis effets d'animation En outre, nous avons ici un bouton similaire qui nous permet d'accéder à la section contact. OK, c'est tout pour cette deuxième section. Vient ensuite la section du projet, qui est selon moi l'une des sections les plus intéressantes du projet. Par défaut, nous voyons ici six projets différents. Si je les survole, les images commenceront à défiler correctement vers le haut dans un environnement 3D. Si je clique sur l'un des projets, ils s'agrandiront. Vous pourrez faire défiler la page vers le bas et vérifier le projet en détail. Nous avons ici le bouton de fermeture. Si je clique dessus, le projet sera fermé. En plus de cela, nous avons ici le bouton Afficher plus. Si je clique dessus, quelques projets cachés s'afficheront. La page défilera automatiquement vers le bas. Le texte du bouton sera remplacé par Afficher moins. Et la flèche tournera également en fonction du sens de défilement. Si je clique sur le bouton, les projets seront masqués. Très bien, vient ensuite la section Services. Nous avons ici quelques services différents affichés dans une grande police. Si je clique dessus, ils s' agrandiront et certaines descriptions s'afficheront. D'accord, après ce sera la dernière section du projet, qui est le contact. Il se compose de deux champs de saisie différents. Et nous avons également ici un bouton Soumettre. En fait, ce formulaire fonctionne. Je veux dire que les champs sont validés et que l'utilisateur peut également envoyer un message. Parce qu'une fois que nous aurons construit le projet, nous l'hébergerons et le mettrons en œuvre. Si je sens les champs. Cliquez ensuite sur Envoyer la demande, le formulaire sera soumis et vous recevrez le message. Comme je l'ai dit, le formulaire est validé. Par exemple, si je laisse les champs vides et que je soumets le formulaire , nous recevrons des messages d'erreur. Juste à la fin de la page, nous avons un joli diaporama des icônes des réseaux sociaux En plus de cela, nous avons quelques fonctionnalités supplémentaires dans le projet. Comme vous pouvez le voir, le curseur comporte le cercle et les points, se déplacent bien avec le curseur. Ensuite, si je passe la souris sur certains éléments tels que des projets ou des services, le cercle changera de forme et nous obtiendrons la forme des éléments de Harvard En plus de cela, nous avons un bel effet avec l'icône du menu et la barre de progression. Si je les survole, ils deviendront collés au curseur . Mais si je déplace le curseur loin de leur position initiale, ils retrouveront leur position par défaut. Enfin, je vais parler de la barre de progression. Il est placé dans le coin inférieur droit et a une position fixe. Une fois que nous commençons à faire défiler la page vers le bas, ce cercle blanc commence à ressembler à la ligne rouge. Une fois que nous serons descendus jusqu'à la page, le cercle entier sera rempli. Et la flèche tournera également. Si je clique sur la barre de progression, nous retrouverons le haut de la page. En plus de cela, nous pouvons cliquer sur la barre de progression. Cela nous permettra de naviguer section par section. La barre de progression fonctionne avec la section du projet. Si je développe le projet, la barre de progression sera mise à jour et elle commencera à fonctionner conformément à l'image. Mais si je ferme le projet, la barre de progression continuera de fonctionner conformément à la page. Très bien, tout tourne autour de ces sections et fonctionnalités du projet Comme nous l'avons déjà dit, il s'adaptera aux différentes tailles d'écran. Si j'inspecte la page , passe en mode réactif et vérifie le projet. Sur les différentes tailles d'écran. Vous verrez qu' il est réactif. Je voudrais mentionner ici une chose, le projet est construit sur une très grande taille d'écran. Cela coïncide avec 1920 pixels de largeur et 1080 pixels de hauteur Si vous utilisez une taille d'écran relativement plus petite que celle du projet, il se peut que cela ne soit pas très beau pendant les cours. Je recommande donc de passer en mode réactif et de régler la largeur et la hauteur de cette manière. Quoi qu'il en soit, vous n'avez pas à vous inquiéter car à la fin du projet, nous rendrons le site web réactif Comme je l'ai déjà mentionné, nous allons héberger le projet et le mettre en ligne à l'aide de Netlify Je pense donc que nous sommes prêts à commencer. Ensuite, nous devons configurer certains outils et nous serons prêts à partir. Passons donc à autre chose. 4. Préparer l'arrière-plan et créer des styles communs: Très bien, nous sommes donc prêts à commencer à construire nos projets. J'ai créé un nouveau dossier sur le bureau dans lequel je n' ai que les images. Je veux dire, nous avons ici quelques dossiers différents pour différentes images. Allons-y, ouvrons ce dossier dans le code VS et créons nos fichiers de travail. Nous avons besoin de trois fichiers différents. Le premier sera index.html. Ensuite, le suivant sera appelé CSS. Quant au troisième, il devrait s'agir de scripts point js. Ouvrez ensuite le fichier index.html et créez le document HTML de base. Pour cela, je vais utiliser l'un des packages de code VS intégrés qui s'appelle emmet Nous devons mettre un point d' exclamation puis appuyer sur Tab ou Entrée Nous avons ici des balises HTML de base. La première chose que je vais faire est de changer le titre. Insérons ici. Nick Brown, designer créatif. Ensuite, relions les fichiers CSS et JavaScript. Je vais ouvrir la balise de lien dans les éléments de tête. Ensuite, nous devons spécifier ici le chemin du fichier. Pour le fichier JavaScript, nous devons ouvrir la balise script juste au-dessus de la balise body de fermeture. Ensuite, dans l' attribut source , nous devons spécifier le chemin du fichier. Très bien, les trois fichiers sont liés et nous pouvons maintenant exécuter le projet dans le navigateur Pour ça. Comme je l'ai déjà mentionné précédemment, je vais utiliser Live Server. Encore une fois, cela nous permet d'exécuter le projet en direct dans le navigateur et d'apporter mises à jour et des modifications sans actualiser la page à chaque fois. Enfin, je vais placer le navigateur et l' éditeur de texte de manière à ce que nous puissions commencer. Donc, la première chose que je vais faire est de créer ces arrière-plans sombres. Nous allons également créer des styles réinitialisés et communs. Tout d'abord, commençons par le balisage HTML Nous allons insérer vos commentaires. Conteneur de pages. Et un contenant hors page. Ouvrez ensuite la balise div et attribuez-la à son conteneur de classe. Cet élément inclura donc l'intégralité du contenu de la page Web. Ensuite, je vais créer une autre balise div pour l'arrière-plan de la page Mais d'abord, insérons vos nouveaux commentaires. En fait, je préfère séparer le code par des commentaires car cela nous permettra d'écrire un code plus propre et plus compréhensible. Insérons donc votre page BG et votre vg hors page. Très bien, c'est tout à propos du balisage HTML pour le moment, passons au fichier CSS Comme je l'ai dit, je vais préparer quelques styles de réinitialisation et courants. Insérons donc de nouveaux commentaires. Styles courants. De styles courants. Sélectionnez ensuite tous les éléments à l'aide d'un astérisque. Donc, tout d'abord, je vais me débarrasser des paramètres par défaut, de la marge et du rembourrage de chaque élément Mettons-les tous les deux à zéro. Ensuite, je vais créer la borderbox de la taille d'une boîte. Dans ce cas, le rembourrage et la bordure seront inclus dans la taille de l'élément Ensuite, je vais supprimer le sous-jacent par défaut des liens. Nous devons donc utiliser une décoration de texte avec la valeur none. De plus, je souhaite supprimer les puces par défaut des éléments de la liste. Définissons le style de la liste, tapez sur aucun. Ensuite, je vais supprimer le contour par défaut des éléments. Mettons-le à zéro. En fait, dans les grandes lignes, je suis dans la bordure qui apparaît une fois que nous nous concentrons sur les forums et les boutons. La dernière chose que je souhaite faire est donc de définir la famille de polices. Tout au long de ce projet, nous utiliserons deux polices Google différentes. Allons-y donc et visitons le site Web de Google Fonts. La première police que je vais rechercher s'appelle euro. Sélectionnons tous les styles. Pour lier la police, nous avons deux méthodes différentes. Nous pouvons soit copier le lien ici et le coller dans l'élément d' en-tête du fichier HTML. Ou nous pouvons cliquer sur Importer, récupérer cette URL et la coller dans le fichier CSS. Ce téléphone sera notre téléphone par défaut. Définissons-le pour chaque élément. Nous avons besoin ici du nom de la police, JIRA et sensoriel. Très bien, le prochain téléphone que je vais rechercher s' appelle Poppins Je vais sélectionner tous ces styles sauf ceux qui sont préférés par les Italiens. Ensuite, récupérez le lien et collez-le également dans le fichier CSS. Très bien, donc tous ces styles seront appliqués à chaque élément qui sera créé tout au long du projet Ensuite, je vais m'occuper de l'unité de mesure. Tout au long du projet, nous utiliserons la rampe comme unité de mesure. Par défaut, une mémoire vive est égale à 16 pixels car la taille de police de l'élément HTML est égale à 16 pixels. Je souhaite convertir une RAM en dix pixels car je pense que ce sera plus pratique et plus facile à calculer. Pour ce faire, nous devons réduire la taille de police des éléments HTML et la porter à 62,5 %. Donc, dans ce cas, un rem sera égal à dix pics. Très bien, c'est tout en ce qui concerne les styles courants pour le moment, allons-y et prenons soin de l'arrière-plan Insérons de nouveaux commentaires pour la page dont nous avons besoin sur la page BG et sélectionnons les éléments div L'arrière-plan va donc être corrigé. Si nous examinons le projet terminé et que nous faisons défiler la page vers le bas, vous verrez qu'il est corrigé et qu'il ne bouge pas. Définissons donc sa position à corriger. Ensuite, je vais définir cette largeur et cette hauteur. Réglons la largeur à 100 %. Pour ce qui est de la hauteur, je vais la faire correspondre à 100 % de la fenêtre d'affichage Par conséquent, nous avons besoin que ce soit h. D'accord ? Après cela, je vais définir l'image comme arrière-plan. Tout d'abord, utilisons une fonction de dégradé linéaire car je veux rendre l' image un peu plus sombre. Insérons votre valeur RGBA avec une couleur noire et avec sept points d'opacité Ensuite, utilisez à nouveau la même valeur RGBA avec une opacité de 0,7 Ensuite, je vais définir le chemin de l'URL de l'image. Et nous devons spécifier ici le chemin de l'image. Nous avons un dossier d'images et l' image d'arrière-plan, appelée bg dot JPG. En plus de cela, définissons la position au centre et définissons également l'arrière-plan. Répéter, pas de répétition. Enfin, lorsque la taille de l'arrière-plan est définie, mettons-le en couleur. Très bien, nous avons donc ici notre image d' arrière-plan en plein écran Ensuite, je vais m' occuper du curseur. Passons donc à autre chose. 5. Créer un cercle de souris animé: D'accord, donc une fois que nous aurons préparé arrière-plan et créé des styles communs. Ensuite, je vais retirer le curseur. Je veux dire ce cercle et le point, qui se déplace en fonction des mouvements de la souris. De plus, si nous arrêtons la souris, vous verrez que le cercle et les points s'animent De plus, si nous vivons la page, ils disparaîtront. Très bien, c'est donc ce que nous allons faire dans cette vidéo. Tout d'abord, créons ces deux éléments dans le fichier HTML. Je vais le faire à l' extérieur du conteneur. Insérons de nouveaux commentaires, le cercle de la souris et le cercle de la souris. Nous aurons donc deux éléments différents. Le premier sera le cercle de la souris, et le second sera constitué de points. Je veux dire point de souris. Très bien, asseyons-nous à propos du HTML. Suivant. Je vais styliser les deux éléments. Insérons donc de nouveaux commentaires dans le CSS juste après les styles communs. Nous avons besoin de la souris Circle. Et de Mouse Circle. Sélectionnez ensuite Mouse Circle. Dans un premier temps, je vais définir sa largeur et sa hauteur. Réglons les deux à six RAM. Ensuite, nous avons besoin d'une bordure dont les valeurs sont égales à 0,1. Et comme couleur, je vais utiliser le C7, un six contre deux Et je vais également arrondir l'élément en utilisant un rayon de bordure de 50 %. Très bien, nous avons donc le cercle. Ensuite, nous devons prendre soin de sa position. Je vais fixer la position 2. l'instant, le cercle n'est plus réalisable car il s'est retrouvé en arrière-plan. Et pour résoudre ce problème, utilisons la propriété z-index Nous devons lui attribuer une valeur supérieure à zéro. Disons 300. Très bien, c'est tout en ce qui concerne le cercle. Pour l'instant Allons-y et occupons-nous du deuxième élément, qui est un point. Sélectionnons-le et définissons sa largeur et sa hauteur. Je vais faire en sorte qu'ils pointent tous les deux de fibrine et aussi changer la couleur de fond Utilisons neuf P 0 D E. Nous avons donc ici les points. Nous devons maintenant prendre soin de sa position. Nous devons fixer sa position. En fait, certaines de ces tuiles seront similaires pour les deux éléments afin que nous puissions les sélectionner simultanément. Ensuite, nous pouvons récupérer ces trois lignes de code et les coller. Alors toi. C'est bon, c'est ça. heure actuelle, les deux éléments sont stylisés et il est maintenant temps de les faire fonctionner à l'aide de JavaScript La première chose à faire est sélectionner les deux éléments. Créons donc une nouvelle variable. Je vais l'appeler Mouse Circle. Ensuite, sélectionnez-le à l'aide de la méthode de sélection de requêtes. Nous devons spécifier ici le nom de la classe, mouse Circle. Ensuite, je vais sélectionner le point de la souris. En fait, nous pouvons dupliquer cette ligne de code. Modifiez ensuite le nom de la variable. Ce sera le point de la souris. Et modifiez également le nom de la classe. Nous avons besoin d'un point de souris. OK, après cela, nous devons créer une fonction dans laquelle nous devons définir les positions supérieure et gauche des deux éléments. Dans un premier temps, parlons de commentaires non sécurisés. Mouse Circle et du Mouse Circle. Créez ensuite une fonction de flèche. Je vais l'appeler Mouse Circle N. Cette fonction prendra deux paramètres, X et Y. Ces paramètres seront les valeurs des propriétés supérieure et gauche Pour les définir, je vais utiliser le style et les propriétés de texte CSS. Attachons la propriété de style à Mouse Circle, suivie de la propriété fiscale CSS, dans laquelle nous pouvons définir plusieurs styles CSS. Comme nous l'avons dit, nous devons définir les positions supérieure et gauche comme la valeur d'une position difficile. Je vais passer ici le paramètre Y, suivi des pixels. Ensuite, nous avons besoin d'une propriété gauche avec une valeur de X pixels. Allons-y, dupliquons cette ligne de code et modifions le fait d'encercler deux points et modifions le fait d'encercler deux points. D'accord, nous devons maintenant appeler cette fonction et définir les arguments appropriés pour les paramètres X et Y. Nous devons exécuter cette fonction lorsque la souris bouge. Je veux dire, nous devons associer les événements de mouvement de la souris aux éléments du corps. Et une fois que cet événement est déclenché, nous devons appeler cette fonction. Dans un premier temps, attachons un écouteur d' événements au corps. Lorsqu'un corps de points du document est suivi de la méthode d'ajout d'un écouteur d'événements Ensuite, nous devons passer ici le type d'événements, qui sera le déplacement de la souris. Et nous avons également besoin ici d'une fonction de rappel, qui sera exécutée une fois l'événement déclenché De plus, je vais passer ici l'objet de l'événement. Dans un premier temps. Voyons comment fonctionne cet événement sur la console . Ouvrons les outils de développement et passons à l'onglet console. Donc, une fois que nous commençons à déplacer la souris, l' événement se produit. Hein ? Maintenant, je veux regarder l'objet de l'événement, que nous avons transmis ici dans la fonction de rappel Alors maintenant, si nous déplaçons la souris, nous allons obtenir l' objet d'événement de la souris dans la console. Si nous en avons sélectionné huit, nous trouverons ici de nombreuses propriétés différentes. Nous allons utiliser le client X et le client. Pourquoi des propriétés ? En fait, ils nous indiquent la distance entre les bords supérieur et gauche de la fenêtre d'affichage Ces valeurs doivent donc être les arguments de la fonction. Je veux dire que ces valeurs seront les positions supérieure et gauche du cercle et des points. Tout d'abord, créons des variables. Je vais utiliser la déclaration let. Nommons la variable X. Elle doit être égale à E point client X. Ensuite, dupliquons cette ligne de code et changeons X en Y. Ensuite, nous devons appeler la fonction, je veux dire Mouse Circle F N, et nous devons passer X et Y comme arguments Alors maintenant, si nous déplaçons la souris le cercle et les points se déplaceront avec le parcours. Hein ? Maintenant, comme vous pouvez le voir, nous devons légèrement modifier la position des deux éléments car nous avons besoin que le curseur se trouve au centre du cercle avec un. Pour ce faire, nous devons déplacer les deux éléments selon les axes X et Y en utilisant -50 % de la fonction Transform Translate Et nous devons passer ici à -50 % deux fois. OK, maintenant les positions des deux éléments sont fixes. Et la seule chose que nous avons à faire est d' ajouter un peu d'animation aux deux éléments. Pour cela, nous devons utiliser des images-clés CSS. Tout d'abord, créons l' animation pour le cercle de souris. Pendant l'animation, je vais donc augmenter et diminuer la taille des éléments plusieurs fois. Créez des images-clés. Je vais l'appeler Mouse, Circle et lui. Je veux dire de l'animation. Ainsi, à 0 %, la largeur et la hauteur seront de six RAM. Ensuite, dupliquons ce code. La prochaine étape sera de 25 %. Je vais augmenter les deux valeurs à huit RAM. Ensuite, dupliquez le code. La prochaine étape sera de 35 %. La largeur et la hauteur seront celles de la mémoire vive. Ensuite, nous en aurons 70 %. Les valeurs seront un tram. Pour ce qui est de la dernière étape, je veux dire 100 %, nous avons à nouveau besoin de valeurs par défaut, six rampes. D'accord ? Les images-clés sont donc prêtes, et nous devons maintenant appliquer ces règles au Mouse Circle Allons-y et utilisons la propriété d'animation. Tout d'abord, nous devons spécifier le nom des images-clés, Mouse Circle Anime Ensuite, pour spécifier, la durée sera de 10 s. De plus, nous allons exécuter l' animation à l'infini Ensuite, je vais utiliser l'une des fonctions de chronométrage de l'animation, linéaire. Très bien, comme vous pouvez le voir, le cercle s'anime Faisons cela de la même manière que pour les points de la souris. Dans le cas des points de souris, je ne vais augmenter la taille qu'une seule fois. Créons donc des images-clés CSS. Je vais l'appeler Mouse Dots, Anime. Donc à 0 %, je vais créer 0,5 RAM en largeur et en hauteur. Ce sont les valeurs par défaut qui seront fixées à 55 % à l'étape suivante. Changeons les valeurs, faisons-les 1,5 g. Et puis à la fin de l' animation, je veux dire 100 %. Nous avons besoin, encore une fois, de la valeur par défaut est de 0,5 g, non ? Les images-clés sont donc préparées pour les points de la souris. Allons-y et attribuons-lui une propriété d'animation. Nous avons besoin ici du nom des images-clés, de l'anim des points de la souris, suivi de la durée de 10 s. Encore une fois, nous avons besoin de l'infini et D'accord ? Comme vous pouvez le voir, les deux éléments sont animés et nous avons ici un bel effet Avant de terminer cette conférence, je vais faire deux choses. Une fois que le curseur quitte la page, je souhaite masquer les deux éléments. Pour cela, je vais utiliser l'un des événements appelés mouse leave. Attachons l' écouteur d'événements au corps. Ensuite, nous devons spécifier ici l'événement mouse leave, suivi de la fonction de rappel Donc, pour masquer les éléments, je vais utiliser l'opacité avec la valeur zéro Ainsi, lorsque l'opacité des points de style point Mouse Circle est nulle, dupliquez cette ligne de code et modifiez le fait d' encercler deux Maintenant, si nous quittons la page, le cercle et le point disparaîtront. Et si nous revenons, ils réapparaîtront. Très bien, nous avons presque terminé. Nous devons juste faire une dernière chose. En fait, nous avons ici un petit problème. Si je recharge la page et que je laisse la souris en dehors de la page, le cercle et le point se retrouveront dans le coin supérieur gauche de la page Nous n'en avons pas besoin. Nous devons régler ce problème. Je vais masquer les deux éléments par défaut , puis les rendre visibles uniquement si les événements de déplacement de la souris se produisent. Nous devons donc attribuer aux deux éléments l'opacité zéro par défaut Ensuite, nous devons passer l'opacité 1 par le haut et laisser les positions à l'intérieur de la fonction Alors maintenant, si je recharge la page, le problème sera résolu Très bien, enfin, nous en avons terminé avec le cercle de la souris. Passons à la conférence suivante. 6. Créer et personnaliser l'en-tête de site Web: Très bien, il est maintenant temps de commencer à travailler sur notre première section, qui sera cette page d'accueil Nous avons ici quelques éléments différents avec de jolis effets d'animation. Ces cercles se déplacent une fois que nous déplaçons la souris. Et comme vous pouvez le constater, ils se déplacent dans la direction opposée. Toujours au centre du palier, nous avons un grand cercle dans lequel vous pouvez voir l'image du designer avec de jolis effets. En outre, nous avons un logo dans le coin supérieur gauche de la page, ainsi que des éléments de texte sur les côtés gauche et droit du Landing. Allons-y et commençons à créer un balisage HTML. Insérons de nouveaux commentaires juste après l'arrière-plan de la page. Nous avons besoin de la section 1 de la section 1. Ouvrez ensuite la balise section avec la classe Section one. Comme nous l'avons dit, cette section comprendra quelques éléments différents. Le premier sera le logo. Insérons de nouveaux commentaires pour le logo. Ensuite, je vais ouvrir une balise de lien avec le logo de la classe. Et pour ce qui est du contenu, je vais vous instituer, Nick Brown. Très bien. Ensuite, nous aurons des cercles animés. Insérons donc de nouveaux commentaires pour les cercles animés. Donc, au total, nous aurons cinq cercles. Quatre d'entre eux seront petits et auront également un grand cercle au centre. Ouvrons une balise DIV pour la classe. Cercles. Ce sera l' enveloppe de petits cercles Les cercles seront créés à l'aide de balises DIV. Ouvrons donc TikTok avec les classes Circle et Circle one Le premier sera également le nom de classe Common. Le second, nous l'utiliserons pour des styles individuels. Dupliquons cette ligne de code trois fois , puis changeons les noms des classes. Bien, en plus de cela, nous avons besoin d' un autre cercle dans lequel figurera l'image du designer Ouvre la balise DIV. Ce sera l'emballage. Assignons-nous à la classe Main Circle. Ensuite, insérez votre étiquette d'image. Précisons ici le chemin de l'image. Nous avons un dossier d'images dont nous avons besoin pour sélectionner un dossier appelé Landing. Et puis l'image va être conçue sous forme de points JPG. Très bien, c'est ça, à propos des cercles. Ensuite, je vais créer des éléments de titre, qui seront placés sur les côtés gauche et droit du Landing. Insérons de nouveaux commentaires. Texte en vedette. Et du texte de fond. Je vais ouvrir la balise d'en-tête H4 avec le texte vedette des classes et le texte de fonctionnalité 1 Encore une fois, le nom de première classe sera utilisé pour Common Styles. En ce qui concerne le second, nous l'utiliserons pour les styles individuels en tant que contenu. Insérons votre création. Ensuite, je vais dupliquer cette ligne de code. Modifiez le nom de la classe dans laquelle nous devons inclure le texte, ainsi que le contenu que vous devez concevoir. Très bien, alors parlons du balisage HTML. heure actuelle, rien n'est visible ici car l'arrière-plan est fixe et les éléments se sont retrouvés derrière lui. Réglons ce problème dans un premier temps. Insérons de nouveaux commentaires pour la section 1 du fichier CSS. Sélectionnez ensuite cette section Eléments et modifiez sa position, faites-en une section relative. Maintenant, les éléments sont visibles et nous pouvons commencer à les personnaliser. Définissons la largeur et la hauteur de cette section. Je vais me fixer à 200 %. Quant à la hauteur, elle représentera 100 % de la fenêtre d'affichage. Très bien, il est maintenant temps de personnaliser le logo. Insérons de nouveaux commentaires pour le logo. Sélectionnez ensuite les éléments du lien. Tout d'abord, je vais définir sa position. Faisons en sorte que ce soit absolu. Comme vous vous en souvenez, il sera placé dans le coin supérieur gauche de la page Je vais donc placer la première position sur RAM, car la position de gauche sera de cinq points. Augmentons également la taille de la police, utilisons-la en RAM. Je vais transformer le texte en majuscules Changer aussi la couleur, rendre blanc, non ? C'est tout pour le logo. Nous devons maintenant passer à autre chose et personnaliser le reste des éléments. Avant de commencer par de petits cercles, je voudrais m'occuper du cercle principal car pour l'instant, comme vous pouvez le voir, nous avons ici une grande image qui couvre presque la totalité du prêt. Tout d'abord, je souhaite placer le contenu de cette section, au centre. Et pour cela, utilisons Flexbox. Nous devons régler l'affichage pour qu'il soit flexible. Ensuite, pour envoyer les éléments horizontalement, nous avons besoin de justify-content En ce qui concerne le centrage vertical, nous devons aligner les éléments. Centre. OK, le contenu est donc centré et nous devons maintenant commencer à travailler sur le cercle principal. Tout d'abord, je vais insérer des commentaires, des cercles animés. Et de cercles animés. Sélectionnez ensuite le cercle principal et définissez la largeur et la hauteur. Je vais les régler tous les deux à 55 RAM. Et réglez également la position sur absolue. À l'heure actuelle, l'image est trop grande. Nous devons conserver la taille de l'image, mais nous devons également appliquer un high à l'élément parent. Je suis dans le cercle principal. Je vais donc utiliser overflow hidden. Très bien, maintenant le problème est résolu. Arrondissons l'élément en utilisant un rayon de bordure de 50 %. En plus de cela, nous devons envoyer à l'image à l'intérieur du cercle. Pour cela, nous pouvons utiliser, encore une fois, des livres de flux afin d'éviter d'écrire le même code encore et encore, je vais créer une nouvelle classe dans les Common Styles. Appelons-le centre et attribuons-lui la flexibilité d'affichage, contenu de justification et le centre d'alignement des éléments. Ensuite, je vais supprimer ces styles de l'élément section. Et au lieu de cela, nous pouvons attribuer le centre de classe à la section et au cercle principal. Dans le fichier HTML. l'heure actuelle, l'image est centrée et nous devons la personnaliser un peu. Sélectionnez Image. Maintenant, je souhaite utiliser l'une des propriétés CSS appelée mode mix blend. Cela nous permettra de mélanger l'image avec ce fond sombre. Cette propriété peut accepter différentes valeurs. Tu peux jouer avec eux. Dans ce scénario, je pense que le meilleur est Color. Esquive. Très bien, c'est tout pour le cercle principal. Passons à autre chose et occupons-nous du reste des Cercles. Sélectionnons le wrapper, donnons Elements. Et d'abord, définissez sa position, rendez-la absolue. Et définissez également les propriétés supérieure et gauche, toutes deux à zéro. Ensuite, je vais étendre cet élément à l' ensemble du Débarquement. Pour ce que je vais régler, nous pouvons les masquer à 200 %. Comme vous vous en souvenez, nous avons créé quatre petits cercles différents. Je vais les aligner à l'aide d'une grille CSS. Nous allons créer deux colonnes et deux lignes. Et nous allons placer chaque cercle dans une cellule distincte de la grille. Donc, dans un premier temps, définissons l'affichage sur la grille. Pour définir les colonnes, je vais utiliser une propriété appelée colonnes du modèle de grille. Comme nous l'avons dit, nous aurons deux colonnes similaires. Je vais donc utiliser la fonction de répétition, qui prendra deux arguments. Le premier sera le nombre de colonnes à. Quant au second, ce sera la taille. Comme la taille. Je vais utiliser une unité fractionnaire. Dupliquons cette ligne de code et transformons les colonnes en lignes. D'accord ? Pour voir la disposition de la grille, je vais inspecter la page. Et dans l' onglet Éléments, trouvez les cercles. Comme vous pouvez le voir, nous avons ici un petit bouton appelé grille. Si je clique dessus, la disposition de la grille s'affichera. Nous avons ici quatre cellules différentes et chaque cercle sera placé dans une cellule séparée. Allons-y, sélectionnons Cercle et définissons sa largeur et sa hauteur. Je vais les régler tous les deux à 20 pour qu'ils fonctionnent. Pour les arrondir, utilisez également le rayon avec une valeur de 50 %. Ensuite, je vais utiliser une couleur temporaire. Je veux dire, la couleur de fond. Mettons-le en rouge. Comme vous pouvez le constater, les quatre cercles sont placés dans une cellule séparée. Ils sont alignés automatiquement car nous avons quatre cellules. Et pour les cercles, il n'est pas nécessaire de définir une disposition en grille pour leur cercle. La seule chose que nous devons faire est de placer des cercles au centre des cellules. Et pour cela, nous pouvons utiliser une ligne, le self-center. Il enverra les éléments verticalement. Et nous devons également justifier l'égocentrisme, qui enverra l' élément horizontalement D'accord ? Nous devons maintenant personnaliser chaque cercle séparément. Allons-y et commençons par le cercle. Je vais définir le contexte. Utilisons l'URL et spécifions la partie de l'image. Nous avons besoin d' images de dossiers plutôt que de Landing. Ensuite, nous devons sélectionner Circle one, IMG point JPG. Ensuite, je vais spécifier la position, la placer au centre. Et nous devons également définir la répétition en arrière-plan sur aucune répétition. Et enfin, définissons la taille de l'arrière-plan, faisons en sorte qu'il couvre. Est venu. Nous avons donc ici une belle image de fond. Ensuite, je vais créer une bordure. Définissons sa largeur à 2,5 RAM pour que le style de la bordure soit pointillé Et comme couleur, utilisons un B14 soit 18. De plus, je veux que la bordure soit en dehors de l'image. Et pour cela, nous devons utiliser le clip d' arrière-plan avec la zone de contenu de la valeur. Très bien, voyons voir. Eh bien, dans le premier cercle, pour l'instant, je vais dupliquer ce code trois fois. Modifiez ensuite les noms des classes. Je vais également changer le nom des images. Et en plus de cela, je vais changer les frontières. Pour le second ordre, nous avons besoin la même largeur que pour le style qui va être pointillé Et changez également la couleur. Nous avons besoin de F, F, B, D, 07. Ensuite, pour le troisième cercle, je vais augmenter la largeur. Faisons en une seule RAM. Modifiez ensuite le style. Ça va être le double. Et changez aussi la couleur, faites-en neuf. Biche. Dans le cadre du dernier cercle, la largeur sera de 0,7. Ça devrait être le double. Et comme couleur, utilisons le blanc. Très bien, donc les quatre cercles sont personnalisés. La seule chose que je vais faire est de diminuer leur opacité Attribuons à Circle. Je suis dans le nom de classe commun Opacity 0.5. D'accord ? Enfin, avec les cercles, nous en avons terminé. Ensuite, je vais m' occuper des éléments du texte, qui doivent être placés à gauche et à droite. Allons-y et insérons de nouveaux commentaires. Pour le texte en vedette. Sélectionnons les deux titres avec un nom de classe commun et un texte en vedette Je vais augmenter la taille de la police, la faire fonctionner. Également. Changez la couleur, mettez-les en blanc et transformez le texte en majuscules Très bien, après cela, je vais aligner les deux titres sur les côtés gauche et droit Pour cela, je vais utiliser la marge. Sélectionnons le premier titre avec sa classe individuelle Feature text1 et utilisons la marge avec les valeurs suivantes Je vais le mettre à zéro en haut, puis à R0, à droite. Ensuite, nous aurons zéro en bas et ferons demi-tour sur le côté gauche. Dupliquons ce code. Changez le nom de la classe. Nous avons besoin de Feature text2 et modifions également les valeurs Je vais laisser la valeur de la partie supérieure à zéro. Ensuite, nous aurons un brun clair supérieur à zéro, puis automatique. Très bien, considérons donc que les éléments sont alignés de la bonne manière Ensuite, je vais placer les lettres verticalement dans une colonne. Pour cela, nous devons définir la largeur à zéro. Nous devons également utiliser l'une de ces propriétés CSS appelée word wrap avec un mot de rupture de valeur. Les électrodes sont donc placées verticalement. Ensuite, je vais augmenter l' espace entre les lettres. Pour cela, nous pouvons augmenter la hauteur de ligne. Passons à 3,5. Très bien, nous avons presque terminé le Débarquement. La seule chose que je souhaite faire est de modifier la position de ces éléments de titre. Si nous examinons le projet terminé et que nous faisons défiler la page vers le bas, vous verrez que les titres restent collants pendant un certain temps. Définissons donc leur position et rendons-la cohérente. Donc, si nous voulons placer les éléments sur le bord supérieur de la fenêtre d'affichage, nous devons définir la position supérieure sur zéro Très bien, enfin, nous avons personnalisé une page de destination. Il est maintenant temps de le dynamiser. Je veux dire, nous devons y ajouter de belles animations et des effets. Passons donc à la conférence suivante. 7. Animer les cercles: Très bien, nous avons donc personnalisé une page de destination dans une conférence précédente, et nous devons maintenant la rendre dynamique Nous devons animer ces cercles avec le mouvement de la souris. Avant de commencer à travailler dessus, je voudrais choisir un petit problème. Nous avons deux mots à gauche et à droite. Le second aurait été un design, pas un designer. Modifions-le donc dans le fichier HTML. Hein ? Nous allons donc faire fonctionner l' animation à l' aide de JavaScript. Passons au fichier script.js. La première chose que je vais faire est de sélectionner les cercles et l'image. Avant cela, je voudrais vous apporter un changement rapide. En fait, ce fichier va être volumineux, il serait donc préférable de placer ces deux variables dans les commentaires. OK, après cela, je vais créer de nouveaux commentaires pour les cercles animés ci-dessous. Ensuite, comme nous l'avons dit, je vais sélectionner les cercles et l'image. Créons une nouvelle variable. Je vais l'appeler Circles. Nous avons plusieurs cercles, donc je vais utiliser la méthode all du sélecteur de requêtes Précisons ici le nom de classe Circle. Ensuite, je vais sélectionner l'image. Créons une nouvelle variable , appelons-la IMG principale et sélectionnons Image à l'aide de la méthode de sélection de requêtes Nous devons spécifier ici le nom de classe des éléments parents, principal Circle, puis le nom cible, IMG. Très bien, après cela, je vais créer une fonction, appelons-la animate Circles Cette fonction prendra trois paramètres. Le premier sera un objet d'événement et comportera également des paramètres X et Y. Ils nous aideront à définir les directions des mouvements de la souris. Encore une fois, nous devons déplacer des cercles, nous voulons que la souris bouge et nous devons les déplacer dans la direction opposée. Cela signifie que si la souris va vers la gauche, les cercles doivent se déplacer vers la droite. Et nous avons besoin de la même chose verticalement. Si la souris pointe vers le haut, le cercle doit descendre Très bien, donc tout d'abord, je tiens à mentionner ici le principal problème de dysfonctionnement, à savoir que nous devons définir la position de la souris en utilisant le client X et le client Pourquoi des propriétés dans la position de la souris ? Je veux dire la position de huit quand il s'arrête de bouger. Ensuite, nous devons comparer ces valeurs à la nouvelle position de la souris et nous obtiendrons la direction du mouvement de la souris. Alors allons-y et commençons à écrire le code. Ce sera plus compréhensible et la pratique consiste à créer deux variables pour le client X et le client. Pourquoi des propriétés ? Je vais appeler la première variable X. Elle doit être égale à zéro. Dupliquez ensuite cette ligne de code et remplacez X par Y. Ensuite, nous devons stocker les valeurs de decline X et client Pourquoi des propriétés dans ces variables ? Nous avons donc besoin ici qu' on me demande d'être égal à E point client X et qu'il en va de même pour la direction Y. Encore une fois, ces variables enregistreront la dernière position de la souris. Maintenant, si nous voulons connaître la direction du mouvement de la souris, nous pouvons simplement comparer les paramètres X et Y aux variables amex et M Y. Pour cela, nous devons utiliser une instruction if dans laquelle nous devons définir si X est inférieur à M X. Si cette condition est vraie, je vais lancer sur la console des textes tels que déplacé vers la gauche. Ensuite, je vais créer une autre instruction if dans laquelle nous devons définir la direction y. Nous avons donc besoin que Y soit inférieur à MY. Ensuite, je vais courir vers la console, me déplacer vers le haut. Hein ? Nous pouvons maintenant appeler cette fonction lorsque les événements de déplacement de la souris nous inspirent Nous avons tous déjà utilisé cet événement auparavant. Nous devons donc appeler cette fonction. Ici. Nous devons passer les arguments E, X et Y. D'accord ? Examinons donc la page et passons à l'onglet console. Si nous montons, nous l'aurons dans la console. Et si je me déplace vers la gauche, nous obtiendrons le bon résultat dans la console. Nous savons maintenant comment obtenir les directions des mouvements de la bouche et nous avons pu définir le mouvement des cercles. De la même manière, nous pouvons définir la direction du mouvement de la souris vers la droite et vers le bas D'accord ? Ainsi, lorsque la souris se déplace vers la gauche , les cercles doivent se déplacer vers la droite. Et pour ce faire, nous devons augmenter les valeurs de leurs positions gauches. Tout d'abord, nous devons parcourir les cercles. Nous les avons sélectionnés à l' aide de la méthode du sélecteur de requêtes , qui renvoie objet semblable à un tableau appelé liste Nous devons donc parcourir la liste des nœuds et modifier la position de décalage pour chaque cercle. Pour parcourir la liste des nœuds, je vais utiliser l'une des méthodes d' assistance du tableau appelée for-each Nous devons l' attacher aux cercles. La méthode forEach prend un argument. Ce sera la fonction de rappel, qui prend elle-même un paramètre et c'est l' élément actuel pendant la boucle Comme nous l'avons dit, nous devons changer la position gauche du cercle. Par conséquent, nous avons besoin ici d'une propriété appelée Style, suivie de left. Et je vais changer la position de cent pixels. Maintenant, si je déplace la souris vers la gauche, les cercles ne bougeront pas car ils ont actuellement une position statique par défaut. Nous devons donc le modifier et le rendre relatif. Alors maintenant, si je me déplace vers la gauche, les cercles se déplaceront vers la droite. À l'heure actuelle, ils se sont déplacés sans aucun effet. Nous allons résoudre ce problème en utilisant les propriétés de transmission du soleil. Dans un premier temps, occupons-nous des mouvements. Outre ces cercles, nous devons également déplacer l'image. Nous devons donc utiliser le style IMG principal, pas gauche. Et la valeur de cent pixels. Comme pour les cercles, nous devons changer la position de l'image et la rendre relative. Donc, si nous nous déplaçons vers la gauche, les cercles et l'image se déplaceront vers la droite, vers la droite. Allons-y et prenons soin du mouvement vers le haut. Nous pouvons simplement récupérer ce bloc de code et coller dans la seconde instruction if. La seule chose que nous avions à faire était de changer la position de gauche en haut. Donc, si je déplace la souris vers le haut, les éléments descendront. Hein ? Deux directions sont donc prêtes. Nous devons maintenant nous occuper du reste des directions. Je veux dire, lorsque nous déplaçons la souris vers la droite et vers le bas, pour cela, nous devons utiliser des instructions else if lesquelles nous devons prendre en compte des conditions opposées Nous avons donc besoin ici que X est supérieur à M X. Si cette condition est vraie, nous devons déplacer les éléments vers la gauche. Par conséquent, nous devons diminuer les valeurs de la position gauche. Copions ce code. Collez-le ici et ajoutez des signes moins. Nous avons besoin de la même chose pour la seconde déclaration if. Créons sinon, si comme condition dont nous avons besoin, Y est supérieur Ensuite, récupérez le code à partir d'ici et encore une fois, ajoutez les signes moins. Comme vous pouvez le constater, les quatre directions fonctionnent correctement. Nous devons maintenant rendre cette situation plus fluide. Pour cela, nous devons utiliser la transition. nécessaire, il vous reste une durée de 2 secondes . Et les 2 premières secondes. En fait, nous avons besoin de la même transition pour l'image également. Reprenons donc cette ligne de code et collons-la pour l'image. Très bien, nous avons maintenant un bel effet lisse. En fait, nous avons ici un petit problème. Si je recharge la page et que je commence à déplacer la souris, les cercles vont sauter vers le haut Et pour y remédier, nous devons définir le sommet et laisser les possessions par défaut. Mettons-les tous les deux à zéro. Nous avons également besoin de la même chose pour l'image. Très bien, enfin, nous avons terminé. Avant de terminer cette conférence, je voudrais faire une dernière chose. Nous avons utilisé ici 100 pixels à quelques reprises. Et il se peut que vous deviez modifier cette valeur ultérieurement. Et pour cela, vous devez le changer partout. Je pense donc qu'il serait préférable de stocker cette valeur dans la variable, puis d'utiliser cette variable ci-dessous. Créons la variable Z et la rendons égale à cent. Ensuite, je vais modifier la façon dont les pixels sont affichés avec la variable Z. Très bien, c'est Nous avons fini de travailler sur les cercles animés. Passons à autre chose. 8. Créer et personnaliser le bouton principal: Très bien, lors de la dernière conférence nous avons créé ces cercles animés Et maintenant je vais travailler sur ce bouton. Il a de beaux effets de survol. Une fois que nous le survolons, ce cercle jaune s'étendra à la totalité du bouton Peu importe le côté que vous survolez. Le bouton de. Cet élément jaune apparaîtra de tous les côtés. Et le bouton tournera également légèrement. heure actuelle, nous voyons ici les projets, et si nous cliquons dessus, nous accéderons à la section du projet. Mais dans cette conférence, je vais simplement le créer et le personnaliser. Quant à la navigation, je m'en chargerai plus tard. Avant de commencer à travailler sur le bouton, je vais ajouter quelques éléments supplémentaires au prêt. Je veux déplacer ces petits cercles un peu plus loin du cercle principal car ils auront plus d' espace pour se déplacer. En ce qui concerne le cercle principal, je voudrais l'agrandir un peu en survolant. OK, tout d'abord, déplaçons les cercles. Je vais le faire en utilisant la marge. Ainsi, pour les premier et troisième cercles, nous avons besoin d'une marge gauche avec une valeur moins dix RAM En ce qui concerne les deuxième et quatrième cercles , utilisons la marge droite avec une valeur moins dix points Très bien, c'est tout pour ce petit cercle. Passons donc à autre chose et occupons-nous du cercle principal. Je vais augmenter sa largeur et sa hauteur en survolant. Sélectionnez donc le cercle principal avec le pointeur de la souris, puis définissons la largeur et la hauteur, toutes deux sur 75 points En plus de cela, je vais utiliser la transition. Pour un effet doux. Il nous faut avec une durée des points à la seconde puis en hauteur avec la même durée. Donc, si je passe la souris sur le cercle principal, rien ne se passera La raison en est que nous avons ici le cercle et les points. Ils sont devant la bouche. Et ils bloquent les événements liés aux pointeurs. Pour résoudre ce problème, nous devons attribuer les deux éléments. Événements Pointer, aucun. Très bien, maintenant tout va bien et nous pouvons commencer à travailler sur le bouton Tout d'abord, créons un balisage HTML. Insertons les commentaires que vous connaissez. Pour le bouton principal. Je l'appelle principal parce que nous aurons quelques boutons de recherche sur la page Web. Le bouton sera créé à l'aide d'éléments de lien. Attribuons-lui la classe main btn. Le bouton sera donc composé de deux parties différentes. Nous aurons une flèche qui sera créée à l'aide de trois lignes. Et nous aurons également élément span avec les projets de texte. Ouvrons la balise div, qui encapsulera le contenu du bouton assigné à sa classe main btn content. Ensuite, je vais créer des lignes à l'aide de balises div. Avec la ligne BGN principale de la classe. Nous en avons besoin de trois. Enfin, nous devons étendre l' élément aux projets de contenu. Insérons de nouveaux commentaires dans le fichier CSS. Pour le bouton principal. Sélectionnez ensuite les éléments du lien et définissez sa position sur absolue. Il est donc maintenant placé au centre de la page. Si je sélectionne tous les éléments, vous les verrez au centre. D'accord, ajoutons-y d'autres styles. Je vais définir la largeur et la hauteur. Faisons en sorte qu'ils soient tous les deux 13 RAM. Modifiez également la couleur d'arrière-plan. Je vais utiliser votre appel ou 90 E, 0 E. Et aussi arrondir le bouton en utilisant un rayon de 50 % OK, ensuite, je vais changer sa position. Je veux le placer au bas de cette section. Définissons donc la rampe inférieure 23. Donc, la dernière chose que je vais faire pour l'instant concernant cet élément est de créer une bordure. Nous en avons besoin avec les valeurs pointant vers la RAM pour que le style soit pointillé Quant à la couleur, elle sera blanche. Très bien, passons à autre chose et personnalisons le contenu. Sélectionnez-le. Et tout d'abord, définissons sa largeur et sa hauteur. Je vais régler les deux à 200 %. Et je vais aussi créer une bordure. Attribuons-lui un point au bélier en pointillé, et utilisons également la couleur E7 P E 08 Donc, pour l'instant, le contenu a la forme de cette requête Je vais l'arrondir. Utilisons donc border-radius avec une valeur de 50 %. D'accord ? Ensuite, je vais créer un petit espace entre ces bordures. Pour cela, je vais attribuer un petit rembourrage au bouton principal Faisons en sorte que ce soit 0,1 rampe. Par défaut, nous définissons taille d'une zone de bordure pour chaque élément Et cela nous permet de conserver la largeur et la hauteur des éléments inchangées. Et cela pousse le contenu de l'élément. Très bien, voyons le contenu dès maintenant. Ensuite, je vais créer la flèche. Pour cela, nous avons trois éléments div vides. Tout d'abord, je vais masquer ce panneau prévu pour un certain temps Ensuite, sélectionnez les lignes. Tout d'abord, je vais définir la position sur absolue. Ensuite, je vais définir la première position. Faisons-le pour la RAM. Nous devons également définir la largeur et la hauteur. La largeur sera de trois RAM. En ce qui concerne la hauteur, je vais la faire 0,5 gramme et créer une bordure avec la valeur 0,1 RAM solide. Et la couleur blanche. Nous avons ici les lignes. À première vue, il semble que nous n'ayons ici qu'une seule ligne, mais les trois lignes sont superposées. Nous devons positionner chacun d'entre eux séparément. Mais avant cela, je vais les centrer dans le contenu. Pour cela, j'utiliserai Flexbox. Nous pouvons attribuer au centre de classes de contenu et aux éléments HTML. Très bien, maintenant les lignes sont placées au centre. Ensuite, nous devons positionner chaque ligne séparément afin de créer une flèche. Commençons par la première ligne. Je vais sélectionner la ligne btn principale avec le nième sélecteur enfant Et nous devons spécifier ici le numéro un. Je vais donc faire pivoter la ligne selon l'axe Z de -45 degrés La première ligne est donc pivotée. Faisons de même pour la deuxième ligne. En fait, je vais dupliquer ce code, puis changer le nombre dont nous avons besoin et supprimer le signe moins. Comme vous pouvez le constater, les deux lignes sont pivotées, mais ce n'est pas ce dont nous avons besoin heure actuelle Ils sont tournés à partir du centre Je veux dire, l'origine de la transformation est le centre. Nous devons le changer. Dans le cas de la première ligne, il faut que l'origine de la transformation soit à gauche au centre. Pour ce qui est de la deuxième ligne, nous avons besoin du centre droit. Nous avons donc maintenant un meilleur résultat, mais nous devons encore apporter quelques modifications. Je veux déplacer les deux lignes horizontalement. Je veux dire, nous devons déplacer la première ligne vers la gauche. Pour ce qui est du second, nous devons le déplacer vers la droite. Je vais donc le faire en utilisant la fonction translate x. Pour la première ligne, nous avons besoin ici de -0,65 RAM. Comme probablement pour la deuxième ligne, nous avons besoin de la même valeur, mais sans le signe moins. Très bien, enfin, les deux premières lignes sont placées correctement. La seule chose que je veux faire est de supprimer certaines parties des bordures des deux lignes. Pour le premier, nous avons besoin pour le trajet, de la valeur none. Pour ce qui est du second, nous avons besoin de la bordure gauche. Aucune. Très bien, passons à autre chose et occupons-nous de la troisième ligne. Sélectionnons-le en utilisant à nouveau le nième sélecteur enfant. Ainsi, dans le cas de la troisième ligne, nous devons faire pivoter huit degrés selon l'axe Z. Et nous devons également le déplacer en utilisant fonction translate x par 0.5 ramp. Pour ce qui est du bord à gauche, aucun. Très bien, enfin, nous avons ici une flèche. Passons à autre chose et personnalisons cet élément span, qui est actuellement masqué dans le code HTML. Supprimons ce commentaire à partir d'ici , puis sélectionnons les éléments span dans le fichier CSS. Tout d'abord, je vais définir cette position. Faisons en sorte que ce soit absolu. Ensuite, déplacez-le légèrement vers le bas en utilisant la position inférieure avec une valeur de trois rampes et changez également la couleur, rendez-la blanche. Nous avons donc ici cet élément de portée. Ajoutons-y quelques styles supplémentaires. Nous devons modifier la taille de la police. Faisons-en 1,1 RAM. Je vais également augmenter le poids de la police. Passons à 600, puis transformons le texte en majuscules Très bien, c'est tout à propos de cet élément de portée. La seule chose que je vais faire dans cette vidéo est de faire pivoter le bouton lui-même. Alors attribuons-lui une transformation. Faites pivoter de 40 degrés. Très bien, voyons voir. Le bouton est créé et personnalisé. Ensuite, nous devons créer un effet de survol. Passons donc à la conférence suivante. 9. Ajouter l'effet d'ondulation au bouton principal: Dans le cours précédent, nous avons donc créé et personnalisé le bouton principal de la page d'accueil. Et maintenant, nous devons créer un effet de survol. Jetons à nouveau un coup d'œil au projet terminé. Ainsi, une fois que nous survolons le bouton le cercle jaune recouvre le contenu Il apparaît du côté exact où nous entrons dans la bouche et le contenu tourne légèrement. Nous allons créer cet effet à l'aide d' animations JavaScript et CSS. Très bien, passons à la réponse du fichier script.js pour écrire le code, insérer de nouveaux commentaires, le bouton principal et le bouton principal La première chose à faire est donc d'obtenir les coordonnées du curseur à l'intérieur du bouton. Je veux dire, nous devons prendre le haut et mesurer les positions du curseur à partir des bords supérieur et gauche du bouton. Avant cela, nous devons sélectionner le bouton lui-même. Créons donc un BTN principal variable et sélectionnons le bas à l'aide de la méthode de sélection de requêtes Nous devons spécifier ici le nom de la classe Main be ten. Après cela, nous devons y attacher un écouteur d' événements avec une souris pour entrer des événements Nous devons donc ajouter une méthode d' écoute d'événements à l' événement appelé entrée de la souris et également à la fonction de rappel Ainsi, la méthode de saisie de la souris ne se déclenche qu'une seule fois lorsque nous survolons l'élément Comme nous l'avons dit, nous devons placer la position supérieure gauche du curseur à l'intérieur du bouton Pour obtenir ces positions, nous devons utiliser les propriétés client X et client why ? Comme vous vous en souvenez, ils nous indiquent les positions supérieure et gauche du curseur mesurées à partir des bords supérieur et gauche de la fenêtre d'affichage Ainsi, pour les positions du cours figurent à l'intérieur du bouton, nous devons trouver la différence entre les propriétés X et Y du client et les positions gauche et supérieure du cours. Donc, pour le rendre plus compréhensible, écrivons le code. Au début. Faisons une pause ici et faisons une pause sur l'objet de l'événement. Ensuite, je vais vous montrer comment obtenir les informations sur les éléments. Pour cela, nous pouvons utiliser l'une des méthodes appelées get bounding client rect Allons à la console et voyons ce que cette méthode nous donne. Nous avons besoin d'un point E, d'une cible, points, d'un client de délimitation correct Donc, si je passe la souris sur le bouton, nous obtiendrons un objet appelé DOM react Si je l'ai fait défiler, vous trouverez ici quelques propriétés différentes. Nous avons les positions, je veux dire en bas, de gauche à droite et en haut. Nous avons également ici la largeur et la hauteur des éléments. En outre, vous pouvez voir ici les propriétés X et Y. Et en fait, ce sont les mêmes que les propriétés de gauche et de haut. Nous pouvons donc utiliser ces valeurs pour calculer les positions en haut à gauche du curseur à l'intérieur du bouton Je vais créer une nouvelle variable. Disons que c'est à gauche. Ensuite, nous avons besoin du client E point X moins E point, points cibles. Obtenez la méthode correcte du client de délimitation. Et nous devons utiliser ici la position de gauche. Voyons donc cette variable dans la console. Lorsque nous survolons la poitrine, nous obtenons la position gauche du Mais maintenant, à l'intérieur du Bouton. Je veux dire, il est mesuré à partir du bord gauche du bouton. D'accord ? De la même manière, nous devons définir la première position. Nous pouvons simplement dupliquer ce code, puis changer le nom de la variable dont nous avons besoin en premier. Nous avons également besoin de savoir pourquoi votre client ? Et puis encore une fois top. Très bien, les deux positions sont donc définies et nous devons maintenant créer de nouveaux éléments sur ces positions Nous allons le faire en utilisant l'une des méthodes du dom appelée create Elements. Je vais déclarer une nouvelle variable en dehors des événements. Appelons ça Ripple. Ensuite, en bas, nous devons créer de nouveaux éléments Div. Utilisation de la méthode de création d'éléments. Nous devons spécifier le nom de la balise entre parenthèses Ensuite, nous devons définir les positions supérieures gauches du Ripple Et nous utiliserons les valeurs que nous avons définies ici. Nous avons donc besoin ici de Ripple point, style, point left. Ouvrez ensuite les backticks et insérez votre variable à gauche, que nous venons de définir Ensuite, je vais dupliquer cette ligne de code et la placer de gauche en haut. L'élément est donc créé, mais nous devons l' ajouter au bouton. Pour cela, nous devons utiliser l'une des méthodes appelées prepare, ajoutera les éléments en tant que premier enfant de l'élément parent. Nous devons passer ici la valeur Ripple Pour prouver que l'élément est créé au moment du survol, passons à l'onglet Éléments Puis passez la souris sur le bouton. Comme vous pouvez le voir, l'élément profond est créé à l'intérieur du bouton. Et nous avons également ici les positions de gauche et de haut. Très bien, ensuite dans Personnaliser cet élément dans le fichier CSS Créons une nouvelle classe. Je vais l'appeler Ripple. Pour que les positions supérieures de gauche fonctionnent, nous devons définir la position du Ripple Faisons en sorte que ce soit absolu. Ensuite, je vais définir la largeur et la hauteur. Réglons les deux à 200 % et changeons également la couleur d'arrière-plan. Utilisons votre couleur, u0, v0. Oh huit. Très bien, c'est tout pour ces tuiles du Ripple en ce moment Pour les appliquer aux éléments, nous devons ajouter cette classe à la liste des classes d'éléments. Nous avons donc besoin de la liste des classes Ripple Dot. Ensuite, nous devons utiliser la méthode appelée add. Et nous devons passer ici. Ondulation. OK, donc si vous passez la souris sur le bouton, les nouveaux éléments apparaîtront Si je survole le bouton plusieurs fois, les multiples éléments seront créés Mais en fait, nous allons bientôt régler ce problème. Tout d'abord, arrondissons ces éléments en utilisant un rayon de bordure de 50 %. Et nous devons également le déplacer vers la gauche et vers le haut de -50 %. Pour cela, utilisons Transform plutôt que la fonction de traduction avec les valeurs -60 % et à nouveau -50 Nous avons maintenant un meilleur résultat et il est temps de créer une animation. Par défaut, la largeur et la hauteur de cet élément seront donc nulles. Et une fois que nous survolons le bouton, la taille du rapport devrait augmenter avec l'animation Nous devons donc créer des images-clés CSS. Je vais l'appeler Ripple Anime. Nous allons donc procéder en deux étapes. À zéro pour cent, la largeur et la hauteur des éléments seront nulles. C'est ce que 100 %. Je vais les faire à 100 %. Très bien, donc les images-clés sont prêtes. Maintenant, comment appliquer ces styles ? Pour les éléments utilisant une propriété d'animation, nous devons spécifier ici le nom des images-clés, Ripple Anime, ainsi que la durée, qui sera de 0,5 s. Donc maintenant, si je passe la souris sur le bouton, l' élément apparaîtra Mais comme vous pouvez le constater, nous avons ici quelques problèmes. Une fois que l'élément apparaît et que sa taille a augmenté, il se masque. Nous devons donc maintenir le statut que nous avons à 100 %. Pour cela, nous devons utiliser une valeur appelée forward. Maintenant, ce problème est résolu et l'élément n'est plus en hauteur. Le problème suivant est que la taille de l'élément n'est pas suffisante pour couvrir le bouton, nous devons donc l'augmenter. Faisons en hauteur, les deux à 200 %. Maintenant, cette taille est deux fois plus grande, mais ce n'est toujours pas suffisant car si je saisis la souris et que je l'arrête au bord du bouton, Ripple ne la couvrira pas Augmentons donc légèrement l'intérieur du masque. Faisons-les à 210 %. Très bien, maintenant le problème est réglé. La prochaine chose dont je vais m'occuper est de cacher les parties extérieures du Ripple Pour cela, nous pouvons utiliser simplement overflow hidden. Très bien, nous avons maintenant de bien meilleurs résultats. La prochaine chose que je veux faire est de me débarrasser du Ripple, en faisant en sorte que la souris quitte le bouton Nous devons utiliser l'un des événements appelés Feuille de souris. Attachons-nous donc à écouteur d'événements Main BTM avec les événements en direct de la souris et avec une fonction de rappel Afin de nous débarrasser des éléments, nous devons utiliser l'une des méthodes appelées supprimer l'enfant. Et nous devons spécifier ici le nom multivariable. Très bien, maintenant tout fonctionne parfaitement. La dernière chose que je vais faire est de faire pivoter le contenu du bouton lorsque vous passez la souris Et nous devons également changer la couleur de la bordure. Allons-y et sélectionnons le BTN principal avec le pointeur de la souris, suivi du contenu du Je vais donc faire pivoter les éléments de 60 degrés. Nous avons besoin de Transformer, de faire pivoter de six à huit degrés. Je vais également changer la couleur de la bordure qui lui est assignée, du point au point en pointillé Et comme couleur, je vais utiliser le 90 II. De plus, nous avons besoin d'une transition pour un effet fluide. Et en fait, nous devons l'utiliser deux fois. Je veux dire, nous devons l'utiliser par défaut pour les éléments et également lors du survol Donc, par défaut, nous avons besoin d' une transformation de transition de 0,2 s plutôt que d'une bordure de même durée. En ce qui concerne la transition au survol, nous avons besoin des mêmes valeurs, mais Transform aura peu de retard, 0,5 s. OK, donc enfin, nous avons terminé Le bouton fonctionne parfaitement. Il a de jolis effets et animations. Je pense à ce qui est intéressant et différent, et j'espère que cela vous a plu. Nous devons maintenant passer à autre chose et nous occuper de la section suivante. 10. Section créer et concevoir à propos de moi: Très bien, nous avons fini de travailler sur la première section de la conférence précédente, et il est maintenant temps de nous occuper de la section suivante, qui sera consacrée à moi Cette section se compose d'un titre et quelques textes qui ont des effets d'animation sympas et sympas. Par défaut, la taxe n' est pas tout à fait visible car elle est mélangée à un arrière-plan foncé. Et une fois que nous le survolons, il changera de couleur Et les conférences vont également commencer à s'animer. En plus de cela, nous aurons ici le bouton, qui est similaire au bouton que nous avons créé lors de la dernière leçon. C'est donc tout à propos de la deuxième section. Allons-y et commençons à créer un balisage HTML. Insérons de nouveaux commentaires pour la section 2. Ouvrez ensuite la balise de section avec la section 2 de la classe. Dans l'ensemble, nous aurons donc trois éléments différents. Le premier sera le titre de cette section. Je vais donc insérer vos commentaires, titre de la section 2. Puis fin du titre de la section 2. Ensuite, ouvrons la balise d'en-tête H1 avec la classe, la section 2 avec le contenu me concernant Très bien. Ensuite, nous aurons un paragraphe pour le texte. Insérons de nouveaux commentaires à propos de mes textes et de, à propos de moi, à propos du texte. Et puis ouvrez la balise P avec le texte de la classe à propos de moi. En fait, je vais laisser cet élément à ma place. Nous allons insérer ici le texte en utilisant JavaScript. Très bien, voyons le balisage HTML de la deuxième section, nous ajouterons ici le bouton principal que j'ai listé un peu Pour le moment, le titre n'est pas visible car il est placé derrière l'arrière-plan. Nous allons bientôt régler ce problème. Allons-y et commençons à personnaliser cette section. Je vais insérer de nouveaux commentaires dans le fichier CSS, section deux et section deux. Sélectionnez ensuite un élément de section et définissez sa position sur relative. Alors maintenant, si je sélectionne tous les éléments, nous verrons la rubrique me concernant. Créons un espace à l'intérieur de cette section. Je vais le faire en utilisant du rembourrage. Réglons-le sur dix RAM en haut, puis dix RAM sur le côté droit, 15 RAM en bas et dix RAM sur le côté gauche. D'accord. Donc pour l'instant je vais m'occuper des textes. Je pense que ce serait mieux si nous laissions les commentaires pendant un certain temps Comme je l'ai dit, nous allons créer des textes en utilisant JavaScript. Mais d'abord, sélectionnons le paragraphe qui va encapsuler le texte. Je vais insérer vos nouveaux commentaires sur moi texte de, à propos de moi texte. Créez ensuite une nouvelle variable, je vais l'appeler texte À propos de moi et sélectionner le paragraphe à l'aide de la méthode de sélection de requête Spécifiez ici le nom de la classe à propos de mutex. Très bien, après cela, je vais créer une nouvelle variable qui stockera le texte du paragraphe Je vais appeler cette variable concernant mon contenu texte. Le texte lui-même sera le suivant. Je suis designer et je crée des sites Web primés. La meilleure expérience utilisateur. Et je n'ai pas beaucoup parlé, contactez-moi simplement. Nous allons donc transformer cette valeur de chaîne en un tableau. Chaque caractère, y compris les espaces, sera l' élément distinct d'un tableau Ensuite, nous allons créer des éléments de span pour chaque élément. Et nous allons stocker ces caractères dans des éléments de span. Afin de transformer cette valeur de chaîne en un tableau, je vais utiliser la méthode array point from. Nous devons passer ici le nom de la variable. Allons-y et voyons à quoi cela ressemble dans la console. Je vais inspecter la page et passer à l'onglet console. Comme vous pouvez le voir ici, nous avons un tableau dans lequel vous pouvez trouver tous les caractères et les espaces sous forme d'éléments distincts Nous devons maintenant stocker chaque caractère dans les éléments du span. Pour cela, nous devons parcourir le tableau, créer des éléments de span et leur attribuer chaque caractère. Donc, pour parcourir le tableau, je vais utiliser l'une des méthodes d'assistance au tableau appelées pour chacune, qui prendra un paramètre, ce sera la fonction de rappel, qui elle-même prendra un Et ce sera l'élément actuel du tableau pendant la boucle. Nous devons maintenant créer un ensemble d'éléments. Et pour cela je vais utiliser notre méthode. Créons une nouvelle variable et appelons-la span. Ensuite, utilisez la méthode de création d' éléments. Nous devons spécifier le nom du tag entre parenthèses Les éléments span sont donc créés et nous devons maintenant leur attribuer des éléments du tableau en tant que contenu du texte. Nous devons donc étendre le contenu du texte à points et celui-ci doit être égal au caractère. Enfin, nous devons ajouter ces éléments au paragraphe Nous avons besoin de moi, text point append child Nous devons spécifier ici les variables pan. Très bien, comme vous pouvez le voir, le paragraphe est affiché sur la page Maintenant, nous devons le styliser. D'abord. Nous allons sélectionner un paragraphe. Insère de nouveaux commentaires à propos de mutex et désactive à propos du nouveau texte Sélectionnez ensuite le paragraphe. Je vais réduire sa largeur. Portons-en 8 %. Placez ensuite le paragraphe au centre à l'aide d'une marge ou d'une ligne. Ensuite, je vais sélectionner cet élément de plage. Alors tout d'abord, changeons la famille de polices. Dans ce cas, je vais utiliser des téléphones appelés Poppins san-serif plutôt que d' augmenter la taille de la police, de la faire Poppins san-serif plutôt que d' augmenter la taille de la police, de la 15 RAM. Je vais donc mettre la police gras en utilisant l'épaisseur de police en gras, puis en changer Faites-en un k. OK, ensuite, je vais y ajouter quelques styles supplémentaires. Augmentons légèrement l'espacement, mettons-le à 0,5. Rem. Réduisez également la hauteur de ligne, mettez-la à 0,9 et utilisez ombre de texte avec des valeurs de 0,01 RAM Et comme couleur, je vais utiliser 90 E 0 E. D'accord ? Le texte semble donc bon. Ensuite, je vais définir sa position sur relative car nous devons modifier sa position au cours de l'animation. La dernière chose que je souhaite faire est de mélanger le paragraphe avec un arrière-plan. Pour cela, je vais utiliser la propriété CSS appelée mode mix blend. Et je vais le régler sur Color Dodge. Très bien, donc le texte est stylé. Nous pouvons maintenant créer l'animation. Pendant l'animation, nous allons changer la couleur des lettres et aussi légèrement changer la position. Créons des images-clés CSS. Je vais appeler ça à propos de moi des textes, des anime. Donc, à zéro pour cent, je vais régler la couleur sur AAA, qui est la couleur par défaut. Et je vais aussi définir la première position. Mettons-le à zéro. Ensuite, de 10 % à 90 %, je vais changer la couleur et la première position. Réglons la couleur sur le blanc. Pour ce qui est de la première place, ce sera de battre. En ce qui concerne les 100 %, nous avons besoin des mêmes styles que ceux que nous avons utilisés à 0 %. Très bien, donc les images-clés sont prêtes et nous devons appliquer les styles au texte une fois que nous avons survolé les éléments de ce panneau Je vais le faire en utilisant JavaScript Nous devons associer un écouteur d' événements à cet élément span à l' aide de la souris Enter Event Nous devons donc ajouter une méthode d'écoute d'événements. Et nous devons passer ici l'événement saisi par la souris ainsi que la fonction de rappel Ensuite, je vais passer ici un objet d'événement. Ensuite, nous devons définir l'animation pour la cible de l'objet de l'événement. Nous devons donc cibler et non styliser l'animation. Ensuite, nous devons spécifier ici le nom des images-clés, qui correspond à mon texte Et dans la valeur suivante il y aura une durée de 10 s. Et nous devons également exécuter l' animation à l'infini Donc, si je passe la souris sur le texte, nous obtiendrons un bel effet d'animation Très bien, donc en fait, avec les textes à propos de moi, c'est terminé. Et maintenant, nous devons nous occuper de ce titre de section. Et nous devrions également ajouter à cette section le bouton « Rester ». Dans un premier temps, personnalisons le titre. le moment, il est masqué, alors supprimons le commentaire Ensuite, insérez de nouveaux commentaires dans le fichier CSS, section 2. Et du titre de la section 2. Sélectionnez ensuite les éléments de titre. Je vais régler sa taille de police pour qu'elle s'exécute. Ensuite, éclaircissez-le légèrement à l'aide de font-weight 300, modifiez également la couleur, rendez-le blanc et transformez le texte en Après cela, je vais m' occuper de sa position. Réglons-le sur l'absolu. Je vais centrer les éléments verticalement. Je vais donc me placer au sommet des 250 %. Plus à gauche, il y aura Tan RAM. Ensuite, afin de centrer parfaitement l'élément lors de la transformation, traduisez y avec la valeur -50 % OK, je vais maintenant placer le titre verticalement. Pour cela, nous devons être à zéro. Nous devons également utiliser l'une de ces propriétés CSS appelée break de mots avec la rupture de valeur. Enfin, je vais augmenter la hauteur de la ligne. Mettons-le à quatre. Très bien, c'est tout à propos du titre. La dernière chose que je vais faire dans cette conférence est d' insérer le bouton principal dans la deuxième section. Je vais le récupérer dans la première section et le coller ici. Modifiez également le contenu dont nous avons besoin ici. Parlons-en OK, nous avons donc un bouton, mais nous avons quelques problèmes. En fait, il n'est pas centré. De plus, si je le survole, nous n'aurons aucun effet d'entraînement Dans un premier temps, prenons soin de sa position. Je vais créer de nouveaux commentaires. Bouton principal de la section 2. Et du bouton principal de la section 2. Afin d'appliquer les styles uniquement à ce bouton en particulier. Je veux dire, si nous voulons remplacer les styles par défaut par les nouveaux, nous devons le sélectionner avec la combinaison de ses éléments parents Nous devons donc passer à la section deux, suivie du bouton principal. Je vais régler sa position gauche à 50 %. Ensuite, je vais changer de position inférieure. Réduisons-le avec moins cinq RAM. Et puis pour centrer l'élément horizontalement, nous devons transformer, traduire x -50% Le bouton est donc centré et nous devons maintenant nous occuper de l'effet d'ondulation Avant cela, je vais récupérer les styles du Batson principal et les coller dans les styles courants Parce que tout au long de ce projet, nous aurons quelques boutons de ce type. Enfin, nous devons résoudre le problème de l'effet d'entraînement. Cela va être très simple. Nous devons sélectionner tous les boutons. Changeons donc le nom de la variable. Je vais l'appeler main btn. Et sélectionnez-les à l'aide de la méthode QuerySelector all. Comme vous le savez, cette méthode renvoie une liste de nœuds. Nous avons donc dû parcourir cette liste. Nous avons besoin d'un BTS principal avec du fourrage. Passons ici le btn. Ensuite, nous devons récupérer ce code en entier et l'insérer ici. Et nous devons changer le btn principal et le btn partout. Très bien, maintenant tout se passe parfaitement. Nous avons ici un effet d'entraînement. Enfin, avec la deuxième section, nous avons terminé. Passons à la suivante. 11. Section créer et personnaliser les projets - Partie 1: Très bien, donc une fois que nous aurons terminé la deuxième section dans laquelle nous aurons créé un texte animé Il est maintenant temps de passer à autre chose et de commencer à travailler sur l'une des sections les plus intéressantes et les plus importantes , à savoir mon travail. Cette section inclura donc les projets du designer. En fait, ces projets font partie de notre cours précédent où nous avons créé dix sites Web réactifs assez volumineux à partir de zéro, afin que vous puissiez les consulter. Dans ce cas, nous utilisons ici les images des projets. À l'heure actuelle, seuls six projets sont affichés. Mais en bas, nous avons un bouton Afficher plus. Si je clique dessus, le reste des projets apparaîtra avec un effet de fondu. Le bouton s' affiche maintenant, en afficher moins. Et si je clique dessus, nous ne récupérerons que six projets. Encore une fois. Si je passe la souris sur le projet, il défilera bien vers le haut Et en plus de cela, si je clique sur le projet, il s'agrandira. Et vous pourrez consulter l'ensemble du projet. En fait, ce sont des images similaires, mais de tailles différentes. Ces grandes images se créent la volée lorsque nous cliquons sur le projet. En fait, Delos ne doit pas surcharger la page Web, n'est-ce Cette section contient de nombreuses fonctionnalités et effets intéressants, alors commençons à la créer. Tout d'abord, comme d'habitude, je vais commencer par le balisage HTML Créons de nouveaux commentaires dans le fichier HTML de la section 3. Ouvrez ensuite la balise de section avec une section de classe 3. Dans l'ensemble, nous aurons donc trois parties différentes. Le premier sera le titre. Insérons de nouveaux commentaires. Titre de la section 3. Et du titre de la section 3. Ouvrez ensuite la balise d' en-tête H1 avec le titre de la section 3 de la classe Et pour ce qui est du contenu, Let's Institute my work. Très bien. Ensuite, nous aurons des projets. Nous avons donc besoin ici de nouveaux commentaires. Des projets et des projets. Ouvrons la balise div avec une classe. Des projets. Ce sera l' enveloppe du projet. Au total, il y aura dix projets différents, je veux dire dix images différentes. Et chacun d'eux sera enveloppé par un élément div. Allons-y donc et ouvrons-le avec le projet de classe. Puis insérez ici une image. Lorsque vous spécifiez ici le chemin du fichier. Permettez-moi de sélectionner Project One JPG. OK, dupliquons ce projet neuf fois , puis changeons rapidement les noms des images. Nous devons utiliser les chiffres de 2 à 10. Très bien, c'est tout pour les images. De plus, nous aurons le bouton principal dans cette section, mais nous nous en occuperons un peu plus tard. C'est tout à propos du balisage HTML. heure actuelle, les images ne sont pas visibles car elles sont placées derrière l'arrière-plan. Allons-y donc et personnalisons cette section. Je vais insérer de nouveaux commentaires pour la section 3. Sélectionnez ensuite l'élément de section et définissez sa largeur et sa hauteur. Je vais les régler tous les deux à 100 %. Ensuite, je vais créer de l'espace à l'intérieur de la section à l'aide d'un rembourrage Nous avons besoin de 20 RAM en haut plutôt que de zéro sur le côté droit, colère en bas et de zéro sur le côté gauche Et réglez également la position sur relative. Bon, maintenant nous voyons ici les images et le titre. En fait, comme dans la section précédente. Je vais m'occuper du titre un peu plus tard. Alors allons-y, commentons-le et commençons à travailler sur les projets. Nous avons besoin de nouveaux commentaires pour les projets. Sélectionnez ensuite un élément div. Donc, tout d'abord, je vais aligner les projets. Et pour cela, utilisons Flexbox. Comme vous le savez, nous avons défini un centre de classe pour la mise en page flexible. Allons-y et attribuons-le à l'élément div du fichier HTML Ensuite, je vais placer les projets sur différentes lignes. Pour cela, nous devons utiliser Flex Wrap avec la valeur rab. Et en plus de cela, créons de l'espace en bas des projets en utilisant padding bottom avec la valeur 15 run Alright , voyons les éléments du wrapper div. À l'heure actuelle Ces images sont plutôt moches. Ils ont des tailles différentes. Allons-y donc et personnalisons-les. Je vais sélectionner le projet lui-même. Tout d'abord, définissons la largeur et la hauteur. Je vais régler la largeur à quatre pour la rampe. Quant à la hauteur, elle sera de 45 mètres. Une fois que nous avons défini la largeur et la hauteur des images, elles se recouvraient. Pour masquer les parties extérieures des images, nous devons utiliser. Débordez, masquez, et créez également de l'espace autour des images à l'aide de la marge, la valeur cinq a couru Droite. Après ça. Je vais changer la couleur de fond des projets. Je veux dire, je veux créer un espace noir autour des images. Changeons donc la couleur de fond, rendons-la noire. Ensuite, je vais sélectionner l'image et réduire sa largeur. Portons-le à 90 %. Et aussi, afin de maintenir la qualité de l'image. Je veux dire, pour éviter de le rétrécir, je vais utiliser Object Feed Cover Nous avons donc ici le fond noir, mais comme vous pouvez le voir, nous devons centrer les images. Et pour cela, utilisons Flexbox. Nous avons besoin de Display Flex. Ensuite, pour le centrage, je vais utiliser le centre de contenu justify-content Très bien, pour l'instant, nous avons un espace noir sur les côtés gauche et droit des images Et nous devons également l'afficher en haut des images. Pour cela, je vais déplacer les images légèrement vers le bas. Réglons donc la position sur absolue. Ensuite, nous avons besoin de la position relative de l'élément parent, qui est le projet. Et après cela, je vais changer de première position. Faisons en sorte qu'il fonctionne. Très bien, maintenant nous avons un espace noir sur trois côtés. Ensuite, je vais créer une bordure autour des projets. Attribuons-lui un point à exécuter en pointillés. Et comme couleur, utilisons 90 E 0 E. De plus, je vais arrondir légèrement la bordure. Utilisons border-radius. Nous dévaluons 0,5 g. Et enfin, changeons le titre, le pointeur du curseur Très bien, alors c'est ça. Les projets sont personnalisés et je vais créer un effet de survol. Jetons un coup d'œil au projet terminé. Si nous survolons les projets plutôt que les images, nous allons facilement faire défiler la page vers le haut. Vous remarquerez également que les images sont inclinées dans différentes directions Je veux dire, les images paires et étranges. Pour cela, nous allons utiliser des images-clés CSS. Très bien, au début, je vais réussir à faire défiler l'image vers le haut en survolant. Ensuite, nous nous occuperons de cette partie relative aux files d'attente. Je vais créer un effet de survol en utilisant JavaScript. Ainsi, une fois que la souris entre dans le projet, nous devons définir la position supérieure de l'image. Et nous en avons besoin pour tous les projets. Nous devons donc d'abord les sélectionner. Insérons de nouveaux commentaires dans le fichier JavaScript. Nous avons besoin de projets. Et des projets. Créez ensuite une variable et appelez-la projets. Je vais donc les sélectionner en utilisant la méthode all du sélecteur de requêtes Précisons ici le nom de la classe project. D'accord, les projets sont donc sélectionnés. Ensuite, nous devons les parcourir et associer chaque écouteur d' événements du projet aide de la souris Enter Event Nous avons donc besoin pour chaque méthode qui prend un paramètre de la fonction de rappel La fonction de rappel elle-même prend un paramètre, qui est l' élément actuel pendant la boucle Comme je l'ai dit, nous devons associer Event Listener à chaque projet Nous devons donc utiliser la méthode d'ajout d'un écouteur d' événements avec les événements de saisie à la souris Et avec la fonction de rappel qui sera exécutée une fois que nous survolerons le projet OK, comme je l'ai dit, nous devons changer la position des images. Tout d'abord, nous devons y accéder. C'est pour ça. Je vais utiliser l'une des propriétés du dôme appelée premier élément enfant. Nous avons donc besoin de points de projet. Premier élément : enfant. Nous avons maintenant accès aux éléments de l'image , puis nous devons définir la position supérieure. Il faut donc donner du style au top. Toutes les images ont donc des hauteurs différentes. Et nous devons déterminer de combien de temps nous avons besoin pour faire défiler chaque image vers le haut . Nous devons soustraire la hauteur du projet de la hauteur de l'image Pour cette raison, nous devons faire défiler l'image vers le haut. La valeur des deux positions va être négative. Nous devons maintenant définir la hauteur de l'image. Par conséquent, nous avons besoin ici du point du projet, premier élément, des points enfants, de la hauteur décalée. Et nous devons soustraire la hauteur du projet. Par conséquent, nous avons besoin de la hauteur du décalage des points des projets. Ensuite, nous avons besoin de vos pièces. Très bien, donc la dernière chose que je vais faire pour l' instant est de rendre l'effet de défilement Nous devons donc faire la transition avec le top. Et la durée est de 4 s. Comme vous pouvez le voir, les images défilent plus facilement vers le haut Mais nous avons ici quelques problèmes. Une fois que la souris a parcouru le projet, nous devons faire défiler l'image vers le bas pour revenir à sa position par défaut. Et nous avons également besoin de l'espace noir en bas que nous pouvons simplement ajouter ici, 20. En ce qui concerne la feuille de souris, nous devons associer un nouvel écouteur d'événements au projet Nous avons donc besoin de la méthode addEventListener avec les événements en direct de la souris et également avec la Dans ce cas, nous devons définir la position à exécuter. Nous avons donc besoin du point du projet, premier élément du style de point enfant, du point supérieur égal à, pour exécuter. OK, maintenant tout fonctionne parfaitement et nous pouvons passer à autre chose et nous occuper de cet effet de repérage Pour cela, nous devons créer des images-clés CSS. Je vais d'abord les créer pour les anciennes images. Ainsi, pendant l'animation, nous devons faire pivoter images plusieurs fois, horizontalement et verticalement. Appelons les images-clés Alt, IMG, anime. Ainsi, à zéro pour cent, nous n'avons pas besoin de faire pivoter les éléments. Nous devons donc transformer, faire pivoter de zéro. Ensuite, à l'étape suivante, à 25 %, je vais faire pivoter les éléments selon l'axe Y de moins deux degrés Et nous devons également faire pivoter les éléments de deux degrés selon l'axe X. Ajoutez ensuite 30 %. Je vais copier cette ligne de code et la coller ici. Nous avons besoin que la valeur de rotation y soit de deux degrés. En ce qui concerne la fonction rotation x, nous avons besoin ici de moins deux degrés. En ce qui concerne les 100 %, nous n'avons pas besoin de faire pivoter l'élément. Les images-clés sont prêtes. Ensuite, nous devons sélectionner toutes les images. Nous avons donc besoin ici du projet suivi du nième sélecteur d'enfants Et nous devons spécifier ici que nous avons besoin d'un survol suivi d'une image Pour appliquer les images-clés CSS, nous devons donc utiliser l'animation Nous avons besoin ici du nom des images-clés sorties, IMG, anim, suivi de la durée de 4 s. Et je vais également utiliser ici un petit délai, 0,2 s. Donc pour l'instant, si je passe la souris sur la première image, rien de spécial ne Nous ne voyons pas ici d'effet de biais. Cela se produit parce que nous devons créer un environnement 3D pour les éléments et pour cela, nous devons utiliser l'une des propriétés CSS appelée perspective. Réglons-le sur 20 rampes. Alors maintenant, si je passe la souris sur l'image, elle sera légèrement inclinée dans l'espace 3D Très bien, allons-y et faisons même pour les images paires Nous pouvons dupliquer tout ce code. Changeons le tout pour uniformiser les images-clés. Il suffit de modifier l'emplacement des propriétés de transformation par paliers de 25,50 % Maintenant, il peut voir que tout fonctionne bien. Ensuite, je vais ajouter un petit délai avant que l'image ne défile vers le haut. Passons à 0,2 s. Très bien, donc avant de terminer cette conférence, je vais faire une dernière chose Je vais diminuer l'opacité de chaque image par défaut Mettons-le à 0,5, puis augmentons-le en survolant. Nous avons besoin d'Opacity One. Et ajoutez également ici la transition. Très bien, c'est ça pour l'instant. Ensuite, nous allons créer un événement de clic et agrandir les images. Passons donc à autre chose. 12. Créer et personnaliser la section projets - Partie 2: Très bien, donc dans la conférence précédente nous le créons et personnalisons les projets Je veux dire, nous avons aligné les images et nous avons également créé un effet de survol La prochaine chose que nous allons faire est de développer le projet une fois que nous avons cliqué dessus, comme c'est le cas dans la version finale du projet. Avant cela, je vais corriger un petit problème que nous avons rencontré dans la section précédente. Si je passe la souris sur le bouton depuis le bas, rien ne se passera La raison en est que la section du projet couvre partiellement le bouton. Donc deux pics que je vais réduire le rembourrage du haut pour cette section Faisons-en dix RAM. Et je vais aussi ajouter ici la marge supérieure avec la valeur Tan ran. Alors maintenant, comme vous pouvez le voir, le problème est résolu. Très bien, revenons à la section du projet. Ainsi, lorsque nous cliquons sur le projet, nous devons créer de nouveaux éléments. Je veux dire, cette grande image. Par défaut, il n'existe pas. Il est uniquement créé OnClick. Cela nous aide donc à ne pas surcharger la page Web car ces images sont vraiment les plus grandes. La première chose que je vais faire est d'associer l'écouteur d'événements au projet à l'aide de l'événement click Dans un premier temps, insérons vos nouveaux commentaires. Image de grands projets. Et je vais choisir l'image du projet. Attachez ensuite l' écouteur d'événements au projet. Nous allons cliquer sur les événements et élargir une fonction de rappel. Comme nous l'avons dit, nous devons créer un nouvel élément OnClick Mais avant de créer l'image, nous devons d'abord créer une enveloppe de l'image Je suis dans l'arrière-plan sombre qui apparaît au début. Pour créer l'élément, je vais utiliser la méthode create. Créons une nouvelle variable. Je vais l'appeler Big IMG wrapper. Ensuite, créez les éléments à l' aide de la méthode create element. Lorsque vous devez spécifier ici le nom de la balise, l'élément est créé. Ensuite, je vais lui attribuer un nom de classe. En fait, nous pouvons le faire de différentes manières. Dans ce cas, je vais utiliser la propriété nommée ClassName Nous avons donc besoin d'un gros ING, le nom de la classe Rapper Point. Et la valeur sera le rappeur du projet IMG. Hein ? Nous devons maintenant ajouter un nouvel élément au conteneur. Tout d'abord, sélectionnons le conteneur lui-même. Je vais créer une nouvelle variable. Ensuite, sélectionnez le conteneur à l'aide de la méthode QuerySelector. Lorsque vous spécifiez simplement ici le conteneur de nom de classe. Après les dettes. Pour attacher l' enveloppe d'image au conteneur, nous devons utiliser l'une des méthodes appelées append L'enfant devra spécifier ici Big IMG, Robert. Très bien, voyons ce qu'il en est de l'emballage. Pour voir que l' élément est en cours de création, onclick. Examinons la page et examinons l'onglet Éléments. Une fois que j'ai cliqué sur le projet, les éléments seront créés. OK, avant de créer l'image elle-même, je vais d'abord styliser l'emballage Instituons de nouveaux commentaires, une grande image du projet. Et d'une grande image de projet. Sélectionnez ensuite l'emballage. La position de l'emballage va être fixée. Je vais également définir les propriétés du haut et de la gauche. Mettons-les tous les deux à zéro. Ensuite, je vais développer des éléments de l'ensemble de la fenêtre d'affichage. Et je vais aussi changer la couleur de fond. Réglons la largeur et la hauteur, toutes deux à 100 %. En ce qui concerne la couleur d'arrière-plan, je vais utiliser la valeur RGBA Insérons votre couleur noire avec l'opacité 0,9. Très bien, maintenant si je clique sur le projet, le wrapper s'affichera Comme vous le savez, le wrapper doit s'afficher depuis le haut avec une petite animation Je vais donc créer les images-clés CSS. Avant cela, diminuons la hauteur de l' emballage, mettons-la à zéro Ensuite, créez des images-clés CSS. Je vais l'appeler IMG wrapper anime. Dans l'ensemble, nous aurons donc deux étapes différentes. À 0 %, la hauteur sera nulle. En ce qui concerne les 100 %, je vais augmenter la hauteur à 100 %. Ensuite, je vais utiliser la propriété d'animation. Nous devons spécifier ici le nom de l'anime keyframes IMG wrapper Ensuite, la valeur suivante sera la durée d'une seconde. Et en plus de cela, je vais maintenir la hauteur à cent pour cent à la fin de l'animation. Nous avons donc besoin de ce Donc, si je clique sur le projet, le wrapper apparaîtra bien en haut Très bien, c'est tout pour le rappeur d'images en ce moment. Ensuite, je vais parler de l'image elle-même, comme de l'enveloppe, nous devons créer cet élément Je vais donc créer une nouvelle variable. Disons que c'est Big IMG. Ensuite, créez des éléments. Précisons ici le nom du tag IMG. L'élément est donc créé. Ensuite, je vais lui attribuer un nom de classe pour les styles CSS. Nous avons donc besoin d'un grand nom de classe IMG point. Et la valeur sera le projet. J'ai raison Maintenant, pour vérifier si l' image s'affiche au clic, je vais définir son nom dans l' attribut source et lui donner le nom de n'importe laquelle des images. Pour définir l' attribut des éléments, nous devons utiliser l'une des méthodes appelées set attributes. Il faut deux arguments. Le premier est le nom de l'attribut. Dans ce cas, nous avons besoin de la source SRC. la mesure où le deuxième argument va faire partie de l'image. Nous avons donc besoin d'images autres que le dossier Projets et l' image portant le nom project, one, big dot JPG. Enfin, nous devons joindre une image au wrapper en utilisant la méthode append child Alors maintenant, si je clique sur le projet , la grande image s'affichera. heure actuelle, si je clique sur l'un des projets, la même image s'affiche. Je veux dire le premier. Comme nous définissons la partie de l'image avec la première image, nous n'en avons pas besoin. Nous devons afficher la même image pour chaque projet. Pour ce faire, nous devons accéder au chemin de l'image sur laquelle vous cliquez. Allons-y et créons une nouvelle variable. Je vais l'appeler IMG path. Pour accéder à l'attribut source dans un premier temps, nous devons accéder à l'élément d'image lui-même. Nous avons donc besoin du projet point, premier élément enfant. Ensuite, nous devons obtenir cet attribut source à l'aide de la méthode get attribute. Nous devons spécifier ici le nom de l'attribut comme RC. Voyons dans la console ce que cette variable nous donne. Si je clique sur le projet, nous obtiendrons le chemin de l'image dans la console. Si nous cliquons sur un autre projet, nous obtiendrons le chemin approprié de l'image. Très bien, donc à partir de ce chemin, nous avons besoin de tout ce qui se trouve sur le côté gauche des points Parce que les grandes images suivent un chemin similaire, mais que les noms réels des images sont différents. Ils ont du gros après les chiffres. Donc, pour récupérer la première partie du chemin, je vais utiliser l'une des méthodes d' assistance du tableau appelée split Nous devons diviser le chemin par points. Maintenant, si je clique sur le projet, nous obtiendrons un tableau avec deux éléments différents. Le premier est le chemin sans extension de l'image. Quant au second, il s'agit de l'extinction JPG. Pour sélectionner le premier élément, nous devons définir le numéro d' index comme zéro. Maintenant, si je clique sur le projet, nous obtiendrons le premier tableau, n'est-ce pas ? Droite. Nous devons maintenant utiliser cet élément et ajouter au nom de l' image, un gros point JPG. Pour ce faire, nous devons changer cette voie et la rendre dynamique. Ouvrons les backticks et insérons ici le chemin variable de l'image, puis ajoutez-y un tiret et un gros point JPG OK, alors maintenant si je clique sur les projets, nous aurons les bonnes images, non ? Tout allait bien et nous devons styliser les images. Je veux dire les plus grands. Alors sélectionnons-les. Réglons la largeur à 100 %. De plus, je vais faire en sorte que le Congrès soit arrondi en utilisant un rayon de bordure avec la valeur 0,5 rem Créons également un rembourrage. Je vais lui faire sept rem haut et en bas et 20 RAM sur les côtés gauche et droit. Et diminuez également légèrement l'opacité, mettez-la à 0,9. Très bien, donc les images sont belles. Nous devons maintenant y ajouter de l'animation. Par défaut, je vais les masquer et les afficher une fois que nous aurons cliqué sur le projet et que le rappeur apparaîtra Allons-y et créons des images-clés CSS Je vais les appeler IMG anion. Dans l'ensemble, nous allons donc avoir deux étapes. À 0 %, je vais définir l'échelle des éléments à zéro. Pour ce qui est des 100 %, je vais utiliser la première échelle. Et utilisez également l'animation. Nous avons besoin ici du nom des images-clés, de l'anime IMG, ainsi que de la durée de 1 s. Et nous avons besoin du délai, qui sera de 1 s. Dans ce cas, qui sera de 1 s. Dans ce cas, nous devons définir l'échelle zéro comme style par défaut de l'image Et nous devons également maintenir l' échelle à laquelle on veut que l' animation se termine. Pour ce faire, nous pouvons soit définir l'échelle de transformation sur zéro par défaut, puis utiliser forward dans la propriété d'animation comme nous l'avons déjà fait pour le wrapper d'image Ou nous pouvons simplement utiliser ici la valeur appelée les deux, qui fera le même travail. Donc, si je clique sur le projet, l'image apparaîtra. heure actuelle, il apparaît par le bas, et je veux l'afficher par le haut. Nous devons donc changer l' origine de la transformation. Nous avons besoin du top center. Très bien, nous avons maintenant un bien meilleur résultat. Pour le moment, nous ne pouvons pas faire défiler l'image vers le bas. Nous faisons défiler la page elle-même, qui est masquée. Pour ce faire, je vais utiliser la propriété overflow avec les valeurs masquées Faites défiler. Nous pouvons maintenant faire défiler l'image vers le bas, mais comme vous pouvez le voir, nous avons deux barres de défilement ici. Un pour l'image et le second pour la page. Pour résoudre ce problème, nous devons attribuer à l'élément body un débordement masqué à l'aide de JavaScript Nous avons donc besoin du point, du corps, du style du point, du point overflow y du document avec la valeur cachée Très bien, maintenant tout fonctionne parfaitement. Et la seule chose que je vais faire dans cette vidéo est de créer le bouton de fermeture. Une fois que nous avons agrandi l'image. Tout d'abord, créons le balisage HTML pour le Buxton Je vais créer de nouveaux commentaires, projet avec le bouton Masquer. Et du bouton Masquer du projet. Ouvrez ensuite la balise button avec une hauteur de projet de classe, btn. Je vais passer ici l'une des entités HTML5. Ce sera la flèche. Nous avons besoin ici de l AQ, U0, point-virgule, suivi Ensuite, je vais personnaliser le bouton. Insérons de nouveaux commentaires dans le fichier CSS du bouton. Ensuite, sélectionnez-le. Tout d'abord, je vais définir la position du bouton. Il va être placé dans le coin supérieur droit. Je vais donc définir la position à corriger. Ensuite, je vais créer les meilleures et les bonnes propriétés, toutes les deux à cinq. Suivant. Je vais rendre la couleur de fond transparente. Débarrassez-vous également de la bordure par défaut. Ensuite, je vais changer la couleur du texte. Faisons en sorte qu'il soit blanc. Augmentez ensuite la taille de la police, passez à Ram. Ensuite, je vais créer un espace entre les lettres. Faisons-en 0,1 RAM et changeons également le type de cours pour le faire ressortir. D'accord, nous avons donc le schéma final. Si je clique sur les projets, l' emballage de l'image les couvrira Nous devons donc régler ce problème. Et pour cela, utilisons la propriété z-index avec une valeur supérieure à zéro. Disons dix. Très bien, donc par défaut, nous devons masquer le bouton et l'afficher Une fois que nous avons cliqué sur le projet. Pour masquer les éléments, je vais utiliser Transform. Échelle avec une valeur de zéro. Visibilité également masquée. Pour faire revenir le bouton, une fois que nous aurons cliqué sur le projet, je vais utiliser une nouvelle classe en CSS, dans laquelle nous allons définir les nouveaux styles, ces styles pour afficher le bouton. Je vais donc appeler le changement de classe. Ensuite, nous devons sélectionner Project Hide, btn. Nous n'avons pas utilisé ici d'espace entre ces deux classes car nous avons sélectionné le même élément avec deux noms de classe différents. Si l'élément ne possède aucune de ces classes, ces styles ne seront pas appliqués à l'élément. Nous devons donc transformer l'échelle 1 et rendre la visibilité visible. Très bien, nous devrions ensuite ajouter un changement de classe au bouton onclick en utilisant JavaScript Dans la mesure où nous devons sélectionner un bouton lui-même. Créons une nouvelle variable et appelons-la Project hide btn. Sélectionnez ensuite un bouton à l'aide de la méthode QuerySelector. Précisons ici le nom de la classe, le masque du projet, btn. Ensuite, nous devons ajouter le changement de classe au bouton une fois que nous avons cliqué sur les projets. Nous avons donc besoin ici de la hauteur du projet, btn, points, liste des classes, ajout de points Je n'ai pas besoin de spécifier ici le nom du changement de classe. En outre, nous devons le supprimer lorsque nous cliquons sur le bouton lui-même. Dans ce cas, je vais utiliser le gestionnaire d' événements onclick car dans le cas de l'écouteur d'événements, l' événement click est ajouté plusieurs fois et nous n'en avons pas besoin Nous ne devons déclencher un événement de clic qu'une seule fois. Je vais donc écrire ici la hauteur du projet, btn point onclick, qui doit être égale à une fonction flèche Et ici, nous devons supprimer le changement de classe de la liste des classes. En plus de cela, nous devons retirer l'enveloppe de la grande image Je vais donc écrire ici big IMG, rapper point, remove. Nous devons également modifier la valeur de l'ancien flux. Pourquoi choisir la propriété permettant à l' élément du corps de revenir en arrière. Nous avons donc besoin du point du document, du corps, du style de point, du débordement de points, de l'appel de valeurs y. Très bien, donc tout fonctionne bien. La seule chose que je vais faire est d'ajouter une petite transition au bouton de fermeture. Nous devons effectuer la transition uniquement lorsque le bouton apparaît. Nous devons donc procéder au changement de classe. Réglons-le sur une transformation et une durée de 0,5 s. Très bien, nous avons enfin terminé Tout fonctionne parfaitement. Ensuite, nous devons nous occuper de ce bouton Afficher plus. Passons donc à autre chose. 13. Ajouter la fonctionnalité "Afficher plus" aux projets - Partie 1: OK, nous avons donc créé et personnalisé les projets. Nous y avons ajouté quelques effets différents, tels que les événements de survol et de clic heure actuelle, les dix projets sont affichés sur la page, et je pense que cela ne semble pas très bon. De plus, cela ne sera pas beau si nous avons adapté notre projet à des tailles d'écran plus petites. Je vais donc cacher certains projets. Ajoutez également ici un bouton Afficher plus. Et une fois que l'utilisateur aura cliqué dessus, nous afficherons les dix projets. Au lieu d'en afficher plus, nous allons afficher, montrer ceci. Et nous allons également changer la direction de la flèche. En fait, la flèche nous indique le sens du défilement, qui se produit lorsque De plus, les projets s'affichent et se masquent avec certains effets de fondu. Très bien, alors c'est ça. Ce que nous allons faire dans cette vidéo. Commençons. La première chose que je vais faire est de masquer les quatre derniers projets. Et je vais le faire en utilisant JavaScript. Nous l'avons tous déjà pour chaque méthode. Afin de parcourir les projets. Les projets sont une liste de nœuds et chaque projet possède son propre numéro d'index. Nous devons masquer les quatre derniers projets. Les projets dont l'indice est compris entre 6 et 9. Nous devons donc accéder à ces projets. Pour cela, nous devons passer ici un autre paramètre, qui sera le numéro d'index. Nous devons maintenant utiliser une instruction if dans laquelle nous devons définir si I est supérieur ou égal à six. Si cette condition est vraie, nous devons masquer les projets. Nous avons donc besoin ici du texte CSS du projet et du point style point. Et nous devons passer ici aux propriétés CSS. Le premier va être affiché avec la valeur none. Quant au second, nous avons besoin d'une opacité nulle. Comme vous pouvez le constater, les quatre derniers projets sont là. En fait, ce code, je veux dire que l'instruction if fonctionne bien, mais nous pouvons écrire de manière plus concise Au lieu de l'instruction if, nous pouvons utiliser la logique et l'opérateur. Nous pouvons donc nous débarrasser du mot clé if, ainsi que des bretelles bouclées. Et nous devons ajouter ici un opérateur, qui est exprimé par deux esperluettes Donc, si le côté gauche est vrai, nous pouvons simplement ajouter un bloc de code sur le côté droit de l'opérateur. Comme vous pouvez le constater, nous avons ici exactement le même résultat. Il est maintenant temps d' ajouter le bouton. Ce sera le bouton restant , que nous avons déjà utilisé plusieurs fois. Passons donc au fichier index.html. Prenez le bouton de la section précédente et collez-le ici. Je vais modifier le contenu dont nous avons besoin ici, en montrer plus. Et ajoutons-y également une autre classe, des projets, BTN. Et modifiez également les commentaires dont nous avons besoin ici pour les projets. Mais comme vous pouvez le voir ici, nous avons le bouton en ce moment, il est placé sur le côté gauche de la page. Nous devons donc le centrer. Insérons de nouveaux commentaires dans le bouton Projet du fichier CSS. Bouton Et des projets. Sélectionnez ensuite le bouton avec les projets ClassName récemment ajoutés btn Pour centrer l'élément, je vais utiliser la position gauche avec une valeur de 50 %. Ensuite, pour une censure parfaite, nous devons transformer translate X avec la valeur -50 %. Comme vous pouvez le voir, le bouton est placé au centre. Très bien, je vais maintenant ajouter un écouteur d'événements au bouton avec l'événement Click Une fois que nous avons cliqué dessus, nous devons afficher les projets cachés. Tout d'abord, insérons des commentaires. du bouton Projet et du bouton Projet, puis sélectionnez le bouton lui-même. Je vais créer une nouvelle variable. Appelons-le Projets btn et sélectionnons bouton à l'aide de la méthode de sélection de requête Nous avons besoin ici de projets de classe btn. Très bien, nous devons ensuite y associer un écouteur d'événements avec événements de clic et une fonction de rappel La première chose que nous allons faire est donc d'empêcher l'action par défaut. Lorsque nous cliquons sur le bouton, je veux dire qu'une fois que nous cliquons sur le bouton, nous naviguons vers le haut de la page. Nous n'en avons donc pas besoin. Je vais transmettre ici un objet événementiel. Ensuite, nous avons besoin de points. Empêchez le défaut. Comme vous pouvez le constater, nous ne naviguons plus vers le haut. actuelle, il est temps de réussir à afficher et à masquer les projets. Pour cela, nous devons d'abord parcourir les projets Je vais donc utiliser pour chaque méthode une fonction de rappel Je vais vous transmettre deux paramètres différents. Le premier sera le projet. En ce qui concerne le second, nous avons encore besoin d'un numéro d'indice. Je veux dire, maintenant nous devons avoir accès aux projets cachés. Comme vous vous en souvenez, nous l'avons fait en utilisant le numéro d'indice. Le numéro d'index est supérieur ou égal à six, cela signifie que nous n'avons accès qu'aux projets cachés. Je vais donc utiliser ici et si des déclarations que nous avons définies, si I est supérieur ou égal à six. Donc, si cette condition est vraie, nous devons réussir à afficher et à masquer les projets. Pour cela, je vais créer une nouvelle variable, qui sera la valeur booléenne Je vais l'appeler Show , Hide, Bu. Et par défaut, je vais le définir sur true. Ensuite, nous avons besoin d'une autre instruction if dans laquelle nous devons vérifier si la valeur booléenne est vraie ou fausse Je vais donc passer ici le nom de la variable. Si c'est vrai, nous devons afficher les projets. Nous avons donc besoin d'un affichage à points de style Project Dot. Il doit être égal à la flexion. Ensuite, je vais dupliquer cette ligne de code. Et nous avons besoin ici d'une opacité avec la valeur un. Ensuite, si c'est faux, nous devons masquer les projets. Nous avons donc besoin de l'autre déclaration. Ensuite, je vais récupérer ces deux lignes et modifier les valeurs. Nous avons besoin que la propriété d'affichage soit nulle. En ce qui concerne l'opacité, elle sera nulle. Très bien, enfin, nous devons changer la valeur de ces variables show hide bull pour qu'elle soit vraie, puis nous devons la rendre fausse et vice versa. Nous avons donc besoin que Show Hide bull soit égal à Not Show Hide book. Si je clique sur le bouton, les projets cachés s'afficheront. La semaine prochaine, ils se cacheront. Très bien, après cela, je vais modifier le TextContent du bouton Une fois que nous avons affiché les projets, le bouton devrait afficher le contenu du type Afficher moins. Et en plus de cela, nous devons d'abord faire pivoter la flèche. Occupons-nous du contenu du texte. Tout d'abord, je vais sélectionner un élément de plage. Créons une nouvelle variable. En fait, je vais dupliquer cette ligne de code, puis changer le nom de la variable. Ce seront des projets btn, du texte. Et je vais aussi ajouter ici la portée. Très bien. Ainsi, lorsque nous affichons les projets, nous devons réduire l'affichage du TextContent Nous avons besoin ici des projets btn textes, le contenu des textes soit égal pour en afficher moins Lorsque nous masquons les projets, nous devons modifier Afficher la leçon pour en afficher davantage. Je vais donc dupliquer cette ligne de code. Et nous devons changer ici moins que demain. Donc, si je clique, le TextContent du buxom changera. Très bien, ensuite, je vais faire pivoter la flèche sur Click. Pour cela, je vais créer une nouvelle classe et CSS et sélectionner les lignes avec cette classe. Nous allons définir de nouveaux styles, puis nous ajouterons cette classe à l'élément parent des lignes. Je suis dans le contenu du bouton. Dans un premier temps, ajoutons que la classe n'a pas mentionné d'éléments. Nous avons besoin de projets BTN. Ensuite, nous devons accéder au premier élément enfant du bouton. Dans ce cas, ce sera l'ondulation. Nous avons donc besoin du premier élément child, puis nous devons accéder au contenu qui sera le frère du référentiel Je vais donc utiliser ici la propriété appelée next element sibling Nous devons maintenant accéder au contenu et y ajouter un changement de classe. Dans ce cas, je vais utiliser une méthode appelée toggle. Cela nous permet d'ajouter la classe à l'élément s'il ne l'a pas, et de supprimer la classe s'il l'a. Nous avons donc besoin d'un affichage par points de la liste des classes. Et je vais spécifier ici le nom de la classe en tant que modification. Très bien, voyons ce qu'il en est de JavaScript. Nous devons maintenant définir les styles et le CSS. Nous devons sélectionner les lignes avec le changement de classe. Ensuite, nous avons besoin de l'un des combinateurs CSS appelé Child sélecteur, qui sélectionne tous les éléments qui sont les enfants des éléments spécifiés Nous devons maintenant spécifier le nom de classe de la ligne, suivi du nième sélecteur enfant entre le numéro un Très bien, nous devons donc faire pivoter la première ligne de 45 degrés en fonction de l' axe Z. Et en plus de cela, nous devons le déplacer légèrement en fonction de l'axe X. Quelle valeur ? -0,65 round. C'est tout pour la première ligne. Je vais dupliquer ce code deux fois, puis apporter quelques modifications. Pour la deuxième ligne, nous devons faire pivoter Z avec une valeur de -45 degrés. Quant à la valeur de la fonction translate x, elle sera de 0,65 rem Vient ensuite la troisième ligne. Nous avons besoin d'une rotation Z avec une valeur de 90 degrés. En ce qui concerne le Translate, X sera de -0,5 RAM. Et en plus de cela, nous devons définir la bordure gauche de la RAM 2.1, couleur unie et blanche. Et nous devons également nous débarrasser de la bordure du côté droit. D'accord, donc si nous cliquons sur le bouton, la flèche tournera. Tout fonctionne bien. Jusqu'ici. Nous devons ajouter un effet de fondu aux projets. Ensuite, nous devons rendre notre code un peu plus propre. Et nous devons également personnaliser le titre de cette action. Pour cela, passons à la conférence suivante. 14. Ajouter la fonctionnalité "Afficher plus" aux projets - Partie 2: Très bien, lors de la dernière conférence nous avons réussi à afficher et à masquer les projets Une fois que nous avons cliqué sur le bouton Afficher plus, nous devons maintenant leur ajouter des effets de fondu. De plus, une fois que nous avons cliqué sur le bouton, nous devons faire défiler la page en douceur. Afin de créer différents effets. Nous devons afficher les projets à certains intervalles. Nous allons donc utiliser la méthode setTimeout. Nous devons donc définir les différents délais pour la flexibilité d'affichage et la valeur 1 pour l'opacité Dans un premier temps, nous devons attribuer une flexibilité d'affichage aux projets. Et après un certain temps, nous devons commencer à afficher les projets avec des intervalles différents. Je vais donc utiliser la méthode de temporisation définie. Ensuite, je vais insérer cette ligne de code à l'intérieur de la fonction comme deuxième argument. Je veux dire le temps que je vais passer ici, 600 millisecondes Alors maintenant, une fois que j'ai cliqué sur le bouton, les projets s' afficheront après un petit délai. Bon, maintenant nous devons nous occuper de l'opacité. Comme je l'ai déjà dit, nous avons besoin de délais différents pour chaque projet. Utilisons à nouveau la méthode setTimeout et collons ici cette ligne de Nous devons maintenant définir le deuxième argument. Je suis dans le délai imparti. Afin de définir des délais différents pour chaque projet, je vais utiliser le paramètre i. Et nous devons le multiplier par un certain laps de temps, disons 200. Alors maintenant, si je clique sur le bouton, les projets apparaîtront à certains intervalles. Hein ? Maintenant, nous n' avons plus l'effet de fondu car nous devons utiliser la transition. Nous devons l' attribuer aux projets. Nous avons besoin d'opacité et d'une durée de 0,5 s. Comme vous pouvez le voir, nous avons maintenant l'effet de fondu Hein ? Maintenant, une fois que j'ai cliqué sur le bouton, la page ne défile pas automatiquement vers le bas. Nous devons le faire manuellement. Alors allons-y et réglons ce problème. Je vais utiliser l' une des méthodes appelées scroll into view. Et nous devons l'attacher aux éléments de la section. Alors tout d'abord, sélectionnons-la et voulons créer une nouvelle variable. Appelons-la section 3. Ensuite, sélectionnez les éléments à l'aide de la méthode de sélection de requêtes. Nous devons spécifier ici le nom de la classe dans la section 3, puis transmettre ce qui suit dans la première méthode setTimeout. Quand associer la méthode de défilement vers l' affichage à la section 3. Il faudra un argument. Ce sera l'objet. Nous avons besoin ici d'une propriété appelée bloc avec une valeur. Et maintenant, lorsque je clique sur le bouton, la page ou que je fais défiler la page vers le bas, mais sans aucune précision. Pour résoudre ce problème, nous devons attribuer aux éléments HTML l'une des propriétés appelées comportement de défilement avec les valeurs. Alors maintenant, comme vous pouvez le voir, tout fonctionne bien. Très bien, maintenant nous devons faire les mêmes choses. Une fois que nous aurons masqué les projets. Nous devons masquer l'effet des projets qui s'estomperont. Et encore une fois, avec quelques intervalles, nous devons attribuer aux projets une opacité nulle avec intervalles différents jusqu'à ce que les projets n'affichent aucune Nous devons donc utiliser à nouveau la méthode setTimeout. Mais maintenant, dans l'instruction else, insérons ici cette ligne de code. Et comme deuxième argument, je parle du temps. Insérons 1 200 millisecondes. En outre, nous devons masquer les projets en utilisant l' opacité à différents intervalles Encore une fois, nous avons besoin de la méthode setTimeout. Ensuite, plaçons cette ligne de code dans la fonction. Et comme deuxième argument, je vais passer ici, j'ai multiplié par 100. Maintenant, si je clique sur le bouton, les projets seront masqués avec des touches de fond. Et la seule chose que nous avons à faire est de faire défiler la page vers le haut. Nous devons donc, à nouveau, faire défiler la méthode d'affichage. Récupérez cette ligne de code, collez-la vous même. instant, nous avons le même résultat car nous n'avons pas encore le contenu après la section. Une fois le contenu ajouté, il fonctionnera comme dans le projet fini. Très bien, avant de passer à autre chose et de personnaliser le titre de cette section, je vais rendre ce code un peu plus clair. Je vais créer deux fonctions différentes pour afficher et masquer les projets. Créons une nouvelle fonction en dehors de l'événement de clic. Je vais appeler la fonction show projects Elle prendra deux paramètres. Le premier sera le projet. Quant au second, il doit s'agir du numéro d'index. Ensuite, je vais récupérer ces méthodes setTimeout à partir des instructions if et les coller dans la fonction Ensuite, nous devons appeler cette fonction dans l' instruction if en tant qu'arguments. Nous devons réussir vos projets. Et faisons de même pour les autres déclarations. Créons une nouvelle fonction. Je vais appeler ça des projets de hauteur. Cela prendra également deux paramètres, des projets. Je récupère ensuite les méthodes setTimeout à partir de l'instruction else, les colle dans la fonction, puis j'appelle la fonction dans l' instruction else avec les arguments projects Et je peux voir que tout fonctionne de la même manière. Mais maintenant, nous avons un code un peu plus propre. J'ai encore quelques choses à faire. Au lieu des instructions if, je vais utiliser, encore une fois, la logique et l'opérateur. Débarrassons-nous du mot clé if et des bretelles frisées. Et puis ajoutez ici deux esperluettes. En ce qui concerne la seconde instruction if else, je vais utiliser un opérateur ternaire Ouvrons les parenthèses et insérons la condition, je veux dire le taureau Afficher, masquer Ensuite, nous avons besoin d'un point d'interrogation. Donc, si la valeur booléenne est vraie, nous devons appeler la fonction show projects Et si c'est faux, nous devons appeler la fonction height projects. D'accord ? Ensuite, je vais m' occuper du TextContent du bouton. Nous n'avons pas besoin que ce code se trouve à l'intérieur de chaque méthode car il exécutera ce code à chaque itération. Je vais donc le placer en dehors de, pour chaque méthode. Nous avons besoin de la valeur booléenne. Je veux dire, Show Hide bull, suivi de l'opérateur ternaire Donc, si cette condition est vraie, nous avons besoin que le contenu du texte soit moins affiché. Récupérons donc ce code à partir d'ici. Si c'est faux, nous devons en montrer davantage. Je vais donc récupérer cette ligne de code. Enfin, éliminons les instructions if else à partir d'ici. Très bien, donc encore une fois, tout fonctionne de la même manière. En fait, je vous ai remarqué que la flèche change de direction sans transition. Et ça n'a pas l'air très bon. Allons-y donc et ajoutons une transition aux lignes. Nous devons sélectionner les projets btn, suivis du PT principal en ligne Utilisons la transition avec toutes vos valeurs et 0,5 s. Très bien, le problème est maintenant résolu et la flèche tourne doucement Enfin, nous devons nous occuper du titre de cette section. Il sera similaire au titre de la section précédente. Donc, afin d'éviter d'écrire le même code encore et encore, je vais leur attribuer un nom de classe commun et utiliser le même code pour les deux titres ainsi que pour les titres que nous créerons dans le futur Tout d'abord, je vais supprimer les commentaires du titre. Ensuite, attribuons aux deux titres, classe, titre de section Ensuite, je vais récupérer le code et le coller. C'est dans les styles courants. Modifiez également les commentaires. Nous avons besoin du titre de section et du nom de la classe. Très bien, nous avons donc ici le titre de cette section. À l'avenir, nous ajouterons simplement les noms des classes aux titres et ils seront automatiquement positionnés et stylisés C'est bon, c'est ça. Enfin, nous avons terminé de travailler sur la section du projet. Passons à autre chose. 15. Section de création et de conception: OK, donc une fois que nous en avons terminé avec la section du projet , il est temps de passer à autre chose et de commencer à travailler sur la section suivante, qui portera sur ces services. Jetons un coup d'œil au projet terminé. Nous avons donc ici quelques services différents. Ils sont affichés dans une police de grande taille. Et si nous cliquons dessus, du texte apparaîtra avec de jolis effets de fondu. De plus, les services se déplaceront doucement vers la gauche. C'est ce que nous allons créer dans cette section. Je vais commencer par le balisage HTML. Insérons de nouveaux commentaires dans le fichier HTML de la section 4. Cette balise de section ouverte avec la section de classe pour. Cette section sera composée de deux parties principales. Nous aurons un titre de section puis les services. Insérons de nouveaux commentaires pour le titre de la section. Ensuite, je vais ouvrir la balise de titre H1 avec un titre de section de classe Et avec le contenu. Ce que je peux. Très bien, nous aurons ensuite les services. Créons à nouveau de nouveaux commentaires, services et de services. Ouvrez ensuite l'étiquette cadeau, qui sera l'enveloppe des services que je vais attribuer à chaque enveloppe de services du cluster Au total, nous aurons donc six services différents. Ouvrons la balise div, qui sera le service lui-même. Chaque service sera composé de deux éléments différents. La première sera la balise de lien avec un service de classe, btn. Ensuite, je vais insérer votre élément Span. Ce sera à la tête du service. Insérons votre UI UX. Quant au deuxième élément du service, ce sera le texte. Ouvrons la balise P avec un texte de service de classe. En fait, je prépare les étiquettes de service pour chaque service Je vais donc copier la première à partir de ce document texte. Il sera joint au fichier source afin que vous puissiez le télécharger et l'utiliser. Comme je l'ai dit, nous aurons six services différents. Je vais donc dupliquer ce code cinq fois, puis modifier le contenu. Le deuxième service sera l'illustration des icônes. Ensuite, nous aurons l'image de marque. Le prochain sera le développement. De plus, nous aurons du mouvement puis de la photographie. Très bien, c'est tout à propos du balisage HTML. le moment, le contenu n' est pas visible, il s'est retrouvé en arrière-plan. Allons-y et commençons à personnaliser cette section. Je vais insérer de nouveaux commentaires dans la section du fichier CSS pour la fin de la section quatre. Sélectionnez ensuite l'élément de section et définissez sa position. Je vais en faire un parent. Et je vais aussi me fixer à 200 %. Comme vous pouvez le voir maintenant, le contenu de cette section est possible. Nous avons ici une rubrique qui est déjà positionnée et stylisée. Et vous pouvez également voir ici le service. Très bien, voyons voir cet élément de section, n'est-ce pas ? Maintenant. Passons à autre chose et personnalisons le wrapper des services Insérons de nouveaux commentaires, services et nouveaux services. Je vais régler la largeur de l'emballage à 100 %. Ensuite, nous devons harmoniser ces services à l'aide de flexbox. Je vais l'assigner au centre de classe Wrapper. Il inclut quelques styles Flexbox. Et en plus de cela, je vais ajouter à la colonne de direction de flexion de l'enveloppe On considère donc que les services sont placés au centre de cette section. Très bien, après cela, je vais personnaliser le service lui-même. Nous allons donc le sélectionner. Tout d'abord, je vais définir la largeur. Réglons-le à 70 %. Je vais également créer de l'espace haut et en bas des éléments, disons une marge par rapport à, à la RAM et à zéro. Et puis créez une bordure en bas. Nous avons besoin ici de 0,5 rem solide. Et comme couleur, je vais utiliser 90 E 0 Très bien, ensuite je vais définir la largeur du fond du service Sélectionnons le service btn et définissons sa largeur à 200 présents. Ensuite, personnalisons les éléments de la plage. Tout d'abord, je vais modifier la famille de polices. Dans ce cas, je vais utiliser un téléphone appelé Poppins, sans Augmentez ensuite la taille de la police, faites-en dix RAM. Je vais également modifier le style de la police. Ce sera en italica alors que nous avons besoin de l' épaisseur de la police pour être en gras Et enfin, changez de couleur. Utilisons-la à nouveau. Très bien, comme vous pouvez le constater, les titres des services sont personnalisés Par défaut. Nous devons les placer du bon côté. Faisons-le en utilisant des positions. Je vais définir la position sur Absolue. Ensuite, nous devons positionner les éléments par rapport à l'élément parent car nous allons positionner les éléments de la plage en fonction des parents. Maintenant, comme vous pouvez le voir, la mise en page est un peu foirée. Pour résoudre ce problème, nous devons définir la propriété d'affichage des pièces de rechange dans le bloc. Parce que par défaut, l'élément de lien est aligné. Et nous devons également définir la hauteur. Faisons-en 15 rampes. Très bien, maintenant on considère que le problème est résolu et nous pouvons déplacer ces services vers la droite Mettons donc la droite à zéro. Hein ? C'est tout à propos de l'élément lien. Passons à autre chose et personnalisons le texte. Sélectionnons le service taxé. Je vais augmenter la taille de la police. Faisons cinq rem. Changez également la couleur. Faites-en 777. Ensuite, je vais créer un espace entre les lettres. Faites-en 0,1 pièce. Et enfin, changez la hauteur. 15 points. Très bien, alors c'est ça. Tout est personnalisé et prêt à ajouter des effets à cette section. Par défaut, nous allons donc masquer le texte du service. Pour cela, réduisons la hauteur des textes à zéro. Et en plus de cela, je vais utiliser la visibilité cachée et l'opacité zéro Très bien, le texte est donc masqué et nous devons maintenant l' afficher une fois que nous avons cliqué sur ces boutons de service Je vais donc créer une nouvelle classe et CSS avec de nouveaux styles. Et puis nous ajouterons ces clusters, le paragraphe onclick en utilisant JavaScript Passons au fichier script.js et insérons nouveaux commentaires pour la section 4. Nous devons donc tout d'abord sélectionner un élément de lien. Ensuite, nous devrions les examiner et, lors d'un tel événement, écouter chacun d'eux. Je vais donc sélectionner les éléments de lien en utilisant le sélecteur de requête, toutes les méthodes Nous devons spécifier ici le nom de classe service btn, dont nous avons besoin pour chaque méthode avec une fonction de rappel comme paramètre, je vais insérer votre Ensuite, nous devons associer un écouteur d'événements au service à l'aide d'un événement de clic et d'une fonction de rappel Très bien, donc tout d'abord, je vais empêcher l'action par défaut des éléments de lien comme nous l'avons fait précédemment Je veux dire, une fois que nous aurons cliqué sur le lien, nous naviguerons vers le haut de la page. Pour l'éviter, nous avons besoin de la méthode preventDefault Dans un premier temps, passons ici l'objet de l'événement , puis utilisons la méthode de prévention par défaut. Alors maintenant, le problème est résolu. Ensuite, nous devons accéder au paragraphe et le stocker dans la variable. Créons une nouvelle variable avec le texte du service de noms. Nous avons besoin d'ici, Service Dot. Les éléments suivants sont frères, car le paragraphe est un frère du service Nous devons maintenant ajouter à cet élément un changement de classe, que nous allons définir dans le fichier CSS. Dans ce cas, je vais utiliser la méthode toggle car nous devons ajouter la classe de l'élément OnClick puis le supprimer Au clic suivant. Nous devons servir de liste de classes de points de texte, de bascule par points. Et nous devons spécifier ici le changement de nom de classe. Nous devons maintenant définir de nouveaux styles dans le fichier CSS. Sélectionnons les étiquettes de service avec changement de classe. Pour afficher le texte, nous avons besoin des styles suivants. Nous devons remettre la hauteur à 15 RAM. Ensuite, nous devons rendre la visibilité visible. Et nous devons également augmenter l'opacité. Faisons-en un Maintenant , si je clique sur les titres, les étiquettes de service appropriées s'afficheront Pour le moment, nous n'en avons pas ici et les effets sont fluides. Nous devons donc utiliser la transition. Nous devons définir la traduction dans les deux cas, je veux dire, par défaut et avec le changement de classe. Ainsi, dans le premier cas, nous devons effectuer une transition avec les valeurs toutes les 0,2 s. Dans le second cas, nous avons besoin que vous indiquiez la hauteur et l'opacité La durée sera donc de 0,5 s dans les deux cas. Mais avec l'opacité, nous avons besoin d'un certain délai. Disons 0,5 s. Comme vous pouvez le voir, tout fonctionne bien. La seule chose que nous avons à faire est de déplacer ce bouton de service sur le côté gauche de OnClick Pour cela, nous devons utiliser JavaScript car nous avons besoin de quelques calculs. Vous pensez peut-être qu'il suffit de modifier la position de cet élément du panneau, mais cela ne suffit pas. Si nous utilisons la position de décalage avec une valeur de zéro, nous ne pourrons pas utiliser la transition. Ainsi, par exemple, si nous modifions la bonne position et que nous la fixons à 100 %, vous verrez où les éléments de la travée seront positionnés. Pour ajuster leurs positions, nous devons donc soustraire la largeur de cet élément de portée à 100 % Je vais créer une nouvelle variable. Disons que c'est la bonne position. Comme nous l'avons dit, nous devons donc définir la bonne position du service btn. Et nous ne devons le modifier que lorsque la classe des étiquettes de service change. Nous devons donc insérer ici une déclaration conditionnelle dans laquelle nous devons vérifier si ce centre de services contient un changement de classe ou non. Nous avons donc besoin de points de taxe sur les services, liste de classes, de points contenant des points. Et nous devons spécifier ici le changement de classe. Si tel est le cas, nous devons soustraire la largeur de cet élément de plage à 100 % Je vais donc utiliser l'une des méthodes appelées calc. Ensuite, nous avons besoin de 100 % moins. Donc, pour accéder à la largeur des éléments de span, je vais utiliser l'une des méthodes appelées get computed style Cette méthode renvoie un objet contenant les valeurs de toutes les propriétés CSS de l'élément. Entre parenthèses, nous devons spécifier les éléments span, qui sont l'enfant du service Nous avons donc besoin du premier élément enfant du point de service. Et maintenant, nous devons accéder à la largeur. Cela se produira donc si la condition est vraie, mais si elle est fausse, nous devons placer la bonne position à zéro. D'accord ? Enfin, nous devons attribuer aux éléments de la travée la bonne position. Nous avons besoin du premier élément du point de service, enfant, point de style point, à droite. Et elle doit être égale à la bonne position. Maintenant, si je clique sur ce graphique de surface et qu'il se déplace vers la gauche, en fait, nous devons rendre ce moment plus fluide. Utilisons donc la transition. Nous avons besoin de la bonne durée, 0,5 s. Très bien, comme vous pouvez le voir, tout fonctionne parfaitement Et avec cette section, nous en avons terminé. Ensuite, nous devons nous occuper de la section de contenu. Passons donc à autre chose. 16. Créer et personnaliser le formulaire: Très bien, lors de la conférence précédente, nous avons fini de travailler sur la section projet, et maintenant il est temps de passer à la section suivante, qui sera un contact avec moi Cette section comprend deux parties différentes. Nous avons ici le titre suivi de quelques champs de saisie avec un bouton de soumission. Et ci-dessous, nous avons également un diaporama des icônes des réseaux sociaux Dans cette conférence, nous nous occuperons du formulaire. En ce qui concerne cette conférence, nous la créerons plus tard. Le titre qui est placé en haut des champs de saisie est dynamique. Je veux dire que par défaut, nous voyons ici le texte. Parlons-en. Mais si je concentre les champs de saisie, cela changera dynamiquement. Très bien, voyons ce que nous allons créer. Comme d'habitude, je vais commencer par le balisage HTML. Insérons de nouveaux commentaires dans le fichier HTML. Section 5. De la section 5. Ouvrez ensuite la balise de section avec une section de classe 5. Ainsi, dans la première partie de cette section, nous aurons un titre de section et les champs de saisie. Insérons de nouveaux commentaires pour le titre de la section 5. Ouvrez ensuite la balise de titre H1 avec le titre de la section de classe. Et avec le contenu. Contactez-moi Ensuite, je vais créer des éléments de formulaire, mais avant cela, nous avons besoin d'un wrapper de formulaire Insérons un nouveau formulaire de commentaires, puis ouvrons une balise div avec une classe pour rubber Cet élément inclura donc le titre et le formulaire lui-même. Ouvrons la balise d'en-tête H2 avec une classe d'en-tête de formulaire. Et avec le contenu. Parlons-en. Droite. Après les dettes, je vais créer un élément de formulaire lui-même qui sera attribué à chaque classe. Formulaire de contact. Dans l'ensemble, nous avons donc trois champs de saisie différents : du texte, une zone et un bouton de soumission. Ouvrons la balise de saisie. Le type va être taxé. De plus, nous avons besoin ici d'un attribut de classe, d' contact, d'entrées de formulaire. Ensuite, nous avons besoin d'un espace réservé. Avec le genou contenu. Dupliquons cette ligne de code deux fois. Le deuxième champ de saisie sera réservé aux e-mails. Je vais donc modifier le type et également l'attribut d' espace réservé Le champ de saisie suivant contiendra du texte. En ce qui concerne l' attribut d'espace réservé, je vais insérer votre sujet Très bien, après cela, je vais créer une zone de texte. Il comportera deux classes différentes. Un pour les styles courants, je veux dire Contact Form Input. Quant au second, il s'agira de styles individuels. Insérons la zone de texte de votre formulaire de contact. Nous avons également besoin d'un attribut d'espace réservé avec le message de contenu Enfin, créons un bouton d'envoi. Je vais le créer à l' aide d'un élément d'entrée. Le type va être soumis. Nous avons également besoin d' un attribut de classe avec la valeur du formulaire submit btn. Ensuite, nous avons besoin de l'attribut appelé valeur avec le contenu des requêtes d'envoi. D'accord ? Le balisage HTML est donc prêt, mais il n'est pas visible pour le moment Il est placé derrière l'arrière-plan. Nous devons donc commencer à écrire du CSS. Écrivons de nouveaux commentaires dans le fichier CSS, section 5. De la section 5. Sélectionnez ensuite les éléments de cette section. Tout d'abord, je vais changer de position. Faisons en sorte que ce soit un parent. Ensuite, je vais définir la hauteur. Faisons en sorte qu'il représente 100 % de la fenêtre d'affichage. Comme vous pouvez le voir maintenant, le contenu est visible. Je vais le placer au centre de cette section. Et pour cela, utilisons Flexbox. Je vais attribuer à l'élément de section le centre de classe. On considère donc que le contenu est placé au centre de cette action, et nous pouvons maintenant personnaliser les éléments. Allons-y et commençons par l'en-tête du formulaire. Je vais insérer de nouveaux commentaires pour le formulaire. Sélectionnez ensuite l'en-tête du formulaire. Et dans un premier temps, définissons sa famille de polices. Je vais utiliser ici Poppins SAN-Serif plutôt que d'augmenter la taille de la police, SAN-Serif plutôt que d'augmenter la taille de la police, d'en faire six RAM. De plus, je vais rendre la police légèrement plus audacieuse. Réglons la police sur 400, puis changeons la couleur. Je vais utiliser la couleur U 90, E 0 E. Ensuite, je vais créer un espace entre les lettres. Et nous avons également besoin d'un peu d'espace au bas d'un titre. Utilisons donc un espacement latéral avec une valeur de 0,3 environ. Ensuite, nous avons besoin de la marge inférieure avec la valeur trois. Rampe. Très bien, voyons le titre. Passons à autre chose et occupons-nous des champs de saisie. Je vais les aligner à l'aide de Flexbox. Allons-y et attribuons-les au centre de classe de l'élément de formulaire. Nous devons également modifier la direction de flexion afin de placer les champs de saisie verticalement dans une colonne. Nous allons donc sélectionner Contact Form et définir la direction de la flexion sur la colonne. Très bien, comme vous pouvez le voir, les champs de saisie sont alignés et nous devons maintenant les démarrer. Commençons par les entrées du formulaire de contact. Tout d'abord, je vais définir la largeur. Faisons-en 60 RAM. Ensuite, je vais créer de l'espace à l'intérieur de l' entrée en utilisant un rembourrage Nous obtiendrons la valeur 0,5 RAM. Créons également de l' espace en haut et en bas des champs de saisie en utilisant une marge avec les valeurs un, RAM et zéro. Très bien, ensuite, je vais changer la couleur de fond et aussi la bordure Je vais définir la couleur d'arrière-plan sur le blanc. Mais avec une opacité plus faible, je vais utiliser la valeur RGBA avec une couleur blanche et une opacité de 0,1 Et changez également la bordure. Attribuons au point 1 g de solide, et nous colorons 90 E 0 E. Très bien, après cela, je vais m' occuper de la police Augmentons la taille de la police, mettons-la à 1,7 rem. Je vais également mettre la police en gras. Changez ensuite la couleur. Vous utilisez votre couleur AAA et vous créez également un espace entre les lettres. Faisons-le à 0,1 rem. Très bien, les champs de saisie sont donc bien meilleurs. Ensuite, je vais m' occuper de la hauteur des champs de saisie ainsi que de la zone de texte. Ils auront des hauteurs différentes. Réglons la hauteur des entrées du formulaire de contact à cinq RAM. Sélectionnez ensuite la zone de texte et réglez sa valeur maximale sur 20 lignes. Très bien, comme vous pouvez le voir, les champs de saisie et la zone de texte sont beaux Avant de passer à autre chose et de personnaliser le bouton d'envoi, je vais corriger un petit problème. Dans le cas de la zone de texte, nous pouvons modifier sa largeur et sa hauteur manuellement à partir du coin inférieur droit où se trouve le contrôleur de redimensionnement Une fois que nous avons modifié la taille de la zone de texte , la mise en page sera interrompue. Je vais donc désactiver cette fonctionnalité. Pour cela, nous devons utiliser l'une des propriétés CSS appelée resize Et nous devons le régler à zéro. Bien, comme vous pouvez le constater, nous ne pouvons plus modifier la taille de la zone de texte. Donc, le dernier élément dont nous avons besoin pour personnaliser ce bouton de soumission, sélectionnons-le. Tout d'abord, je vais définir la largeur et la hauteur. Réglons la largeur à 20 RAM. Pour ce qui est de la hauteur, je vais lui donner cinq RAM. Changez ensuite la couleur d'arrière-plan. Je vais utiliser ici la même couleur rouge. Ensuite, supprimez la bordure par défaut. Faisons en sorte qu'il n'en soit rien. OK, ensuite, je vais le placer sur le côté gauche. Pour cela, je vais utiliser la propriété appelée align self. Nous pourrions commencer par valoriser la flexibilité. Augmentez également la taille de la police et modifiez la couleur du texte. C'est bon, c'est ça. Tous les éléments sont stylisés et il est maintenant temps de dynamiser le formulaire Une fois que nous nous sommes concentrés sur les différents champs de saisie, nous devons afficher le titre approprié. Pour ça. Je vais utiliser JavaScript. Passons au fichier script.js et insérons de nouveaux commentaires pour la section 5. Tout d'abord, je vais sélectionner l'en-tête du formulaire ainsi que tous les champs de saisie, y compris la zone de texte. Insérons votre nouveau formulaire de commentaires. Ensuite, je vais sélectionner un titre. Créons donc une nouvelle variable Appelez-la à partir du titre, puis sélectionnons ces éléments l'aide de la méthode de sélection de requête Ensuite, nous devons sélectionner les entrées. Je vais donc dupliquer cette ligne de code, puis changer le nom. Nous avons besoin d'entrées de formulaire. De plus, nous avons besoin ici d'une requête, d'un sélecteur, de toutes les méthodes. Et puis précisons ici le nom de la classe, saisie du formulaire de contact. Très bien. Ensuite, nous devons parcourir les champs de saisie et utiliser l'événement appelé focus. Je vais donc utiliser pour chaque méthode avec des entrées de formulaire. Passons une fonction de rappel avec le paramètre saisi. Nous devons donc attacher l'écouteur d'événements aux entrées avec l'événement appelé focus Ainsi, une fois que nous avons focalisé les champs de saisie, nous devons modifier le contenu du texte du titre. Nous avons donc besoin ici d'un titre de formulaire, d'un contenu de texte à points. Ensuite, je vais ouvrir les backticks. Le texte commencera par votre. Ensuite, nous avons besoin de la valeur de l'attribut placeholder. Je vais donc passer ici les entrées, les points, le lieu, le support. Cela nous donnera la valeur de l'attribut placeholder. Donc, si je concentre l'une des entrées, contenu standard du titre changera. Tout fonctionne bien, mais nous devons modifier le contenu du titre avec un effet de fondu. Une fois que nous avons focalisé les entrées, nous devons masquer le titre et l'afficher après un certain temps, qui doit être égal à la durée de l'effet de transition. Donc, tout d'abord, nous devons masquer le titre du formulaire institutionnel (style de point de titre, opacité du point égale à zéro Ensuite, nous devons utiliser une méthode setTimeout. Plaçons cette ligne de code à l'intérieur de la fonction. Et ajoutez également ici à partir du style de point du titre, opacité du point égale à un La durée de la transition va être de 0,3 s. Je vais donc passer ici à 300 millisecondes Ensuite, nous devons utiliser la transition dans le fichier CSS avec les valeurs opacité 0,3 s. D'accord, donc si l'on considère maintenant que nous avons un bel effet de fondu La seule chose que nous avons à faire est de revenir ici au contenu par défaut du titre une fois que nous avons défocalisé le champ de saisie Pour y parvenir, je vais utiliser un autre événement appelé bluer, qui se produit une fois que nous avons défocalisé les champs de saisie Allons-y et dupliquons ce code. Modifiez ensuite l'événement dont nous avons besoin ici, plus bleu. Et nous devons également modifier le contenu du titre. Ce sera le contenu par défaut. Parlons-en. Donc, si je clique n'importe où sauf sur les champs de saisie, constante changera et la constante changera et celle par défaut sera affichée. Très bien, c'est donc à propos de la première partie de la section de contenu Ensuite, nous allons créer un diaporama des icônes des réseaux sociaux Passons donc à la conférence suivante. 17. Créer un diaporama de liens de réseaux sociaux: Très bien, donc dans la dernière vidéo, nous avons créé la première partie de la section de contact pour les clients de la section de contact pour les Maintenant, je dois m'occuper de ce diaporama des icônes des réseaux sociaux Comme vous pouvez le constater, ils sont placés sous les champs de saisie. Je veux dire, au bas de la page, les icônes se déplacent à intervalles réguliers. L'icône au centre s'éclaircit. Quant aux autres icônes, elles sont plus sombres par défaut. Très bien, allons-y et commençons à créer le balisage HTML Insérons de nouveaux commentaires pour le diaporama. Ouvrez ensuite la balise div, qui sera l' enveloppe de ce Donc, dans l'ensemble, nous aurons cinq icônes de réseaux sociaux différentes. Ils seront représentés par les images et seront également encapsulés par les éléments de lien. Je vais donc ouvrir la balise link avec le lien du diaporama de la classe Ensuite, je vais indiquer ici dans quels éléments. Spécifiez l'attribut source. Nous avons besoin de dossiers, d'images, icônes sociales, puis du diaporama d'images, MG F1, PNG Donc, dans l'ensemble, nous aurons cinq icônes. Dupliquons l'élément de lien quatre fois, puis changeons rapidement le nom des images. D'accord, nous avons donc ici les icônes. À l'heure actuelle, ils sont trop grands et la mise en page est foirée. Alors occupons-nous de ça. Je vais placer les icônes horizontalement dans une rangée. Utilisons donc Flexbox. Dans la mesure où je vais insérer vos commentaires pour le diaporama Sélectionnez ensuite les éléments div du wrapper qui lui sont assignés. L'écran est flexible. Je vais également définir sa largeur. Ensuite, nous devons sélectionner un élément de lien et modifier la largeur. Je vais régler la largeur à 20 %. Enfin, nous devons définir la largeur de l'image elle-même. Nous allons donc sélectionner l'image. Réglez sa largeur à 100 %. Dans ce cas, l' image occupera 100 % de la largeur de son élément parent. Maintenant, comme vous pouvez le constater, nous avons ici de bien meilleurs résultats. l'heure actuelle, les champs de saisie et les icônes sont placés côte à côte pour les placer les uns sur les autres Allons-y et changeons la direction de flexion de l'élément de section. Nous devons en faire une colonne. Très bien, nous avons maintenant besoin d' un peu d' espace entre les entrées et les icônes Utilisons la marge supérieure, la valeur dix RAM, et créons également de l'espace sur les côtés gauche et droit à l' aide d'un rembourrage Mettons-le à zéro et exécutons-le. Enfin, je vais attribuer aux icônes un rembourrage sur les côtés gauche et droit Cela réduira les images. Réglons donc le padding sur 0.1 run. Très bien, voyons ce qu'il en est du CSS. Pour l'instant Nous devons faire fonctionner le diaporama en utilisant JavaScript. Passons donc au fichier script.js. Tout d'abord, je vais insérer vos nouveaux commentaires pour le diaporama Ensuite, nous devons sélectionner le développement du wrapper. Créons une nouvelle variable. Je vais l'appeler diaporama et le sélectionner à l'aide de la méthode QuerySelector Très bien, alors laissez-moi vous dire comment nous allons faire fonctionner ce diaporama Nous allons supprimer la première icône de la liste et la rajouter à la liste en tant que dernière icône. Nous le ferons avec quelques intervalles et aussi avec des transitions fluides. Parlons du processus de ce diaporama. Comme nous l'avons dit, nous avons besoin de certains intervalles et pour cela je vais utiliser l'une des méthodes intégrées appelée set interval. Il faut deux arguments. La première est une fonction de rappel, qui est exécutée après chaque intervalle Quant au second argument, il s' agira de la quantité de l' intégrale elle-même. Nous allons changer les images au bout de 3 s. Je vais donc dépasser les 3 000 millisecondes OK, donc comme nous l'avons dit, nous devons supprimer la première icône , puis l'ajouter à la liste en tant que dernière. Alors tout d'abord, sélectionnons la première icône. Je vais créer une nouvelle variable. Appelons-la première icône. Ensuite, nous avons besoin du diaporama point premier élément enfant pour accéder à la première icône Maintenant, la première icône est sélectionnée et pour la supprimer du développement du wrapper, je vais utiliser l'une des méthodes du dôme appelée remove child Nous avons donc besoin de points de diaporama, supprimez l'enfant. Et nous devons le préciser ici pendant une seconde. Comme vous pouvez le constater, toutes les 3 secondes, les icônes disparaissent. Comme nous l'avons dit, nous devons les ajouter à nouveau à la liste. Et pour cela, je vais utiliser une autre méthode en forme de dôme appelée append child Par défaut, il ajoute un élément en tant que dernier enfant. Nous avons donc besoin du diaporama point append child. Et nous devons encore une fois le spécifier pour son icône. OK, comme vous pouvez le voir, le diaporama, toutes les œuvres, mais nous devons y ajouter quelques effets différents La première chose que je vais faire est de supprimer la première icône en douceur avec un effet de fondu. Pour ce faire, je vais créer une nouvelle classe et du CSS, disons que c'est effacé. Cette classe comprendra donc deux cellules. Pour effacer les éléments, nous devons réduire l'opacité et la largeur à zéro. Et en plus de cela, nous devons utiliser transition pour la première icône. Pour sélectionner la première icône, je vais utiliser le sélecteur f child Alors instituons la transition. Nous avons besoin de largeur, d'une durée de 0,5 s, puis d'une opacité de même durée OK, c'est tout à propos du CSS. Revenons au fichier JavaScript. Maintenant, nous devons ajouter de la classe, effacée. La première icône. Nous avons d'abord besoin d'une icône, d'un point, une liste de classes, d'un point à ajouter. Et nous devons spécifier ici que le nom de la classe a disparu. Maintenant, l'icône est supprimée mais sans aucun effet de fondu car l'effet transition dure un certain temps, en fait la moitié de la seconde. Nous devons donc attendre la moitié de cette seconde avant de supprimer l'élément de la liste. Pour ce faire, je vais utiliser l'une des métriques appelées setTimeout Nous aurons deux arguments. La première sera une fonction de rappel. Insérons ici ces deux lignes. Pour ce qui est du temps, je vais utiliser 500 millisecondes Maintenant, l'icône est supprimée avec un bel effet de fondu. Nous devons maintenant le rajouter à nouveau à la liste avec effet de fondu. Pour ce faire, nous devons supprimer la classe disparue des éléments Nous devons donc d'abord répertorier les classes d' icônes, supprimer les points, puis les effacer. Maintenant, l'icône est ajoutée à la liste, mais sans effet de fondu. Parce qu'encore une fois, nous devons attendre la moitié de la seconde. Nous devons donc utiliser à nouveau la fonction setTimeout avec le même laps de temps, 500 millisecondes Nous n'avons donc toujours pas l'effet de fondu car nous devons définir la transition pour la dernière icône. En fait, nous avons besoin de la même transition que celle que nous avons utilisée pour la première icône. Je vais donc ajouter ici juste le sélecteur pour la cinquième icône Donc pour l'instant, tout fonctionne bien et nous pouvons passer à autre chose et nous occuper du second effet. Je veux dire, nous devons assombrir les icônes par défaut, et nous devons les éclaircir une fois qu'elles occupent la troisième place de la liste. Tout d'abord, assombrissons toutes les icônes. Pour cela, je vais utiliser l'une des propriétés appelées filtre avec une fonction appelée luminosité. Après cela, je vais créer une nouvelle classe et du CSS, qui incluront la luminosité la plus élevée. Et nous ajouterons cette classe sous forme d' éléments utilisant JavaScript. Appelons cette classe lumière et attribuons-lui la luminosité du filtre avec la valeur 1,5. Nous devons maintenant sélectionner la troisième icône et y ajouter une lumière de classe nouvellement créée. Créons une nouvelle variable, appelons-la troisième icône. Pour accéder à la troisième icône, nous avons besoin d'un diaporama Et nous avions précisé ici le chiffre trois. Nous avons maintenant sélectionné la troisième icône et nous devons ajouter à sa classe light. Nous avons donc besoin d'une troisième icône, d'un point, d'une liste de classes. Des points, de la lumière. Comme vous pouvez le voir, l' icône devient plus claire, mais elle conserve sa luminosité. Nous n'en avons pas besoin. Nous devons retirer la lumière de la classe. Nous devons donc la supprimer de la sœur précédente de la troisième icône, car une fois qu'elle est déplacée, ce n'est plus la troisième icône la liste, mais la deuxième Nous avons donc besoin du troisième point d'icône, des éléments précédents, du frère, du point, de la liste des classes, du point, la suppression de la lumière du nom de la classe Alors maintenant, tout fonctionne bien. Il suffit d'ajouter une transition à cet effet. Allons-y et sélectionnons la troisième icône en utilisant sélecteur f child affecté à sa transition avec le filtre de valeurs 0,5 s. Nous avons donc maintenant de bien meilleurs résultats L'icône s' assombrit doucement. Mais comme vous pouvez le constater, nous aurons également besoin d' une transition une fois que l'icône deviendra plus claire. Ajoutons donc ici filtre de transition et la durée 1,5 s. Bon, alors maintenant tout allait bien. Et avant de terminer cette conférence, je vais faire encore une chose. Si je recharge la page, les cinq icônes seront plus sombres. En fait, nous n'en avons pas besoin. Nous devons rendre l' icône alimentaire plus claire par défaut. Et pour ce faire, je vais ajouter une classe associée à la troisième icône du fichier HTML. C'est bon, c'est ça. Enfin, nous avons terminé. Nous avons terminé de travailler sur la section contact. Passons à autre chose. 18. Créer et personnaliser la navigation: OK, donc une fois que nous en aurons terminé avec la section de contact, je vais créer et personnaliser la navigation. Jetons un coup d'œil au projet terminé. Comme vous pouvez le constater, nous avons ici quelques éléments de navigation différents. Une fois que nous faisons défiler la page, le menu de navigation se transforme en une icône composée de deux lignes. Si nous cliquons à nouveau dessus, les éléments du menu s'afficheront. Ensuite, si je fais défiler la page , les éléments seront masqués et l'icône du menu s'affichera. Si je fais défiler l'écran jusqu' en haut de la page, les éléments du menu s' afficheront automatiquement. De plus, si je clique sur les éléments du menu , nous accéderons facilement aux sections appropriées. Très bien, c'est ce que nous allons faire dans cette conférence. Allons-y et commençons à créer un balisage HTML. Je vais insérer de nouveaux commentaires juste après l'arrière-plan de la page. Ensuite, je vais à nouveau insérer ici nouveaux commentaires pour l'icône du menu. Ouvrez ensuite la balise div avec l'icône du menu de classe. Comme vous l'avez vu, l'icône du menu sera composée de deux lignes. Je vais donc ouvrir la balise div avec la ligne d'icône du menu de classe Alors dupliquons-le. Ensuite, je vais créer des éléments de navigation. Insérons vos nouveaux commentaires, barre de navigation et c'est parti. Ouvrez ensuite l'élément de navigation HTML5 avec une barre de navigation de classe. Dans l'ensemble, nous aurons donc cinq éléments de navigation différents. Ouvrons la balise de lien avec une sieste de classe ou lien vers la page d'accueil du contenu. Ensuite, je vais dupliquer les éléments du lien quatre fois et modifier le contenu. Le deuxième article va me concerner. Ensuite, nous aurons des projets, des services et des contacts. Très bien, c'est tout à propos du balisage HTML. Tout est prêt, mais pour l' instant rien n'est visible. Nous allons bientôt régler ce problème. Commençons par écrire du CSS. Tout d'abord, je vais afficher et personnaliser les éléments de navigation. Insertons de nouveaux commentaires, de navigation et de navigation. Ensuite, nous avons à nouveau besoin de commentaires pour la barre de navigation. Sélectionnons les éléments de navigation. Tout d'abord, définir sa position va être fixée. Et je vais également définir la meilleure propriété. Passons à 2,5 rem. Maintenant, les quatre sont visibles. Je veux dire, si je sélectionne tous les éléments, vous verrez les éléments de navigation dans le coin supérieur gauche de la page. Nous devons les placer du bon côté pour cela. Je vais utiliser Flexbox. Tout d'abord, définissons cette largeur. Je vais le régler à 100 %. Utilisez ensuite flexbox. Nous avons besoin de Display Flex. Et afin de placer les articles sur le bon côté, nous justifions le contenu avec Value Flex End. Comme vous pouvez le voir, la barre de navigation est placée sur le côté droit de la page Très bien, créons de l'espace sur le côté droit en utilisant du rembourrage Je vais régler correctement le rembourrage, 23 rampes. Voyons ce qui se passe en haut à droite. Ensuite, je vais personnaliser les liens. Nous allons donc sélectionner maintenant par lien. Tout d'abord, je vais définir sa taille de police. Faisons en sorte qu'il fonctionne à 1,5. Ensuite, je vais rendre le téléphone plus audacieux. Réglons la taille de la police à 700. Transformez également le texte en majuscules et changez la couleur, rendez-le blanc Ensuite, je vais créer un espace entre les éléments en utilisant la marge. Mettons-le à zéro en haut et en bas et à 2,5 rem sur les côtés gauche et droit. Très bien, comme vous pouvez le voir, les éléments du menu sont personnalisés Si je fais défiler la page vers le bas, vous remarquerez que les éléments se retrouvent derrière les éléments. Je vais corriger cela en utilisant la propriété d'indice Z. Mettons-le à 100. Et en plus de cela, je vais ajouter un petit effet d'ombre aux objets. Utilisons une ombre de texte avec les valeurs 0,3 RAM, 0,5 RAM et la couleur noire. C'est bon, c'est ça. Pour notre part, nous en avons terminé. Maintenant, je vais styliser l'icône du menu. Au début. Allons-y et masquons le nombre en utilisant l' opacité zéro et la visibilité masquée Insérez ensuite de nouveaux commentaires pour l'icône du menu et sélectionnez-la. Tout d'abord, je vais fixer la position de l'icône du menu Définissons ensuite cette largeur et cette hauteur. Je vais régler avec 212 RAM. Quant à la hauteur, faisons-en sept RAM. Et en plus de cela, je vais utiliser une couleur de fond temporaire. Mettons-le en rouge. Nous avons donc ici l'icône du menu. À l'heure actuelle, il est placé dans le coin supérieur gauche de la page, nous devons donc modifier sa position. Mettons le haut à zéro et la position droite à six rampes. Très bien, il est maintenant temps d' afficher les lignes. Allons-y et sélectionnons l'icône du menu, la ligne, la largeur et la hauteur définies. Je vais régler la largeur à quatre RAM. Quant à l'hybride, il y aura 0,1 RAM. Et changez également la couleur d'arrière-plan, rendez-la blanche. Nous avons donc ici les lignes, mais comme vous pouvez le voir, nous avons besoin d'un espace entre elles. Créons de l'espace en utilisant la marge 0,5 rem et zéro. Et ajoutons également aux lignes un petit effet d'ombre. L'utilisation de box-shadow donnera les valeurs 0,31, 0,5 RAM et la couleur noire Très bien, après cela, je vais placer l'icône au centre de la boîte. Pour cela, nous pouvons simplement utiliser un centre de classe. Et en plus de cela, nous devons changer la direction de la flexion. Configurons-le pour les appeler. Très bien, l'icône du menu est donc personnalisée et nous pouvons nous débarrasser du fond rouge L'icône est prête et nous devons maintenant faire en sorte que la navigation fonctionne. Par défaut, je vais masquer l'icône du menu et afficher à nouveau les éléments de navigation. Nous avons donc besoin d'une opacité nulle, d' une visibilité cachée. Et nous devons également nous débarrasser de ces deux lignes à partir d'ici. Ainsi, une fois que nous faisons défiler la page, nous devons masquer les éléments du menu et afficher l'icône du menu. Nous devons donc utiliser l'événement de défilement. Passons au fichier JavaScript et, tout d'abord, sélectionnons l'icône du menu. Et puis Albert, dans un premier temps, instituons les commentaires, la navigation, la navigation. Ensuite, je vais sélectionner l'icône du menu. Créons une nouvelle variable et appelons-la icône de menu, puis sélectionnons les éléments à l' aide de la méthode QuerySelector Ensuite, je vais dupliquer cette ligne de code, changer le nom de la variable. Nous avons besoin d'une barre de navigation. Et je vais aussi changer le nom de la classe. Nous en avons besoin à nouveau maintenant, pour d'accord, après cela, nous devons attacher un écouteur d'événements aux documents avec un événement de défilement Comme nous l'avons dit, nous devons donc réussir à masquer et à afficher l' icône du menu lors du défilement. Je vais créer de nouvelles classes et un nouveau fichier CSS avec de nouveaux styles. Ensuite, nous les ajouterons aux éléments à l'aide de JavaScript. Créons donc une nouvelle classe, je vais l'appeler Afficher l'icône du menu. Pour afficher l'icône du menu, nous avons besoin de l'opacité 1 et de la visibilité visible en cas de numéro, nous devons le masquer Je vais donc créer une nouvelle classe. Appelons-la la barre Hide now. Dans ce cas, nous avons besoin d'une opacité nulle et d'une visibilité cachée. Très bien, les classes sont prêtes, et nous devons maintenant les ajouter à l'icône du menu Et puis dans le menu supérieur, je peux mettre des points dans la liste des classes, ajouter des points. Et nous devons spécifier ici le nom de la classe, afficher l'icône du menu. Ensuite, dans le cas d'un aéroport, nous avons maintenant besoin du port point, de la liste des classes, du point, d'ajouter le nom de la classe, de la hauteur de la barre de navigation Donc, si je fais défiler la page vers le bas, les éléments de navigation se masqueront et l' icône du menu s'affichera. Nous devons faciliter ce changement par le biais d'une transition. Ajoutons à l' icône du menu une transition avec les valeurs opacité et 0,2 s. En ce qui concerne la barre de navigation, je vais à nouveau utiliser l'opacité de transition 0,5 s et également la visibilité 0,5 s. Alors maintenant, si nous faisons défiler la page vers le bas, les éléments se masqueront et afficheront avec quelques effets de fondu. En plus de cela, je vais ajouter un autre effet au napa Je veux le déplacer vers la droite une fois qu'il est masqué. Insérons donc votre transformation, traduisons X avec la valeur dix RAM. Et ajoutez également une propriété de transformation à la transition avec la même durée, 0,5 s. Maintenant, je pense que nous avons un bien meilleur effet. La prochaine chose que nous allons faire est réafficher les éléments de navigation. Une fois que nous faisons défiler la page. Pour cela, nous devons utiliser instructions If dans lesquelles nous devons vérifier si la page est explorée ou non Nous avons donc besoin du défilement par points de la fenêtre. Pourquoi ? En fait, cette propriété renvoie le nombre de pixels pendant lequel la page est actuellement en train de défiler verticalement. Ainsi, si la propriété scroll why est égale à zéro, cela signifie que la page est appelée jusqu'au bord supérieur. Et nous devons afficher les éléments du menu et masquer l'icône du menu. Nous avons donc besoin du point de l'icône du menu, de la liste des classes, et non de la suppression de l'icône du menu d'affichage de la classe. Et dans le cas présent, ce dont nous avons besoin maintenant pour la liste des classes de points, suppression des points, la hauteur, le nombre. D'accord ? Si je fais défiler haut, des éléments de menu authentiques s'afficheront, tandis que l'icône du menu sera masquée. OK, nous avons donc presque terminé la navigation. La seule chose que nous devons faire est d'afficher les éléments de navigation. Donc, une fois que nous avons cliqué sur l'icône du menu, nous devons également connecter les éléments du menu pour qu'ils soient des sections appropriées. Allons-y et associons un écouteur d'événements à l' icône du menu à l'aide d'un événement de clic Ensuite, nous devons passer ici ces deux lignes. Donc, si je clique sur l'icône du menu, rien ne se passera car à l'heure actuelle , l'icône du menu est placée derrière le cercle de la bouche. Nous devons donc utiliser une propriété z-index. Portons-en à 100. Et en plus de cela, je vais changer le curseur. Faisons-le comprendre. Très bien, comme vous pouvez le voir, tout fonctionne bien. La dernière chose que nous aurons à faire est de connecter les éléments du menu aux sections afin de pouvoir accéder correctement à la section. Une fois que nous avons cliqué sur les éléments. Pour ce faire, nous devons utiliser la référence h et les attributs id. Nous devons spécifier les attributs de référence h des liens afin qu'ils correspondent aux valeurs des attributs des sections. Allons-y et définissons les attributs de référence h. Je vais transmettre vos sections avec les chiffres. Ensuite, nous devons attribuer à chaque élément de section l' attribut id avec des valeurs similaires. Nous avons besoin de numéros de section de un à cinq. Donc, si je clique sur les éléments du menu, rien ne se passera. Il se peut que nous ayons un problème dans le CSS. Allons-y et vérifions. Comme vous pouvez le constater, j'ai attribué la propriété z-index au lien de la barre de navigation et non au numéro lui-même. Alors allons-y et résolvons ce problème. Alors maintenant, comme vous pouvez le constater, tout fonctionne parfaitement. Enfin, en ce qui concerne la navigation, c'est terminé. Ensuite, nous allons créer la barre de progression. Passons donc à la conférence suivante. 19. Barre de progression de conception - Partie 1: Très bien, dans la dernière vidéo, nous avons créé et personnalisé la navigation, et il est maintenant temps de nous occuper de la barre de progression Jetons un coup d'œil au projet terminé. Nous avons donc ici la barre de progression, qui a la forme du cercle et dont la position est fixe. Au centre du cercle. Nous avons la flèche. Une fois que nous commençons à faire défiler la page vers le bas, la ligne rouge apparaîtra et remplira le cercle. Quand on descend jusqu'à la page. Une fois que nous faisons défiler la page vers le bas, la flèche changera de direction. Si nous commençons à faire défiler la page vers le haut, la ligne rouge commencera à disparaître. La barre de progression fonctionne également avec les projets. Je veux dire, si nous développons l'un des projets la ligne rouge disparaîtra et la barre de progression commencera à fonctionner avec le projet. Je veux dire, il sera rempli une fois que nous aurons fait défiler l'image vers le bas. Si nous fermons le projet la barre de progression continuera de fonctionner conformément à la page. Très bien, alors allons-y et commençons à travailler sur la barre de progression. Je vais créer le balisage HTML. Insérons de nouveaux commentaires juste après l'arrière-plan de la page. Nous avons besoin d'une barre de progression et d'une barre de progression. Ouvrez ensuite une balise de lien avec une barre de progression de classe. À l'intérieur de l'élément de lien, nous aurons besoin de quatre éléments différents. instant, créons-les, puis nous expliquerons et montrerons pourquoi nous avons besoin de ces éléments. Ouvrons une balise div avec le demi-cercle de classe, puis dupliquons-la trois fois. En fait, nous n'avons pas besoin de toucher aux éléments de la deuxième division. Le troisième sera le sommet d'un cercle central. Quant au dernier élément div, il s'agira d'un cercle de barre de progression Comme le contenu. Insérons ici l'une des entités HTML5 Nous avons besoin d'une esperluette plutôt que de la ligne pointillée 8595, d'un point-virgule. Très bien, c'est tout à propos du balisage HTML. Allons-y et commençons à écrire du CSS. Insérons de nouveaux commentaires dans le fichier CSS, barre de progression. Et de la barre de progression. Sélectionnez ensuite les éléments du lien. Tout d'abord, je vais le mettre en position fixe. Définissez ensuite la largeur et la hauteur. Je vais leur faire un tramway à tous les deux. Et changez également la couleur d'arrière-plan, rendez-la blanche. Comme vous pouvez le voir, la barre de progression est placée dans le coin supérieur gauche de la page. Nous devons changer sa position. Je vais définir les propriétés du bas et de la droite. Mettons-les tous les deux à huit tours. Très bien, la barre de progression est donc positionnée et elle est placée dans le coin inférieur droit Ensuite, je vais l' arrondir. Pour cela, nous avons besoin d'un rayon de bordure d'une valeur de 50 %. Très bien, c'est tout à propos de l'emballage. Passons à autre chose et prenons soin du cercle de la barre de progression. Sélectionnons ces éléments et définissons sa largeur et sa hauteur. Je vais leur faire 7,8 RAM pour les deux. Changez ensuite la couleur d'arrière-plan. Je vais le rendre noir. Ensuite, nous devons l'arrondir en utilisant un rayon de bordure de 50 %. Modifiez également la couleur, mettez-la en blanc, puis augmentez la taille de police de la flèche. Faisons-le pour la location. Cet élément est donc intitulé, mais nous devons faire attention à sa position. Il doit être placé au centre de l'emballage. Et nous devons également centrer la flèche à l'intérieur du cercle. Dans les deux cas, je vais utiliser un centre de classe. Maintenant, on considère que le problème est résolu. Très bien, la barre de progression est donc prête. Il a le Luke par défaut, et maintenant nous devons faire le travail. Comme vous vous en souvenez, nous avons créé plusieurs développements différents. Les premiers développements, qui comportent un demi-cercle de classe, parviendront à faire apparaître la barre de progression d'une couleur rouge. La première chose que je vais faire est de masquer le cercle noir pendant un moment afin mieux expliquer et démontrer les choses. Je vais donc assigner à n'en afficher aucun. Très bien, le cercle noir est donc masqué, et nous devons maintenant nous occuper des trois éléments de division qui nous aideront à faire fonctionner une barre de progression Sélectionnons les trois éléments simultanément. Je veux dire, nous avons besoin d'un demi-cercle avec un demi-cercle en haut. Définissons la position, rendons-la absolue. Nous devons également atteindre 50 %. Pour la hauteur. Je vais le faire à 100 % et en plus de cela, je vais définir les propriétés du haut et de la gauche. Mettons les deux à zéro. Les éléments ne sont donc pas visibles pour le moment. Et pour résoudre ce problème, je vais attribuer à chacune d'elles une couleur d' arrière-plan temporaire différente. Sélectionnons un demi-cercle avec le nième sélecteur enfant. La couleur de fond du premier demi-cercle sera donc le vert. Ensuite, je vais dupliquer ce code. Changeons la couleur de fond, mettons-la en bleu. Et puis sélectionnez le demi-cercle en haut. Rendez sa couleur de fond orange. Très bien, donc les trois éléments du div sont placés les uns sur les autres C'est pourquoi nous voyons ici l'orange. Uniquement. Si je commente cette ligne, nous verrons ici les éléments bleus. Tout d'abord, je vais faire fonctionner la barre de progression en mode survol afin de la rendre plus facile à comprendre Ensuite, nous allons changer le survol et utiliser les événements de défilement en utilisant JavaScript Nous devons faire pivoter le premier demi-cercle de 180 degrés. En ce qui concerne le second demi-cercle, nous devons le faire pivoter de 360 degrés car nous devons remplir tout le cercle. En ce qui concerne le haut en demi-cercle, dans ces éléments oranges, nous devons le masquer. Nous allons donc sélectionner la barre de progression avec le pointeur de la souris, suivie du premier demi-cercle Comme je l'ai dit, nous devons le transformer avec fonction Rotation avec la valeur 180 degrés. Dupliquez ensuite ce code, modifiez le numéro du nième enfant Nous devons demander la valeur de la fonction de rotation. Nous avons besoin de 360 degrés, non ? En plus de cela, nous devons utiliser la transition pour créer le moteur de rotation Nous avons donc besoin d'une transformation de 1 s. Et je vais également utiliser la fonction de synchronisation de transition linéaire. Copions cette ligne de code et collez-la. Pour le deuxième élément. Nous devons augmenter la durée. Passons à 2 secondes. Maintenant, si nous survolons les éléments, rien ne se passera car la souris ne nous permet pas de survoler les Cela en dit long en utilisant la propriété z-index. Réglons-le à 200. Alors maintenant, si je passe la souris, les éléments vont pivoter. heure actuelle, nous ne voyons ici que l' élément bleu parce que l' vert se trouve en dessous. Si je poste le fond bleu ici, vous verrez les éléments verts. Les éléments tournent donc, mais dans le mauvais sens. Je veux dire que l'origine de la transformation est définie sur le centre par défaut. Mais dans notre cas, nous devons le placer au bon centre. Utilisons donc l' origine de la transformation avec des valeurs, n'est-ce pas ? Centre. Dans ce cas, l'origine de la transformation sera le centre de l'élément, mais du côté droit. OK, donc une fois que nous survolons la barre de progression, nous devons masquer ces éléments oranges Nous allons donc sélectionner la barre de progression avec le pointeur de la souris, puis le demi-cercle en haut, et réglons l'opacité à zéro Maintenant, l'élément s'élève une fois que nous survolons la barre de progression. Mais en fait, il se cache trop tôt. Nous devons le masquer une fois que l'élément vert a fini de tourner. Nous devons donc le masquer après 1 s. Utilisons la transition. Avec opacité. La durée va être nulle, puis nous aurons besoin d'un délai de 1 s. Très bien, maintenant tout fonctionne bien Nous devons changer les couleurs et créer les éléments qui l'entourent. Les deux premiers développements doivent être de couleur rouge. Je veux dire la couleur B6 et les zéros. Quant au troisième élément, il sera blanc car la barre de progression elle-même a un fond blanc. Nous devons maintenant masquer ces parties extérieures des éléments. Pour cela, utilisons overflow hidden. Très bien, nous avons maintenant de bien meilleurs résultats. Enfin, nous devons rendre le cercle noir visible. Supprimons l'affichage. l'heure actuelle, la partie du cercle est visible car elle s'est retrouvée derrière les éléments du div Pour résoudre ce problème , réutilisons la propriété index avec la valeur 200. D'accord ? Maintenant, si je passe la souris sur la barre de progression, elle sera bien remplie de rouge Très bien, nous vous avons donc montré comment créer une telle barre de progression en utilisant CSS Et maintenant, nous allons vous montrer comment le faire fonctionner sur le défilement à l'aide de JavaScript Commençons par commenter ces styles. Je veux dire ces serviettes en vol stationnaire. Accédez ensuite au fichier JavaScript. Tout d'abord, je vais sélectionner les éléments du div. Je veux dire, pour les éléments div qui sont placés dans la barre de progression. Créons de nouveaux commentaires pour la barre de progression. Ensuite, je vais créer une nouvelle variable, appelons-la demi-cercle. Et sélectionnez les deux premiers éléments div dont les noms de classe sont en demi-cercle Je vais utiliser la méthode all du sélecteur de requêtes. Ensuite, dupliquons cette ligne de code. Changez le nom de la variable, elle sera placée en demi-cercle en haut. De plus, nous avons besoin ici d'une requête, d'une méthode de sélection, puis de la modification du nom de la classe Enfin, créez la variable pour le dernier développement, je vais l'appeler un cercle de barre de progression. Ensuite, sélectionnez-le à l'aide de la méthode QuerySelector. Et spécifiez également ici le nom de la classe, la barre de progression, le cercle. Très bien, ensuite, je vais créer une nouvelle fonction qui sera appelée lors du défilement Appelons-la barre de progression f n. Ainsi, comme vous le savez, une rotation complète est égale à 360 degrés. Nous devons convertir cette partie de la hauteur de la foule en degrés. Avant cela, nous devons définir quelques variables différentes. Le premier sera la hauteur de la fenêtre d'affichage de la page. Ce sera égal à la hauteur des points de votre fenêtre. La prochaine sera la hauteur totale de la page. Créons donc une nouvelle variable, appelons-la hauteur de page. Pour obtenir toute la hauteur de la page, nous avons besoin de documents, de points, d'éléments de document. Ensuite, nous devrons utiliser la propriété appelée hauteur de défilement. Et la dernière variable sera cette partie explorée de la page Il doit être égal au décalage de la page Y du point de la fenêtre. Très bien, maintenant tout est prêt pour convertir la hauteur de cette partie appelée en degrés. Créons une nouvelle variable. Je vais l'appeler degré de portion défilée. Nous devons maintenant utiliser la formule. Nous devons nous diviser. C'est ce qu'on appelle la portion, la différence entre les hauteurs de page et la hauteur du port d'affichage des pages. Et nous devons multiplier le résultat par 360. Nous avons donc besoin de ce qu'on appelle portion. Puis la division. Ensuite, nous avons besoin de la hauteur de la page moins la hauteur de la fenêtre d'affichage. Nous devons le multiplier par 360. OK, voyons dans la console ou si cette variable nous donne, arrêtons ici le degré de la portion défilée En fait, nous devons appeler la fonction lors du défilement. Nous avons déjà utilisé l'événement de défilement avec la navigation Appelons donc la fonction ici. Inspectons la page et passons à l'onglet console. Ainsi, une fois que nous aurons fait défiler la page vers le bas et que nous serons arrivés à la fin de celle-ci, nous obtiendrons les valeurs correctes de 0 à 360 Très bien, alors maintenant, l'utilisation cette variable va faire pivoter les demi-cercles Nous devons donc les parcourir et faire pivoter chaque demi-cercle. Et puis le premier et le deuxième développement dans la barre de progression. Nous avons donc besoin d'un demi-cercle, points pour chaque passe ici, la fonction de rappel avec un paramètre EL, qui représente les éléments Nous devons maintenant faire pivoter les éléments. Faisons donc une pause ici. Transformation de points de style d'élément. Elle doit être égale à la rotation et doit vous transmettre les variables appelées degré de portion , suivies de degrés. Alors maintenant, si nous faisons défiler la page vers le bas, la barre de défilement commencera à apparaître. Une fois que nous en avons atteint la moitié, nous devons arrêter le premier demi-cercle. Et nous devons également masquer les éléments de la troisième division , puis le demi-cercle en haut Nous devons donc utiliser une instruction if dans laquelle nous devons définir ce on appelle un degré de portion supérieur ou égal à 180. Donc, si cette condition est vraie, nous devons donner au premier demi-cercle la valeur fixe égale à 180 degrés. Nous avons donc besoin de vous en demi-cercles. Puis le numéro d'index zéro, puis le style dot transform. Et nous devrons faire en sorte que la valeur de la fonction de rotation soit de 180 degrés. Et nous devons également cacher le haut du demi-cercle. Insérons donc l'opacité du point de style point supérieur de votre demi-cercle égale à zéro Alors maintenant, une fois que nous faisons défiler la page vers le bas, toute la barre de progression sera remplie. Mais nous avons ici un petit problème. Une fois que nous faisons défiler la page vers le haut, le degré de la partie devient inférieur à 180 Nous devons afficher le demi-cercle en haut. Nous devons donc créer l'instruction else. Ensuite, prenons cette ligne de code, collez-la ici, et changeons la valeur d'opacité pour en faire une Alors maintenant, comme vous pouvez le constater, tout fonctionne bien. Nous devons faire encore quelques choses avec la barre de progression. Et pour cela, passons à la conférence suivante. 20. Barre de progression de conception - Partie 2: Très bien, dans la dernière vidéo, nous avons commencé à travailler sur la barre de progression. Une fois que nous faisons défiler la page le bas, la ligne rouge apparaîtra sur le cercle. Et maintenant, je vais ajouter un événement de clic à la barre de progression. Jetons un coup d'œil au projet terminé. Ainsi, une fois que nous aurons cliqué sur la barre de progression, nous ferons défiler la page, section par section. Et une fois que nous descendons jusqu'au bas de la page, la flèche pivote. Au clic suivant, nous naviguerons vers le haut de la page. De plus, si je descends puis que je commence à faire défiler la page vers le haut, la flèche tournera à nouveau. Et si nous cliquons sur la barre de progression, nous naviguerons vers le bas de la page. Hein ? C'est donc ce que nous allons faire dans cette conférence. Nous avons déjà créé une fonction pour la barre de progression. Allons-y et commençons à écrire le code. La première chose à faire est d'associer un gestionnaire d' événements de clic à la barre de progression Dans ce cas, nous allons utiliser le gestionnaire d'événements onclick car il n'associera l'événement de clic qu' une seule fois aux éléments Instituons de nouveaux commentaires. Barre de progression, cliquez, puis cliquez sur la barre de progression. Sélectionnez ensuite une barre de progression. Je vais créer une nouvelle variable. Ensuite, sélectionnez les éléments à l' aide de la méthode de sélection de requêtes. Ensuite, nous devons attacher le gestionnaire d'événements onclick à la barre de progression La première chose à faire est donc d'empêcher action par défaut une fois que nous avons cliqué sur la barre de progression. Je vais donc passer ici un objet événementiel. Ensuite, nous devons utiliser la méthode de prévention par défaut. Ensuite, nous devons sélectionner tous les éléments de cette section. Allons-y et créons une nouvelle variable, appelons-la sections. Ensuite, sélectionnez tous les éléments de la section à l'aide de la méthode all du sélecteur de requête Je vais spécifier ici la section du nom du tag. Ensuite, nous devons définir les positions des éléments de cette section et les stocker dans le tableau. Je vais donc créer une nouvelle variable. Appelons cela des positions de section. Dans les positions de ces sections, je veux dire, où se trouvent les sections qui commencent à partir de la page entière et non dans la fenêtre d'affichage Pour obtenir cette position, nous avons besoin de la somme de la partie défilée et la distance entre le bord supérieur de la fenêtre d'affichage et la position supérieure de cette Comme nous l'avons dit, nous devons stocker ces valeurs dans le tableau. Et pour cela, je vais utiliser l'une des méthodes d'aide au tableau appelée map Cela nous permet d'exécuter la fonction pour chaque élément du tableau et de stocker les valeurs dans le tableau. Pour utiliser la méthode cartographique, nous devons transformer la liste des nœuds en un tableau. Sinon, ça ne marchera pas. Donc, pour transformer la liste des nœuds en un tableau, nous devons utiliser la méthode array from, et nous devons transmettre ici des sections. Ensuite, nous avons besoin d'une méthode appelée map, qui prend un paramètre. C'est la fonction de rappel, qui prend elle-même un argument, l'élément actuel du tableau Pour obtenir la position de cette section, nous devons effectuer le calcul suivant. Dans un premier temps, nous devons utiliser le mot clé return. Nous avons maintenant besoin de la somme de la partie carrée et de la distance entre le bord supérieur de la fenêtre d' affichage et la position supérieure de cette action Ainsi, lorsqu'on l'appelle portion plus section point, get bounding client rect Ici. Propriété nommée Top. En fait, la syntaxe ES6 nous permet d'écrire ce code de manière plus concise Nous pouvons nous débarrasser des bretelles frisées. Et nous pouvons également supprimer le mot clé return. OK, allons-y, exécutons cette variable sur la console et voyons ce qu'elle nous donne. Inspectons la page et passons à l'onglet console. Si je clique sur la barre de progression, rien ne se passera. Mais si je fais défiler la page vers le bas puis que je clique sur les éléments, nous obtiendrons un tableau de cinq éléments. Chacune d'elles représente la position de cette section sur la page. Ce sont les pixels. Cela ne fonctionnait donc pas tant que nous ne faisions pas défiler la page car la fonction n'est appelée que lorsque l'événement de défilement se produit. Par conséquent, nous devons l'appeler une fois plus en dehors des événements de défilement. Maintenant, si je clique, nous obtiendrons le résultat dans la console . D'accord, nous devons utiliser ces positions pour faire défiler section par section Onclick Dans un premier temps, je vais utiliser ces valeurs manuellement pour voir comment cela fonctionne. Ensuite, nous dynamiserons ce processus. Pour faire défiler la page vers le bas, je vais également utiliser l'une des méthodes appelées défilement. Et nous devons associer cette méthode à l'objet de la fenêtre. Cette méthode utilise deux arguments. Ce seront les coordonnées. Le premier est également le pixel situé le long de l'axe horizontal des éléments. Le second est le pixel le long de l'axe vertical des éléments. Dans notre cas, le premier argument doit être égal à zéro car nous allons défiler verticalement et horizontalement. Comme deuxième argument, je vais transmettre l'une des valeurs du tableau, disons la troisième. Donc, si je clique sur la barre de progression, nous passerons à la troisième section. OK, donc comme nous l'avons dit, dans ce cas, nous spécifions la position manuellement et nous devons la définir dynamiquement. Pour cela, je vais utiliser une méthode d'aide au tableau appelée find Cette méthode renvoie la valeur du premier élément du tableau qui satisfait la condition Créons une nouvelle variable. Je vais l'appeler position. Ensuite, nous devons attacher une méthode fine aux positions des sections. Ça prend. L'un des paramètres est la fonction de rappel. Et nous avons également besoin ici d' un autre paramètre, la position de la section, puis à nouveau du retour du mot-clé. Nous devons maintenant définir la condition que nous devons connaître, qui est en train de devenir une section. Pour faire défiler la page et y accéder . Pour obtenir ces informations, nous devons comparer la position de cette section à celle de cette partie appelée. Nous avons donc besoin que la position de la section soit supérieure à la partie griffonnée Une fois que cette condition est vraie , l'instruction cessera de s' exécuter et nous obtiendrons la position de la section suivante. Donc, au lieu de cette valeur ici, je vais passer la position. Et en plus de cela, voyons dans la console ce que cette variable nous donne. Donc, si je clique sur la barre de progression, nous ferons défiler la page section par section. Vous pouvez également voir clairement ici comment la position évolue. Une fois que nous aurons atteint le bas de la page et cliqué à nouveau, nous naviguerons vers le haut de la page, mais la position deviendra indéfinie Cela s'est produit parce qu'aucun autre cas n'a été découvert où la maladie serait vraie. En fait, c'est ce dont nous avons besoin. Nous devons faire défiler la page OnClick vers le haut. Mais ce serait bizarre de laisser les choses comme ça. Et ce sera difficile à comprendre pour les autres développeurs, je pense qu'il serait préférable d'écrire une condition. Allons-y et créons une variable dans laquelle je vais définir si nous atteignons le bas de la page ou non. Je vais donc appeler les variables Bu. Et elle doit être égale à la partie de défilement plus la hauteur de la fenêtre d'affichage de la page égale à la hauteur de la page Donc si cette variable est vraie, cela signifie que nous avons atteint le bas de la page. Nous devons donc accéder au haut de la page en cliquant. Je vais créer une déclaration conditionnelle à l'aide d'un opérateur ternaire Nous avons besoin de Scroll Bull. Donc, si c'est vrai, nous devons accéder au haut de la page. Par conséquent, nous avons également besoin du défilement par points de Windows, avec les arguments zéro aux deux endroits. Et si cette condition est fausse, nous avons besoin de cette expression ici. Très bien, donc tout fonctionne bien. Ensuite, nous devons changer la direction de la flèche. Une fois que nous avons atteint le bas de la page , nous devons la faire pivoter. Pour cela, je vais utiliser l'instruction if else. En fait, cela interfère avec les nouveaux commentaires, la rotation des flèches et la rotation hors flèche. Nous devons donc vérifier la même valeur booléenne. Je veux dire scrolby. Si c'est vrai, nous devons faire pivoter la flèche. Écrivons ici barre de progression, cercle, transformation par points de style point. Il doit être égal à une rotation de 180 degrés. Et si c'est faux, alors nous avons besoin de l'instruction else. Reprenons cette ligne de code et changeons la valeur de la fonction de rotation dont nous avons besoin ici à zéro. Enfin, utilisons la transition avec les valeurs transformées de 0,5 s. Donc, si j'atteins le bas de la page, la flèche tournera. Si je commence à faire défiler l'écran vers le haut, il pivotera à nouveau. Très bien, donc tout fonctionne parfaitement jusqu'à présent. Et maintenant, nous devons faire en sorte que la barre de progression fonctionne une fois que nous avons ouvert les projets. Pour cela, passons à la conférence suivante. 21. Barre de progression de conception - Partie 3: Très bien, lors de la dernière conférence nous avons ajouté un événement de clic à la barre de progression. Nous pouvons faire défiler la page section par section. Une fois que nous avons cliqué sur la barre de progression, elle fonctionne parfaitement sur la page, mais nous devons la faire fonctionner une fois que nous avons cliqué sur le projet et agrandi l'image. Avant de nous occuper de cela, nous avons ici un petit problème. Une fois que nous avons ouvert le projet, nous devons masquer l'icône du menu. Je vais corriger cela en utilisant la propriété z-index. Attribuons à la propriété z-index de l'enveloppe d'images du projet une valeur de Donc, pour l'instant, la navigation si vous ne l'avez pas fait, mais comme vous pouvez le voir, le bouton de fermeture s'est retrouvé derrière le projet. Pour résoudre ce problème, je vais augmenter la valeur de la propriété z-index pour le bouton Masquer du projet Portons-en à 200. Très bien, maintenant tout va bien et nous pouvons continuer à travailler sur la barre de progression. Comme nous le savons, une fois que nous cliquons sur le projet, nous créons une grande image et son enveloppe Nous devons donc vérifier si le wrapper d'image est créé ou non Ensuite, nous devons faire en sorte que la barre de progression fonctionne en conséquence. Nous devons insérer ici un nouveau paramètre. Disons que c'est un grand rappeur IMG. Par défaut, je vais le définir comme faux. Dans ce cas, nous disons que nous travaillons sur la page car l' élément n'existe pas. Nous devons donc créer une instruction if else dans laquelle nous devons définir si le wrapper d'image existe ou non Passons donc à un gros emballage IMG. Donc si cette condition est vraie, cela signifie que le projet est ouvert et que nous devons insérer ici le code qui fonctionnera dans ce cas. Mais je préfère insérer ici le code de la page. Nous pouvons donc simplement ajouter ici un opérateur NOT. Nous devons maintenant vous insérer ces deux lignes. En fait, je vais déclarer ces variables en dehors de l'instruction if. Utilisons le mot clé let. Je vais rendre les deux variables égales à zéro. Comme vous pouvez le constater, la barre de progression fonctionne correctement sur la page. Nous devons maintenant créer une instruction else dans laquelle nous devons définir le code du wrapper d'image En fait, nous pouvons saisir ces deux lignes. La hauteur de la page sera la hauteur d'une grande image. Nous avons donc besoin d'une grande image rappeur point, premier élément enfant, car l'image est l' enfant de l'emballage Pour cette foule, il va y avoir beaucoup de monde, AMG, rappeur point scroll top Cette propriété nous indique le nombre de pixels sur lesquels le contenu d'un élément est griffonné verticalement Très bien, nous devons maintenant appeler une fonction. Une fois que nous avons cliqué sur le projet, nous avons besoin de la barre de progression f n. Et nous devons passer ici l'argument big IMG wrapper Comme vous pouvez le constater, la barre de progression est mise à jour. Mais une fois que nous avons fait défiler le projet vers le bas, cela ne fonctionnera pas car nous devons également appeler la fonction lors de cet appel. Nous avons donc besoin d'un gros wrapper IMG, gestionnaire d'événements Dots on Scroll Ensuite, nous devons appeler la fonction. Alors maintenant, comme vous pouvez le voir, cela fonctionne bien. Mais nous avons ici un petit problème. Une fois qu'elle a été appelée vers le bas de l'image la flèche ne pivote pas. Vérifions dans la console si la condition de l' instruction if else est vraie ou fausse Je vais parcourir la console, faire défiler Bu. Ainsi, si nous faisons défiler la page vers le bas et atteignons la fin de l'imagerie, la valeur moins chère que la valeur booléenne redeviendra fausse, qui signifie que cette expression n'est pas égale à la hauteur de la page Vérifions-les également dans la console. Je vais exécuter la partie de défilement plus la hauteur de la fenêtre d'affichage de la page et également la hauteur de la page Donc, si nous faisons défiler la page vers le bas, nous obtiendrons une différence de deux pixels entre ces valeurs. C'est un peu bizarre en fait. Mais la raison en est que l'image est un élément intégré. Et dans ce cas, nous devons le bloquer. Très bien, maintenant tout fonctionne bien. Ensuite, nous devons faire fonctionner la barre de progression une fois que nous avons cliqué dessus, car pour le moment, elle fonctionne toujours selon la page. Nous avons besoin de ces instructions similaires, sinon avec le gestionnaire d'événements OnClick Passons ici à la condition de rappeur de grande envergure. De plus, je vais récupérer l'intégralité de ce code et le coller dans l'instruction if. Après cela, nous avons besoin de l instructions dans lesquelles nous devons vérifier, à nouveau, faire défiler le booléen Donc si c'est vrai, alors nous avons aussi besoin d'un gros rouleau vide pour rappeur. Avec des zéros, cela signifie que l'image doit être déplacée vers le haut. Et si cette condition est fausse, nous devons faire défiler la page vers le bas. Nous avons donc besoin d'un gros point IMG rapper, faites défiler jusqu'à. Le premier argument va être zéro. En ce qui concerne le deuxième argument, nous devons choisir l' enveloppe Angie, les points, la hauteur de défilement Alors maintenant, si nous cliquons sur la barre de progression, l'image défilera vers le bas, mais sans aucun effet fluide. Pour résoudre ce problème, nous devons attribuer à la propriété de l'enveloppe d'image appelée comportement de défilement dévaluerait smooth Comme vous pouvez le constater, tout fonctionne parfaitement et nous en avons presque terminé avec la barre de progression. La seule chose que nous devons faire est de mettre à jour la barre de défilement. Une fois que nous aurons clôturé le projet. En fait, nous devons appeler la fonction lorsque nous cliquons sur le bouton. Arrêtons-nous donc ici sur la barre de progression f n. Très bien, alors maintenant tout fonctionne correctement Et en fait, avec la barre de progression, c'est terminé. Rendez-vous lors de la prochaine conférence. 22. Refactorisation de code: Très bien, donc lors des conférences précédentes, nous avons réussi à travailler sur la barre de progression de la page De plus, lorsque nous ouvrirons le projet, avant de passer à autre chose et de commencer à travailler sur la prochaine étape, je vais refactoriser notre code-barres de progression actuel et le rendre plus clair. Avant cela, je voudrais régler un petit problème. Une fois que nous avons cliqué sur l'un des projets et que nous l'avons développé. Et puis si nous inspectons la page, la barre de progression ne fonctionnera pas correctement. Il continuera à fonctionner conformément à la page. Le problème apparaît une fois que nous avons redimensionné la fenêtre. Cela se produit parce que, pour une raison quelconque , l'événement de défilement est déclenché. Pour le prouver, lançons quelque chose sur la console. Comme vous pouvez le voir, nous avons ici un défilement, ce qui signifie que l'événement de défilement se produit. Donc, pour résoudre ce problème, nous devons récupérer le code de la fonction dans cet événement d'appel. Déclarez ensuite une nouvelle fonction à l'extérieur. Je vais l'appeler scroll f n et coller le code dans cette fonction. Après cela, nous devons appeler cette fonction avec un événement de défilement. Donc, pour l'instant, rien n'a changé ici. Tout fonctionne de la même façon. Mais maintenant, en utilisant cette fonction, nous pouvons supprimer les événements de défilement et nous devons le faire une fois que nous avons cliqué sur l'un des projets. Nous avons donc besoin ici du document, point remove event listener. Ensuite, nous devons spécifier l'événement de défilement. Et nous devons également passer ici la fonction que nous avons créée, scroll f n. Maintenant, lorsque nous ouvrirons le projet, la barre de progression fonctionnera correctement. Nous n'aurons aucun problème une fois que nous aurons redimensionné la fenêtre. Mais si nous fermons le projet, la barre de progression ne fonctionnera plus. Pour résoudre ce problème, nous devons associer l'événement de défilement au document lorsque nous fermons le projet. Nous avons donc besoin ici de document.write dans l'écouteur d'événements. Puis faites défiler l'événement. Et la fonction s'appelle f n. Alors maintenant, si nous vérifions, vous verrez que tout fonctionne correctement. Nous pouvons maintenant commencer à refactoriser notre code. ce moment, nous avons une grande fonction dans laquelle nous mettons tout ce qui concerne la barre de progression. Donc, la première chose que je vais faire est de récupérer un gestionnaire d' événements onclick, mettre hors de la fonction Ensuite, je vais déclarer quelques variables en dehors de la fonction. J'aime les variables communes à la fonction et au gestionnaire d'événements onclick Nous allons donc placer la partie de défilement en dehors de la fonction. Nous devons également déclarer la variable scroll bull. Mettons-le sur false. Ensuite, nous devons supprimer le mot clé const à partir d'ici. Et en plus de cela, nous devons déclarer une autre variable, l'image wrapper Et nous devons le définir sur false. D'accord ? Comme vous pouvez le voir, nous avons ici un paramètre big IMG wrapper égal à false par défaut Je vais m'en débarrasser. Et au lieu de cela, nous avons besoin que le wrapper d'image soit égal au gros wrapper IMG Et maintenant, nous devons transformer partout Big Andrew Wrapper en Image Rapper Enfin, nous pouvons changer le gestionnaire d'événements onclick en listener d'événements de clic Nous devons donc ajouter un écouteur d'événements. Je n'ai pas besoin de me débarrasser de ce signe égal. Très bien, alors maintenant si nous vérifions, tout fonctionnera parfaitement Mais maintenant, nous avons un code beaucoup plus propre que le précédent. Bien, passons à la prochaine conférence. 23. Éléments collants: Très bien, une fois que nous en avons terminé avec la barre de progression, nous devons maintenant passer à autre chose et commencer à travailler sur la prochaine fonctionnalité de notre projet, que j'appelle un élément permanent Jetons un coup d'œil au projet terminé. Si je survole l' icône du menu ou la barre de progression, ces éléments resteront collés au curseur Mais une fois que nous éloignons le curseur de la position par défaut de l'élément, les éléments retrouveront leur propre position. Je trouve que c'est un effet sympa et cool. Alors allons-y et commençons. Cet effet doit se produire lors des événements de déplacement de la souris. Dans un premier temps, le code va être écrit ici, puis nous allons créer une fonction, que nous appellerons ici. Insérons de nouveaux commentaires. Éléments collants. D'éléments collants. Nous devons créer un effet. Une fois que nous avons survolé l' icône du menu et la barre de progression, je vais attribuer les deux éléments, des classes supplémentaires Collant. Ensuite, nous devons découvrir quel élément nous survolons Pour cela, nous pouvons utiliser l'une des fonctions intégrées appelées éléments à partir de points. Je vais créer une nouvelle variable. Appelons cela des éléments survolés par le pointeur de la souris sur E L. Cela doit être égal aux points du document à partir de points Cette fonction prendra deux arguments, x et y. Voyons dans la console ce que cette variable nous donne. Exécutons les éléments survolés. Donc, si je passe la souris sur l'un des éléments de la page, nous les retrouverons dans la console Hein ? Nous devons maintenant vérifier si un élément de Harvard contient le cluster Tiki ou non Nous devons donc utiliser une instruction if dans laquelle nous avons besoin de la condition suivante. Éléments survolés, points, liste de classes, contenu de points. Et nous devons spécifier ici la classe sticky. Passons également à la console. Collant. Maintenant, si je passe la souris sur l'icône du menu, nous resterons bloqués dans la console Mais si je passe la souris sur la barre de progression, nous ne resterons pas bloqués dans la console Cela se produit parce que le cercle de la barre de progression recouvre la barre de progression elle-même. Et nous ne pouvons pas survoler la barre de progression. Pour résoudre ce problème, nous pouvons désactiver les événements du pointeur pour le cercle de la barre de progression. Réglons les événements du pointeur sur num. Au fait, supprimons ce code commenté d'ici. Alors maintenant, si je passe la souris sur la barre de progression, nous resterons dans la constante Très bien, donc tout fonctionne bien jusqu'à présent, la prochaine chose que nous devons faire est stocker les positions des éléments dans le tableau Je vais donc créer une nouvelle variable en dehors des événements de déplacement de la souris. Appelons-la position de l' élément survolé et définissons-la sur un tableau vide Encore une fois, nous allons stocker ici la position des éléments. Je suis dans les coordonnées supérieure et gauche en utilisant les propriétés offset top et offset left. Tout d'abord, nous devons vérifier si le tableau est vide ou non. S'il est vide, nous devons mémoriser les positions. Je vais utiliser. S'il s'agit de déclarations dans lesquelles je vais vérifier si le tableau est vide ou non. Nous devons donc comparer la longueur du point de position de l'élément Harvard à un. Si cette condition est vraie, cela signifie qu'un tableau ne contient aucun élément et que nous devons stocker les positions dans le tableau. Nous avons donc besoin que la position de l'élément survolé soit égale à un tableau contenant les éléments suivants Nous avons besoin d'un élément de décor survolé , puis d' éléments de décor de Harvard Très bien, allons-y et testons si cela fonctionne bien. Et une fois que vous avez couru vers la console, cependant, position de l'élément. Donc, si je passe la souris sur l'icône du menu, nous obtiendrons ses positions dans le tableau Maintenant, si nous survolons la barre de progression, nous retrouverons les positions de l'icône du menu Comme la condition de l'instruction if est fausse elle ne met pas à jour les positions dans le tableau. Si je recharge la page, le tableau deviendra vide. Et si je passe la souris sur la barre de progression, nous verrons ici les positions de la barre de progression Très bien, nous devons maintenant modifier les positions supérieure et gauche des éléments survolés. Nous avons donc besoin ici d'éléments Harvard, style à points, de texte CSS à points. Ensuite, je vais ouvrir les tiques arrières. La position supérieure sera y. Avec pixels. Pour ce qui est de la position de gauche, ça va être x. D'accord ? Alors maintenant, si je passe la souris sur les éléments, il se déplacera, mais pas tout à fait correctement. Ce n'est pas collant. Pour résoudre ce problème, nous devons déplacer les éléments -50 % vers le haut et vers la gauche Pour cela, je vais utiliser Transform Translate avec -50 % deux fois Maintenant, les positions de l'icône du menu sont modifiées Nous devons donc ajuster les positions supérieure et droite. En fait, nous avons déplacé les éléments de 50 %. Cela signifie donc que nous devons réduire les positions de 50 % de la largeur et de la hauteur. La première position sera de 3,5 RAM. Quant à la bonne position, elle sera nulle. Maintenant, comme vous pouvez le constater, l'élément est correctement positionné et, une fois que nous le survolons, il devient collant heure actuelle, il se déplace sur toute la page, mais nous corrigerons ce problème bientôt. Faisons de même pour la barre de progression. Nous devons transformer, traduire deux fois avec les valeurs -50 % Et nous devons également changer les positions inférieure et droite. Nous avons besoin de la mémoire vive complète pour les deux propriétés. Maintenant, si je passe la souris sur la barre de progression, elle ne fonctionnera toujours pas correctement. Il semble que du côté gauche, le monde entier ne se produise pas. La raison en est que nous devons désactiver les événements de pointeur pour les demi-cercles. Utilisons donc les événements de type pointeur. Aucune. Très bien, maintenant tout va bien. Ensuite, nous avons défini jusqu'où nous voulons que l'élément se déplace. Ce sera 100 pixels sur les quatre côtés. Nous devons donc créer une instruction if dans laquelle nous devons définir les positions. Comme vous le savez, nous stockons les positions par défaut dans le tableau. Le premier élément du tableau est la position des éléments survolés. Je veux dire haut décalé. Nous devons donc ajouter et soustraire 100 pixels à la disposition. Et il faut le comparer à la première place de l'élément Harvard. Allons-y et créons une instruction if dans laquelle nous avons besoin de la condition suivante. Lorsque vous pointez des éléments, le décalage des points vers le haut est inférieur à la position de l'élément survolé avec le pointeur de la souris, le premier élément étant de -100 Donc, si cette condition est vraie, nous devons remettre l'élément à sa position par défaut. Nous avons donc besoin d'éléments survolés. Style par points, texte CSS à points égal à une chaîne vide. Et nous devons également vider le tableau. Position survolée. Il doit être égal à un crochet vide. Alors maintenant, si je commence à déplacer les éléments vers le haut après 100 pixels, reviendront à leur position par défaut. Très bien, dans ce cas, nous faisons en sorte que l'effet ne fonctionne que dans un seul sens Nous avons besoin des quatre directions. Utilisons ici l'opérateur logique OR. Ensuite, je vais copier cette condition. Nous devons maintenant ajouter 100 pixels. Et nous devons également remplacer le signe inférieur par un signe supérieur à. Maintenant, l'effet fonctionne une fois que l' on déplace le curseur vers le bas. Ensuite, nous devons prendre soin des côtés gauche et droit. Utilisons à nouveau l'opérateur logique OR et collons la condition. Dans le cas des directions gauche et droite, nous devons vérifier le deuxième élément du tableau, je veux dire décalage vers la gauche. Nous devons donc modifier le numéro d'indice. Ça va en être un. Nous devons également décaler vers la gauche. L'effet fonctionne maintenant sur le côté gauche. Enfin, nous devons prendre la bonne direction. Allons-y donc et copions cette condition. Nous avons besoin d'un panneau ici plus. Et aussi le signe supérieur à. Comme vous pouvez le voir, l'élément adhésif fonctionne bien sur les quatre côtés. Nous en avons donc presque terminé avec cet effet. Nous avons juste besoin de régler un petit problème. Si je déplace, par exemple, l'icône du menu vers le haut, les éléments ne retrouveront pas leur position par défaut une fois que le curseur quitte la page . Cela se produit parce que dans ce cas la distance parcourue est inférieure à 100 pixels et que l'instruction if n' est pas exécutée. Nous devons donc attribuer aux éléments la position par défaut une fois que la souris quitte l'élément. Nous avons donc besoin d'éléments de Harvard. Points sur la feuille de la souris. Ensuite, nous devons fonctionner. Reprenons ces deux lignes et collons-les ici. Très bien, maintenant tout fonctionne parfaitement et nous avons ici un effet sympa et cool Avant de terminer cette conférence, je vais légèrement modifier le code afin de le rendre plus propre. Créons une nouvelle fonction en dehors des événements de déplacement de la souris. Je vais appeler cette fonction des éléments collants. Il faudra trois paramètres. Nous avons besoin des coordonnées x et y ainsi que de l'ensemble de l'élément. Ensuite, je vais récupérer l' intégralité de la déclaration if à partir d'ici. Collons-le dans la fonction. En fait, je vais modifier cette déclaration if ici. Utilisons la logique et l'opérateur. Ensuite, appelons cette fonction dans les événements de déplacement de la souris avec les arguments x, y et l'élément Harvard. Comme vous pouvez le constater, tout fonctionne parfaitement. Enfin, nous avons terminé. On se voit à la prochaine conférence ? 24. Effet de transformation de cercle de souris: Très bien, il est donc temps d' ajouter une autre fonctionnalité à notre projet, ce qui, à mon avis, est un effet sympa et cool Si je survole certains éléments tels que les éléments de navigation ou les projets, ainsi que les services et les champs de saisie Ensuite, le cercle buccal prendra la forme de l'élément Harvard. Et puis une fois que la souris aura quitté les éléments, elle retrouvera sa forme par défaut, je veux dire le cercle. Très bien, alors allons-y et ajoutons ces effets des projets Je vais insérer de nouveaux commentaires dans le fichier Java juste après les éléments collants. Insérons la transformation du cercle de votre souris et celle du cercle de bouche. Puis créez une nouvelle fonction. Je vais l'appeler transformation du cercle de la souris. Il faudra un paramètre et ce sera l'élément entier. Donc, tout d'abord, je vais créer cet effet sur les projets. Et puis à la fin de la journée, nous ajouterons également cette fonctionnalité à d'autres éléments. Je vais ajouter de nouvelles classes à tous les projets comme nous l'avons fait pour les éléments collants. Allons-y donc et ajoutons une nouvelle classe aux enveloppes des images Je vais appeler ce pointeur de classe Enter. Ensuite, nous devons définir si le survol se produit sur l'élément contenant ces classes nouvellement ajoutées Nous devons donc utiliser une instruction if dans laquelle nous devons définir si l'élément survolé contient le pointeur de classe enter Nous avons donc besoin d'une liste de classes de points d'éléments survolés. Cela contient devra spécifier ici le nom de la classe, pointeur entrer. Testons si cela fonctionne correctement. Je vais lancer quelque chose sur la console. Disons le pointeur Enter. Et puis appelez cette fonction sur la souris. Déplacez des événements. Très bien, allons-y, inspectons la page et passons à l'onglet console Donc, si je passe la souris sur les projets, nous allons faire entrer un pointeur dans la console Mais si je passe la souris sur d'autres éléments, rien ne se passera Très bien, donc tout fonctionne bien jusqu'à présent. Ensuite, nous devons commencer à modifier la forme du cercle buccal. Une fois que nous avons trouvé les éléments nécessaires , nous devons utiliser le gestionnaire d'événements de déplacement de la souris Et lorsque vous déplacez la souris, nous devons changer la forme du cercle. Nous avons besoin de. Déplacez la souris avec Harvard Elements. Ensuite, nous devons définir quelques styles CSS différents pour le cercle de la souris. Nous avons donc besoin du style point circulaire de la souris, de textes CSS à points. Commençons par la largeur et la hauteur. En fait, pour obtenir la largeur des éléments de Hubbard, je vais utiliser une méthode appelée get bounding Et nous devons le rattacher aux éléments de Harvard. Ensuite, nous avons besoin ici de la propriété appelée with pixels. De la même manière, définissons la hauteur. Ensuite, je vais définir les propriétés du haut et de la gauche. Nous pouvons dupliquer cette ligne de code et modifier la hauteur vers le haut. Et puis il en va de même pour la position gauche. Donc pour l'instant, si je passe la souris sur les projets, rien ne se passera car présent, la fonction la plus circulaire fonctionne Ainsi, une fois que nous survolons les éléments sur lesquels le pointeur de classe est entré, nous devons arrêter d'exécuter le code dans la fonction de cercle Et je vais le faire en utilisant une valeur booléenne. Allons-y et créons une nouvelle variable. Je vais l'appeler une souris, un taureau cerclé. Et je vais faire en sorte que ce soit vrai. Ensuite, nous devons créer une instruction if dans la fonction mouth circle, laquelle nous devons vérifier si le booléen récupéré par la souris est vrai Donc, si cette condition est vraie, nous devons exécuter cette ligne de code. En fait, je vais utiliser ici un opérateur logique et au lieu de l'instruction if Ensuite, nous devons modifier la valeur de cette variable booléenne dans la fonction de transformation du cercle de bouche Et il faut que ce soit faux. Donc pour l'instant c'est toujours le cas, rien ne se passe car par défaut, cercle de la souris a une opacité nulle Et nous avons arrêté d'exécuter le code là où il avait une opacité Nous devons donc instituer un nouveau système d'opacité. Maintenant, le code fonctionne, mais bien sûr, ce n'est pas ce que nous voulons. Par défaut, le cercle de la souris présente une translation de transformation de -50 %. En fait, nous n'en avons pas besoin. Nous devons faire en sorte que les valeurs de la fonction de traduction soient nulles. Nous devons donc transformer, traduire et nous avons besoin de zéro dans les deux sens. La position du cercle est maintenant modifiée. Ensuite, je vais arrêter l' animation car, comme je l'ai dit, le cercle est animé. Nous avons donc besoin ici d'une animation, pas du tout. Maintenant, le cercle ne s'anime plus et il obtient également la largeur et la hauteur des éléments survolés. Ensuite, nous devons définir le rayon de la bordure. Pour cela, je vais utiliser l'une des méthodes appelées gets computed style. Nous devons spécifier ici les éléments survolés. Ensuite, nous devons utiliser la propriété appelée border-radius. Alors maintenant, si je survole le projet, cercle de la souris prendra la forme des éléments survolés. En fait, tout fonctionne correctement dans Google Chrome. Mais si je vérifie le projet dans Mozilla Firefox, vous verrez que pour raison quelconque, le rayon de la bordure ne fonctionne pas. Voyons dans la console ce que border-radius nous donne dans les deux navigateurs Je vais parcourir la console. Pour le rayon. Dans Google Chrome, nous obtenons cinq pixels. Mais dans Mozilla Firefox, nous obtenons une chaîne vide. C'est un petit problème pour Mozilla Firefox. Et la solution à laquelle j'ai pensé est de remplacer le rayon de la bordure le rayon de la bordure de n'importe quel coin. Parce que tous les éléments sur lesquels nous allons utiliser ce fait ont le même rayon de bordure sur les quatre côtés Je vais donc utiliser ici, disons bordure, bas, gauche, rayon. Allons-y et vérifions si cela fonctionne correctement pour les deux navigateurs. Comme vous pouvez le constater, tout fonctionne bien. Très bien, avant de passer à autre chose, je vais régler un problème politique Si je commence à survoler le projet depuis le bas du projet, la forme de l'os du cercle change car nous survolons actuellement l'image Par conséquent, nous devons désactiver les événements de pointeur pour les images du projet. Attribuons donc au projet des événements liés au pointeur d'image. Aucune. Très bien, maintenant tout allait bien. Je vais maintenant ajouter une transition à cet effet. Nous avons besoin ici de deux propriétés différentes. Commençons par, je vais utiliser votre durée de transition, 0,5 s. Ensuite, nous avons la hauteur par rapport aux positions supérieure et gauche. Vient ensuite la transformation. Et enfin, pour le rayon. Bon, comme vous pouvez le voir, nous avons un bien meilleur résultat. Mais nous devons encore régler certains problèmes. Une fois que la souris a quitté les éléments, nous devons rétablir la forme du cercle. Pour cela, nous devons utiliser le gestionnaire d'événements en direct de la souris. Nous devons le rattacher à l'élément Harvard. Pour que la souris vive les éléments, nous devons transformer la valeur du booléen du cercle de bouche en true Maintenant, si la souris quitte le projet, elle obtiendra la forme par défaut du bagage. Ensuite, je vais régler un autre problème. Si nous faisons défiler la page, le cercle de la souris et les éléments ne correspondront pas. Nous devons donc utiliser gestionnaire d'événements de défilement et attacher au document Une fois que nous faisons défiler la page, la position supérieure du cercle de la souris et les éléments de Harvard doivent correspondre. Mais cela devrait se produire une fois que la valeur booléenne est fausse, ce qui signifie que nous survolons l'élément dont la réponse est un pointeur de classe Nous avons donc besoin ici d'une déclaration si. Et comme condition, nous n'avons pas besoin d'un cercle de souris booléen. Donc, si cette condition est vraie, les positions supérieures du cercle et des éléments survolés doivent correspondre Nous avons donc besoin du point circulaire de la souris, du style, point supérieur égaux aux éléments de Harvard. Ne vous laissez pas dépasser. Point droit du client avec pixels en haut. Très bien, maintenant le problème est résolu. Ensuite, je vais m' occuper d'un autre problème. Si je clique sur le projet et que je l' agrandis, la forme du projet sera toujours affichée. Nous devons donc nous en débarrasser en un clic. Nous devons faire en sorte que l'opacité de la souris rappelle zéro une fois que nous cliquons sur le projet Nous devons donc insérer le style de point de votre cercle buccal, un point , une opacité égale à zéro Très bien, maintenant tout allait bien. Et la dernière chose à faire est de créer également cet effet avec d'autres éléments. Je vais utiliser à nouveau le pointeur de classe Enter. Allons-y et ajoutons-le aux éléments de navigation. Ensuite, nous devons ajouter ce verre aux services. Enfin, ajoutons la classe aux champs de saisie et au bouton d'envoi. Vérifions cet effet à l' aide des éléments de navigation. Comme vous pouvez le constater, tout fonctionne bien. Ensuite, je vais vérifier auprès des services. Comme vous pouvez le constater, nous avons ici un petit problème, en fait le même que celui que nous avions avec les projets. Les services incluent les éléments de plage et deux événements de pointeur ont été désactivés pour les plages. Attribuons-leur donc des événements de pointeur, aucun. Maintenant, le problème est résolu. En ce qui concerne les champs de saisie, tout fonctionne correctement. Ok, c'est ça. Nous avons fini de travailler sur cette fonctionnalité. Ensuite, nous devons commencer à adapter le projet à différentes tailles d'écran. Passons donc à autre chose. 25. Rendre le projet réactif - Partie 1: D'accord, nous avons donc fini de construire nos projets. Je suis dans toutes les sections qui sont créées. Et maintenant, comme nous l'avons déjà dit, nous devons adapter notre projet à différentes tailles d'écran. Le projet est construit sur un écran de très grande taille. Taille d'écran avec 1920 pixels de largeur et 1080 pixels de hauteur. Et nous devons l'adapter à une taille d'écran plus petite. Tout au long de cette partie, nous utiliserons des requêtes multimédia CSS. Avant de commencer à écrire le code, inspectons la page. Passez en mode réactif et vérifiez le projet sur différentes tailles d'écran. Comme vous pouvez le constater, il s'affiche également bien sur des écrans plus petits. Très bien. J'ai déjà préparé différents points de rupture sur lesquels nous allons apporter quelques modifications. Je ne vais donc pas perdre de temps à les trouver. En général, vous devez apporter les modifications et définir le point de rupture là où le projet en a besoin. Je pense que c'est le meilleur moyen de rendre votre projet responsable. Nous sommes donc prêts à commencer. Insérons de nouveaux commentaires dans ce fichier CSS pour qu'il soit réactif. Le premier point d'arrêt sur lequel nous allons apporter des modifications sera donc de 1 500 pixels Sur les points d'arrêt. Je vais réduire les cercles sur le palier. Allons-y et créons une requête multimédia CSS. Spécifiez ensuite une largeur maximale de 1 500 pixels. Ensuite, je vais sélectionner le cercle et définir la largeur et la hauteur, toutes deux à 15 rampes. En plus de cela, je vais également réduire ce cercle principal. Allons-y, sélectionnons-le et définissons sa largeur et sa hauteur, toutes deux à 45. Loyer. Nous devons également réduire la taille du cercle principal une fois que nous le survolons Allons-y et sélectionnons le cercle principal avec le pointeur de la souris. Et puis faites de la largeur et de la hauteur. rampe 55. De plus, je vais modifier la taille de l'image elle-même. Nous allons donc sélectionner le cercle principal, IMG, et définir la largeur et la hauteur. Les deux à 160 %. Très bien, c' est tout pour la première section. Allons-y et supprimons d'un an le texte À propos de moi Je vais réduire la taille de police du texte. Sélectionnons donc le texte About Me, suivi des éléments de span et définissons la taille de police à 11 tours. C'est tout à propos de la deuxième section. Vient ensuite la section des projets, mais nous n'avons pas besoin d'y toucher pour le moment. La prochaine chose que nous devons faire est d'augmenter l'espace entre les services et la section contact. Allons-y, sélectionnons la section 4 et définissons la marge inférieure pour la rampe de virage. Nous devons également réduire la taille de police du service Batson ainsi que les textes du service Allons-y et sélectionnons le service btn avec span. Faites en sorte que sa taille de police soit neuf rem. Sélectionnez également les textes du service et définissez sa taille de police pour appeler la RAM. Très bien, c'est tout pour ce point d'arrêt, tout semble Nous pouvons passer à autre chose et trouver le point d'arrêt suivant, qui sera de 1 350 pixels Créons une nouvelle requête multimédia CSS et définissons une largeur maximale de 1 350 pixels En ce qui concerne les points d'arrêt, je vais réduire la taille du Batson principal Sélectionnez le btn principal et réglez sa largeur et sa hauteur, toutes deux à 12,5 g. Très bien, après cela, je vais complètement masquer les cercles Sélectionnons donc le cercle et attribuons-lui. N'en afficher aucun. Très bien, comme vous pouvez le voir, les cercles sont cachés Ensuite, je vais modifier les positions de la barre de progression car, comme vous pouvez le voir, elle couvre partiellement les textes. Allons-y et sélectionnons la barre de progression. Je vais régler sa bonne position sur une RAM. Quant à la position inférieure, mettons-la à zéro. OK, la barre de progression est donc positionnée et la dernière chose que nous aurons à faire sur ce point d'arrêt est de réduire la taille de police du texte À propos de moi Parce que toutes les autres sections sont belles. Sélectionnons donc le texte À propos de moi, suivi des éléments de plage, et définissons la taille de police sur dix rampes. Très bien, c'est tout à propos de ce point d'arrêt. Passons à la suivante, qui sera de 1 150 pixels. Allons-y et créons une nouvelle requête multimédia CSS avec une largeur maximale de 1 150 pixels La première chose que je vais faire est donc de réduire la taille de police de l'élément HTML. Cela affectera la taille de tous les éléments. Allons-y et définissons la taille de police de l'élément HTML à 55 %. On peut donc voir que tous les éléments sont devenus plus petits. Et avec la ligne de code, nous obtenons un bien meilleur résultat. Ensuite, je vais masquer complètement la souris et le point de la souris, car sur les écrans plus petits nous n'avons plus de souris. Nous allons donc sélectionner les deux éléments, cercle de la souris et le point de la souris. Et qui leur est attribué n'en affiche aucun. Très bien, après cela, occupons-nous des éléments de navigation. Je vais réduire l'espace qui les sépare. Nous allons donc sélectionner le lien de la barre de navigation et lui attribuer une marge avec les valeurs zéro en haut et en bas et deux RAM sur les côtés gauche et droit OK, ensuite, diminuons la taille du cercle principal. Et je vais également réduire sa taille en survolant. Sélectionnons donc le cercle principal et définissons la largeur et la hauteur, toutes deux à quatre pour Ram. Ensuite, je vais dupliquer ce code ici, passez la souris. Et modifiez également les valeurs dont nous avons besoin ici. 45 points. OK, c'est tout à propos de la première section. Ensuite, je vais réduire la taille du texte au-dessus de moi. Sélectionnons donc ces éléments, suivis de span et définissons la taille de police sur 7,5 ronds. Très bien, comme vous pouvez le voir, le texte devient plus petit. Ça a l'air sympa. Ensuite, je vais m' occuper du projet. Je veux dire, une fois que nous l'avons agrandi, vous pouvez voir que nous avons un grand espace sur les côtés gauche et droit de l'image. Alors occupons-nous de ça. Je vais sélectionner les projets IMG. Et je vais définir le rempotage comme sept rem en haut et en bas et 11 rem sur les côtés gauche et droit En plus de cela, nous devons déplacer légèrement le bouton de fermeture vers la droite. Sélectionnez donc project hide btn et définissons la bonne position pour exécuter Très bien, donc le projet semble bon. Ensuite, je vais m'occuper de la section Services. Tout d'abord, diminuons la hauteur du bouton de service. Sélectionnez le service btn. Et j'ai dit bonjour à 12 Rem. Ensuite, je vais réduire la taille de police des éléments du span et ce service sera également taxé Sélectionnez donc le service btn, span, définissez la taille de police sur huit RAM En ce qui concerne le texte du service, je vais réduire sa taille de police à 3,5. Très bien, donc la section Services est jolie. De plus, nous n'avons pas besoin de modifier la section de contact. En ce qui concerne le diaporama des icônes des réseaux sociaux, je vais réduire l'espace en haut, je vais réduire l'espace en haut, et je vais également créer de l'espace en bas Allons-y et sélectionnons marge définie par le diaporama comme cinq rem en haut et en bas et zéro sur les côtés gauche et droit Très bien, alors c'est ça. En ce qui concerne ces points d'arrêt, tout semble bon. Nous devons donc passer à autre chose et trouver le point de rupture suivant. Et nous allons le faire lors de la prochaine conférence. 26. Rendre le projet réactif - Partie 2: Très bien, nous avons donc déjà créé quelques points de rupture différents Le dernier était de 1 150 pixels. Passons à autre chose et trouvons le point d'arrêt suivant. Le prochain sera donc de 900 pixels. Comme vous pouvez le constater, certaines de ces sections sont foirées. Allons-y et créons une nouvelle requête multimédia CSS. Spécifiez ici la largeur maximale à 900 pixels. La première chose que je vais faire est donc de changer la position de l'icône du menu. Sélectionnons-le et réglons sa bonne position sur moins quatre RAM. Ensuite, je vais personnaliser les éléments de navigation. Sélectionnez une application ou un lien. Tout d'abord, changeons la taille de la police, faisons-en 1,5 RAM. Et je vais aussi modifier l'espace entre les objets. Réglons la marge à 0,1. Courez. Très bien, ensuite, je vais déplacer le texte principal près des bords de la page Sélectionnons le premier texte et définissons la marge comme zéro en haut. Ensuite, notre rangée sur le côté droit, zéro en bas, cinq rem sur le côté gauche. Ensuite, je vais dupliquer ce code. Modifiez également le nom de classe dont nous avons besoin ici pour le texte en vedette, et modifiez également les valeurs de la propriété de marge. Nous avons besoin de 05 rem, puis à nouveau de 0,0. Très bien, c'est tout pour la première section. Ensuite, je vais déplacer légèrement les titres des sections vers la gauche. Nous allons donc sélectionner le titre de la section. Comme vous le savez, c'est un nom de classe courant. Réglons la position gauche à cinq points. Très bien, après cela, je vais m' occuper du texte ci-dessus Nous allons donc sélectionner le texte About Me, suivi de l'élément span et définir la taille de police sur 5,5 runs. Je vais également alléger un peu la police afin de rendre le texte visible sur les appareils plus petits. Réglons la couleur sur un ccc gris clair. Très bien, ensuite, je vais personnaliser cette section de services Diminons la hauteur du bouton de surface et je vais également réduire la taille de la police. Nous allons donc sélectionner le service btn et régler la hauteur sur neuf RAM. Ensuite, nous devons sélectionner le service btn span. Changeons la taille de la police, faisons-en six RAM. Et nous devons également sélectionner les textes de service. Réglons sa taille de police à trois points pour l'exécuter. Très bien, examinons donc la section Services. Ça a l'air bien. Et en fait, au point de rupture, c'est terminé. Allons-y et trouvons le suivant, qui sera de 700 pixels. Allons-y et créons une nouvelle requête multimédia CSS avec une largeur maximale de 700 pixels La première chose que je vais faire est donc de réduire la taille de police de l'élément HTML. Réglons sa taille de police à 50 %. Comme vous pouvez le constater, les éléments sont devenus plus petits. Et presque toutes les sections semblent bonnes, sauf la section contact. Nous devons réduire la largeur des champs de saisie. Sélectionnons donc la saisie du formulaire de contact et définissons la largeur à 50 ran. Très bien, c'est tout pour ce point d'arrêt Passons à autre chose et personnalisons le projet au suivant Le prochain point d'arrêt sera donc de 550 pixels. Nous allons créer une nouvelle requête multimédia CSS et spécifier la largeur maximale à 550 pixels Encore une fois, je vais réduire la taille de police de l'élément HTML. Sélectionnons-le et définissons sa taille de police à 40 %. Ensuite, je vais modifier la taille de l'image à l'intérieur du cercle principal. Nous allons donc sélectionner le cercle principal suivi de la balise IMG. Je vais régler la largeur et la hauteur, les deux à 180 %. D' accord, donc nous prêtons, ça a l'air bien Également. Il n'est pas nécessaire de modifier les deuxième et troisième sections. En ce qui concerne les services, je vais encore réduire la taille de la police. Nous allons donc sélectionner le service btn avec span. Réglez sa taille de police sur 4,5 RAM. Sélectionnez ensuite le texte du service et définissez cette taille de police sous la forme de trois rems. Je vais également modifier légèrement la couleur de la surface du texte. Faisons bip, bip, bip. Très bien, voyons à propos de la section Services. Ensuite, je vais m'occuper de la section contact. Diminons la largeur des champs de saisie. Encore une fois. Je vais sélectionner les entrées d'un formulaire de contact, puis définir la largeur. Faites-le pour courir. Très bien. La dernière chose que je vais faire en ce qui concerne le point de rupture est de réduire légèrement la taille des icônes des réseaux sociaux. Tout d'abord, je vais sélectionner un diaporama pour les rappeurs. Changeons sa largeur, faisons-en 45 RAM. Sélectionnez ensuite Image et modifiez le rembourrage. Je vais mettre le rembourrage à zéro en haut et en bas et à 1,1 marque sur les côtés gauche et droit Très bien, alors c'est ça. Avec ce point d'arrêt, nous avons terminé et il est maintenant temps de personnaliser le projet Sur le dernier point d'arrêt, qui sera de 400 pixels. Créons une nouvelle requête multimédia CSS d' une largeur maximale de 400 pixels Tout d'abord, encore une fois, je vais réduire la taille de police des éléments HTML. Réglons-le à 35 %. Ensuite, je vais modifier la position du logo. Je vais le placer un peu plus bas et aussi au centre du prêt. Nous allons donc sélectionner Logo. Tout d'abord, changeons la taille de la police, faisant 1,7 rem. Ensuite, afin de le placer un peu plus bas, je vais changer la position supérieure. Faisons-en 13 RAM. Ensuite, pour centrer les éléments horizontalement, nous devons régler la position de gauche à 50 %. Et en plus de cela, pour un centrage parfait, nous devons transformer, traduire x -50 %. Voyons donc que le logo est parfaitement centré. Ensuite, je vais également placer le bouton ou au centre Sélectionnons-le et propriété de justification du contenu au centre. heure actuelle, la barre de navigation n'est pas parfaitement centrée car par défaut, elle comporte un peu de rembourrage sur le côté droit Nous devons donc nous en débarrasser. Réglons le rembourrage à zéro. Très bien, c'est tout à propos de la navigation. Ensuite, je vais m'occuper du cercle principal et de l' image qu'il contient. Regardons le cercle principal et diminuons sa largeur. Faites-en 38 RAM. Ensuite, je vais également réduire sa largeur en survolant. Et changez avec 42 RAM. Et nous devons également sélectionner l'image. Réglons la largeur et la hauteur, toutes deux à 200 %. Le débarcadère et le reste des sections semblent donc bons. La seule chose que je vais faire est de réduire la taille de police de l'en-tête du formulaire. Parce qu'une fois que nous nous concentrons sur le sujet ou le message, la mise en page est un peu foirée. Allons-y et changeons la taille de la police. Sélectionnez dans le titre. Réglez la taille de police sur cinq rampes. Très bien, enfin, nous avons terminé. Notre projet est réactif. Si nous vérifions, vous verrez que le projet s'affiche bien sur différentes tailles d'écran. Est venu. La prochaine chose que nous devons faire est de valider les champs de saisie. Parce qu'après cela, nous allons héberger le projet et le mettre en ligne. Alors passons à autre chose. 27. Validation de formes: Bien, une fois que nous avons adapté nos projets à différentes tailles d'écran, il est maintenant temps de passer à la partie suivante et d'ajouter à notre projet d'autres fonctionnalités Je vais valider notre formulaire car nous allons finalement héberger le projet et le rendre plus léger. Jetons un coup d'œil au projet terminé. Les quatre champs de saisie, y compris la zone de texte, sont donc validés. Si je les laisse vides et que je clique sur le bouton d'envoi, nous recevrons des messages d'erreur. En fait, le formulaire est validé de différentes manières. Nous recevons des messages d'erreur si nous laissons les champs de saisie vides. De même, si nous ne protégeons pas les exigences de longueur. Par exemple, si je saisis un seul caractère dans le premier champ de saisie, nous recevrons un message d'erreur différent. De plus, si nous oublions le signe d'ajout dans le champ e-mail , nous recevrons également un message d'erreur différent indiquant que l'e-mail n'est pas valide. Allons-y et commençons à travailler sur la validation du formulaire. Tout d'abord, nous devons faire plusieurs choses dans le fichier HTML. Je vais attribuer les attributs IgA à tous les champs de saisie du formulaire. Le premier sera le nom. Copions-le et collez-le pour l'e-mail. Ensuite, nous aurons le sujet et le message. Très bien, ensuite, je vais ajouter un paragraphe après chaque champ de saisie Ces éléments seront utilisés pour afficher le message d'erreur. Ouvrons donc la balise P avec le message de classe. Avec le message d'erreur de contenu. Très bien, c'est tout pour le HTML pour le moment, avant de commencer à écrire du JavaScript, je vais styliser le paragraphe en tant que partie de la section contact, donc je vais insérer le code dans la cinquième section Créons un nouveau formulaire de validation des commentaires. Et de validation des formulaires. Sélectionnez ensuite Paragraphe. Tout d'abord, je vais définir la taille de la police. Concentrons-nous sur la RAM. Ensuite, je vais rendre la police plus audacieuse. Réglons l'épaisseur de la police à 700. Changez également la couleur. Je vais utiliser votre couleur F phi phi e, phi e. Nous avons donc ici le message d'erreur. Je vais le mettre en majuscules, et je vais aussi le placer sur le côté gauche Mettons donc le texte transformé en majuscules. Je vais également créer un espace entre les lettres. Réglons-le sur 0,1 run. Ensuite, je vais placer le texte sur le côté gauche. Utilisons donc la marge avec les valeurs 01 marque, puis à nouveau zéro. Très bien, c'est tout à propos du CSS pour le moment. Nous pouvons maintenant commencer à écrire du JavaScript. Allons-y et insérons de nouveaux commentaires dans le fichier. Nous devons valider un formulaire. Puis fin de la validation du formulaire. Tout d'abord, je vais créer quelques variables différentes afin de variables différentes afin sélectionner tous les éléments nécessaires. Commençons par un formulaire, créons une nouvelle variable, appelons-la formulaire. Ensuite, sélectionnez les éléments de formulaire à l'aide de la méthode QuerySelector. Précisons ici le formulaire de contact pour le nom de la classe. Ensuite, je vais sélectionner le premier champ de saisie. Créons une nouvelle variable, appelons-la username. Dans ce cas, je vais sélectionner les éléments à l'aide de l'identifiant. Je veux dire, je vais utiliser la méthode appelée get element by ID. Nous devons spécifier ici le nom de l'identifiant. Dupliquons cette ligne de code trois fois. Le champ de saisie suivant sera donc réservé aux e-mails. Ensuite, nous aurons le sujet. Ensuite, le prochain sera un message. Et en plus de cela, je vais sélectionner tous les messages. Je parle des paragraphes. Créons donc une nouvelle variable, appelons-la messages, puis sélectionnons tous les paragraphes à l'aide sélecteur de requête, de la méthode all Très bien, donc toutes les variables nécessaires sont préparées. Et la prochaine chose que je vais faire est de créer une fonction qui nous permettra de vérifier si les champs de saisie sont vides ou non. Créons donc une nouvelle fonction. Je vais l'appeler vérifier les champs obligatoires. Cette fonction prendra un paramètre qui sera un tableau. Et il inclura tous les champs de saisie Pour vérifier si les champs de saisie sont vides ou non, nous devons d' abord parcourir le tableau. Et pour cela, je vais utiliser l'une des méthodes d' aide au tableau appelées for-each Il faudra un paramètre. Ce sera la fonction de rappel, qui elle-même prendra un paramètre, les champs de saisie actuels du tableau Nous devons maintenant vérifier si la valeur de l'entrée est vide ou non. Nous devons donc utiliser l'instruction if. Et comme condition, nous devons comparer la valeur du point d'entrée à la chaîne vide. En fait, la valeur des points d'entrée n' est pas tout à fait suffisante ici car si nous saisissons quelque chose dans les champs de saisie avec un espace blanc, cet espace sera reconnu comme la partie de la valeur dont nous n'avons pas besoin Donc, pour éviter ce genre de choses, je veux dire, pour ignorer les espaces, nous pouvons utiliser l'une des méthodes appelées trim Si cette condition est vraie, nous devons afficher un message d'erreur. Pour ce faire, je vais créer une nouvelle fonction. Disons que c'est une erreur. Il faudra deux paramètres. Le premier concerne les éléments d'entrée. Pour ce qui est du second, ce sera un message. Très bien, la fonction est donc créée. Nous devons maintenant accéder au paragraphe et définir ce contenu. En plus de cela, nous devons masquer le message d'erreur par défaut et nous devons l' afficher une fois que nous avons l'erreur. Passons donc au fichier CSS et à la hauteur des paragraphes par défaut. Pour cela, je vais utiliser la visibilité cachée et l'opacité nulle Ensuite, je vais définir une nouvelle classe, qui sera ensuite ajoutée au paragraphe une fois qu'ils accuseront Je vais appeler cela une erreur plutôt que nous avons besoin d'un message. Et en fait, nous n'avons pas besoin d'espace ici car nous devons ajouter ce cluster, l'élément lui-même, et non ses parents. Pour afficher le message, nous avons besoin que la visibilité soit visible. Et aussi Opacity One. En plus de cela, je vais utiliser la transition afin d'afficher le message d'erreur de manière fluide. Utilisons l'opacité avec une durée de 0,3. Très bien, nous devons maintenant ajouter cette classe au paragraphe Et nous devons également définir le contenu du texte du message. Pour accéder au paragraphe, je vais utiliser l' une des propriétés appelées frère de l' élément suivant, car le paragraphe est le frère de l'élément d'entrée Nous devons donc entrer le point suivant dans la liste des classes de points frères Et nous devons ajouter l' erreur de classe à la liste des classes. En ce qui concerne le TextContent, ce sera le message que nous utiliserons ici comme paramètre Nous avons donc besoin du point d'entrée suivant l'élément frère. Je doute que TextContent soit égal à la masse. D'accord ? La fonction du message d' erreur est donc prête. Nous pouvons l'appeler ci-dessous dans l'instruction if. Il faudra deux arguments. Le premier va être saisi. Pour ce qui est du second, ce sera le message. Ouvrons les backticks. D'abord. Je vais vous transmettre l'identifiant d'entrée. Cela nous donnera le nom du champ de saisie. Et puis le texte suivant va être, est obligatoire. OK, donc tout est prêt. Il nous suffit d'ajouter un écouteur d'événements aux éléments du formulaire et d' appeler la fonction de vérification des champs obligatoires une fois que nous avons soumis le formulaire Nous devons donc créer l'écouteur d' ajout d'événements. Le type d'événement va être soumis. Nous avons également besoin ici d'une fonction de rappel avec un objet d'événement. La première chose que je vais faire est d' empêcher l' action par défaut du formulaire. Nous avons besoin de ne pas empêcher le défaut. Ensuite, nous devons appeler la fonction vérifier les champs obligatoires. Comme vous le savez, cette fonction possède un paramètre, qui est le tableau des champs de saisie. Donc, comme argument, nous devons passer ici un tableau des champs de saisie. Je veux dire, nous devons transmettre votre nom d'utilisateur. e-mail Objet et message de l'e-mail. Très bien, alors maintenant si je laisse les champs de saisie vides et que je clique sur le bouton d'envoi, nous recevrons des messages d'erreur Mais si je remplis le champ de saisie. Et cliquez à nouveau sur le bouton d'envoi pour que le message d'erreur ne soit pas masqué. En fait, ce n'est pas ce que nous voulons. Nous devons créer une autre fonction pour réussir afin de supprimer le message d'erreur. Créons donc une nouvelle fonction, appelons-la succès. Il faudra un paramètre, ce sera l'entrée. Donc, dans cette fonction, nous devons supprimer l' erreur de classe du paragraphe. Nous devons donc accéder au paragraphe en utilisant le point de saisie. Éléments suivants : frère ou sœur. Ensuite, nous avons besoin d'une liste de classes. Et nous devons supprimer l'erreur de classe. Ensuite, nous devons appeler cette fonction une fois que le champ de saisie n'est pas vide. Nous devons donc créer une instruction else et appeler la fonction success avec l'argument saisi. D'accord ? Maintenant, si je clique sur le bouton d'envoi , nous recevrons des messages d'erreur. Et si je touche le champ de saisie et que je clique à nouveau sur le bouton d'envoi, le message d'erreur supprimera tout ce qui concerne la première partie de la validation. Nous pouvons vérifier si les champs de saisie sont vides ou non. Il est maintenant temps de passer à autre chose et de vérifier la longueur des caractères que nous saisissons dans le champ de saisie. Pour cela, je vais créer une autre fonction. Disons que c'est vérifier la longueur. Cette fonction prendra deux paramètres. Le premier sera également une entrée. Le second sera le nombre minimum de caractères. Donc, si la longueur de la valeur du champ de saisie est inférieure au nombre minimum de caractères, nous devons afficher le message d'erreur. Nous devons donc créer une instruction if dans laquelle nous devons comparer la longueur de la valeur du champ de saisie au nombre minimum de caractères. Nous devons donc saisir des points, une valeur, des points, trois points, une longueur, inférieure à min. Donc, si cette condition est vraie, nous devons afficher le message d'erreur. Par conséquent, nous devons appeler la fonction d'erreur. Comme vous le savez, il faut deux arguments. Le premier est l'entrée. Pour le second, il y a le message. Nous avons donc besoin ici de saisir l'identifiant du point que la taxe va être, doit être. Au moins. Nous devons passer ici la moyenne du deuxième paramètre. Ensuite, nous avons besoin de personnages. Si cette condition est fausse, nous devons appeler la fonction de réussite. Nous avons donc besoin d'une instruction L plutôt que de la réussite de la fonction avec l'argument saisi. Très bien, enfin, nous devons appeler la fonction de vérification de la longueur pour tous les champs de saisie sauf l'e-mail Parce que pour la validation par e-mail, nous allons créer une fonction distincte. C'est ce qu'on appelle Check length. D'abord pour le nom d'utilisateur. Le nombre minimum de caractères sera, disons, de deux. Dupliquons cette ligne de code deux fois. Le champ de saisie suivant sera le sujet. Ensuite, nous aurons un message comme nombre minimum de caractères pour le message. Je vais passer dix ans. Très bien, allons-y et vérifions si tout fonctionne bien. Je vais répondre à un seul caractère dans les premiers champs de saisie. Si je clique sur le bouton d'envoi, nous ne recevrons aucun message d'erreur. Pour le premier champ de saisie. Cela se produit parce que l' instruction else fonctionne dans la fonction de vérification du carburant requise. Nous devons donc nous en débarrasser. Maintenant, si je teste à nouveau, nous recevrons le bon message. Et en fait, il en sera de même pour le reste des champs de saisie. Très bien, maintenant, il est temps de s' occuper des entrées de courrier électronique. Comme je l'ai dit, nous allons créer une fonction distincte. Appelons-le, vérifiez votre e-mail Cette fonction ne prendra qu'un seul paramètre. Ce sera l'entrée. Pour valider l'adresse e-mail, nous devons donc utiliser des expressions régulières. En fait, je ne vais pas les écrire manuellement car ils sont composés de nombreux caractères différents. Et cela peut être assez confus. Nous pouvons simplement le rechercher sur Google. Cherchons JavaScript, reg ex pour e-mail Passons au premier lien et récupérons ces variables ici, puis collez-les dans la fonction. Changeons le nom de la variable. Je vais l'appeler reg X. Maintenant, nous devons vérifier si la valeur d'entrée du courrier électronique correspond à la valeur d'entrée du courrier électronique ces exigences. Pour cela, nous devons utiliser les instructions if, puis nous devons utiliser une méthode appelée test Attachons-le à la variable reg X. Et comme argument, nous devons à nouveau passer ici une valeur d'entrée avec la méthode de l'arbre. Donc, si c'est vrai, alors nous avons du succès. Et si c'est faux, nous avons besoin des instructions l où nous devons appeler fonction d'erreur avec des entrées et un message. L'adresse e-mail n'est pas valide. Très bien, enfin, nous devons appeler cette fonction avec l'argument email En outre, je vais modifier le type des éléments de saisie car, comme vous le savez, par défaut, le code HTML permet de valider l'e-mail. Et en fait, nous n'en avons pas besoin pour le moment. Il a donc changé de type, faites-en du texte. OK, alors maintenant si je saisis des caractères qui ne ressemblent pas à l'adresse e-mail, nous recevrons un message d'erreur indiquant que l' e-mail n'est pas valide. Mais si j'entre ici, disons john@gmail.com, nous ne recevrons aucun message d'erreur. Très bien, c'est tout pour la validation du formulaire. Avant de terminer cette conférence, je vais faire une dernière chose que vous la voyez. Une fois que nous aurons focalisé les entrées caractères saisis précédemment ne seront affichés. Pour le désactiver, nous pouvons utiliser l'un des attributs appelés saisie semi-automatique avec une valeur OK, maintenant il peut voir que tout semble parfait. Passons à autre chose. 28. Hébergement web sur Netlify: Très bien, donc lors de la conférence précédente, nous avons validé notre formulaire et la section de contenu Et maintenant, comme je l'ai dit, il est temps d' héberger notre site Web et de le mettre en ligne. Pour ce faire, nous allons utiliser l'un des services les plus populaires et les plus utilisés appelé Netlify C'est un très bon outil aujourd'hui. Vous pouvez avoir un compte gratuit avec de nombreuses fonctionnalités différentes et héberger votre site Web très facilement. Vous pouvez également avoir un compte Pro avec certaines fonctionnalités supplémentaires. La première chose que je dois faire est de m' inscrire sur le site Web. Comme vous pouvez le constater, il existe différentes manières de s'inscrire. Vous pouvez donc prendre votre temps et vous inscrire. Nous nous sommes déjà inscrits, je ne vais donc pas perdre de temps là-dessus , car le processus est simple. Donc, pour le moment, nous n'avons aucun site Web hébergé ici. Je vais le faire étape par étape avec vous. La première chose que je vais faire est donc d'ouvrir l'invite commune et de l' exécuter en tant qu'administrateur. En fait, si vous utilisez Mac, vous devez utiliser le mot-clé sudo pour exécuter les commandes en tant qu'administrateur, puis nous devons accéder aux projets Dans notre cas, le projet est placé sur le bureau. Donc, dans un premier temps, nous devons quitter ces deux dossiers. Je vais diriger City avec une barre oblique. Ensuite, nous avons besoin du chemin du dossier. Si vous ne connaissez pas la partie du dossier du projet, vous pouvez ouvrir le code des entretiens dans le terminal et il vous donnera automatiquement la partie du projet. Je vais copier le chemin. En fait, dans mon cas, tout ce qui concerne les noms ordinaux se compose d'un seul mot Mais si les noms des dossiers contiennent plusieurs mots, vous devez les placer entre guillemets. Passons au dossier du projet. Nous devons maintenant installer Netlify à l'aide du gestionnaire de packages de nœuds npm Pour cela, vous devez avoir installé Node JS. Sinon, vous ne pourrez pas utiliser npm. Pour installer NodeJS, vous devez vous rendre sur Node js.org Téléchargez ensuite l'une des versions à partir d'ici et installez-la. Une fois que vous aurez installé le fichier Node.JS, vous pourrez utiliser un gestionnaire de packages Node. Pour installer Netlify, vous devez donc exécuter la commande suivante, npm I, qui signifie install, dash g, Netlify, CLI Cela va prendre du temps. Une fois qu'il est installé, nous devons créer un fichier de configuration appelé Netlify points TO et l. Il s'agit donc d'un fichier de configuration qui spécifie comment nullify construit et déploie Dans ce fichier, nous devons spécifier le dossier Build. Ensuite, nous devons définir un répertoire qui contiendra le fichier HTML prêt à être déployé. Dans notre cas, nous n'avons pas ici de dossier séparé pour notre fichier HTML. Nous pouvons donc simplement spécifier le répertoire de la manière suivante. Nous devons publier pour qu'il soit égal à un point avec des guillemets. D'accord ? L'étape suivante consiste à initialiser Netlify Pour cela, nous devons y exécuter Netlify. Maintenant, il vous demande de créer et de déployer le site Web manuellement ou de connecter d'abord le répertoire à GitHub instant, je vais choisir de créer et de déployer ce site manuellement. Ensuite, il demande le nom de l'équipe. Vous devez utiliser la flèche supérieure et entrer. L'étape suivante est le nom du site. Vous pouvez soit le laisser vide pour un nom aléatoire et nullify le générera pour vous Ou vous pouvez utiliser un nom unique. Dans notre cas, je vais appeler le code du site et créer le site Web du portfolio. Maintenant, si nous examinons nos projets, vous trouverez ici un nouveau dossier appelé Netlify, dans lequel nous avons un fichier JSON qui inclut l' identifiant unique de notre site Web Hein ? Maintenant, si nous rechargeons la page, nous arriverons ici, notre site Web de portfolio dans la section site Ensuite, nous devons exécuter Netlify, déployer. Cela nous donnera un brouillon d'URL. Et si vous pensez que tout semble correct sur votre brouillon d'URL, vous pouvez lancer Netlify, deploy dash, dash, prod Enfin, nous allons obtenir ici l'URL du site Web. Si nous accédons à cette URL, nous verrons notre site Web en direct dans le navigateur afin que tout le monde puisse y accéder. Très bien, donc une fois le site Web en ligne, je vais maintenant faire fonctionner le formulaire Je veux dire, une fois que nous avons saisi les informations dans les champs de saisie et soumis le formulaire, nous devrions les recevoir sur notre tableau de bord Netlify Jetons un coup d'œil à la documentation des formulaires. Je vais rechercher des formulaires Netlify Nous avons donc ici la documentation Vous pouvez le consulter et apprendre à configurer les formulaires. Passons au fichier index.html. Nous devons faire encore deux ou trois choses à ce sujet. Nous devons ajouter deux attributs aux éléments du formulaire. La première sera l'action. Avec une valeur publiée, nous avons besoin de données pour amplifier la valeur vraie Ensuite, nous devons ajouter un attribut de nom à chaque élément d'entrée ainsi qu'à la zone de texte. Le premier sera le nom, mais nous avons besoin d'un e-mail. Le prochain sera sujet. Enfin, nous avons besoin d'un message. Très bien, c'est tout à propos du HTML. Ensuite, nous devons également effectuer quelques opérations dans le fichier JavaScript. heure actuelle, nous avons ici la fonction d'interdiction par défaut, qui ne nous permet pas de soumettre un formulaire. Nous devons faire en sorte que ces méthodes fonctionnent uniquement lorsque nous avons l'erreur. Pour ce faire, je vais créer une nouvelle variable. Disons que c'est non valide. Donc, pour savoir si nous avons une erreur ou non, nous devons parcourir les messages. Une fois que nous avons trouvé si le message d'erreur existe, nous devons exécuter la fonction preventDefault Tout d'abord, nous devons transporter les messages dans un tableau car il s'agit actuellement d'une liste de nœuds. Nous avons donc besoin de array point from et nous devons transmettre vos messages. Ensuite, je vais utiliser l'une des méthodes d'aide au tableau appelée find Cette méthode rompt la boucle une fois que la condition que je vais passer ici sera vraie. Nous devons donc rechercher avec une fonction de rappel, qui prendra un paramètre et ce sera le message actuel du tableau Donc, si le message contient une erreur de classe, cela signifie que nous avons un message d'erreur. Nous devons donc vérifier si la liste des classes de messages contient une erreur de classe. Donc, une fois que nous avons le message d'erreur, nous devons exécuter la fonction preventDefault Pour cela, je vais utiliser des déclarations conditionnelles. Nous n'avons pas besoin de valider, suivi de l'opérateur logique et. Et puis nous avons besoin de e dot prevent default. Très bien, enfin, nous devons nous débarrasser de la fonction préventive du pied à partir de là Nous devons également mettre à jour notre site Web avec le code récemment ajouté. Pour cela, nous devons exécuter à nouveau Netlify, déployer Dash, Dash Prod Maintenant, le site Web est mis à jour et nous devons remplir le formulaire. Cliquez maintenant sur le bouton Soumettre. Comme vous pouvez le constater, nous avons reçu ici un petit message nous indiquant que le formulaire a été envoyé. Si nous vérifions le tableau de bord, nous obtiendrons les informations que nous venons de soumettre. Donc tout fonctionne bien. Et en fait, nous avons fini de travailler sur notre projet. J'espère que c'était intéressant et utile et que vous apprendrez nouvelles choses qui vous aideront à créer votre propre site Web de portfolio personnel qui aura un aspect moderne, beau et professionnel avec de nouvelles choses qui vous aideront à créer votre propre site Web de portfolio personnel qui aura un aspect moderne, beau et professionnel avec du HTML, du CSS et du JavaScript purs. Très bien, j'espère que ce cours vous a plu. Merci d'être avec nous. Je te souhaite tout le meilleur. Au revoir.