WEBVTT 1 00:02.912 --> 00:05.620 Voyons quelles sont les autres options ici 2 00:06.240 --> 00:10.280 pour les actions que nous pouvons faire donc nous avons vu naviguer 2 3 00:11.090 --> 00:18.620 nous avons un lien ouvert, cela peut être utile si vous souhaitez simplement ouvrir un nouveau lien vers un site Web, alors allons-y 4 00:18.780 --> 00:26.140 disons que nous avons les réseaux sociaux ici, nous avons le logo Tox ici, alors peut-être que nous voulons pointer vers les taxes 5 00:26.400 --> 00:30.620 site web lorsque nous cliquons sur le logo, vous pouvez simplement aller ici 6 00:31.600 --> 00:51.220 ouvrez un nouveau lien et écrivez la bonne URL et cela ouvrira une nouvelle fenêtre dans ce cas une nouvelle fenêtre car j'ai sélectionné ouvrir un nouvel onglet ou si vous sélectionnez simplement ceci, il s'ouvrira à la place de l'onglet sur lequel vous êtes sur le site Web sur lequel vous avez entré le lien, d'accord, qu'avons-nous d'autre 7 00:52.200 --> 00:52.780 allons-y ici 8 01:11.810 --> 01:16.230 voyez ici encore le statut et celui-ci est de la gamme 1 donc jusqu'à ce que vous l'ouvriez vous obtenez 9 01:23.060 --> 01:24.780 de la page sur laquelle vous vous trouvez déjà. 10 01:24.960 --> 01:28.580 Nous avons donc ici une superposition que j'ai déjà préparée pour montrer 11 01:28.580 --> 01:33.480 vous que et cette superposition s'ouvre réellement lorsque nous cliquons sur le bouton Participer. 12 01:33.760 --> 01:35.140 Alors au lieu de 13 01:35.140 --> 01:42.880 je viens d'ouvrir une nouvelle page, je suis en train de charger comme une fenêtre contextuelle cette superposition en haut de la page que je suis 14 01:42.880 --> 01:43.040 sur. 15 01:43.160 --> 01:45.480 Je vais donc sélectionner participer, 16 01:45.900 --> 01:47.060 revenir au prototype, 17 01:47.300 --> 01:49.600 je vais déplacer ce qui est déjà là 18 01:50.272 --> 01:53.440 et pointe vers ma superposition ici. 19 01:54.360 --> 02:17.760 Alors maintenant, au clic, au lieu de naviguer, je veux ouvrir une superposition et maintenant si nous testons cela, lorsque je clique dessus, j'ouvre la superposition en haut du site Web et nous avons une petite couleur d'arrière-plan, car si nous revenons ici, je dois avoir déjà défini une couleur d'arrière-plan ici dans le passé. 20 02:17.940 --> 02:19.940 Vous pouvez décider de l'ajouter 21 02:20.160 --> 02:20.540 ou non. 22 02:20.700 --> 02:24.460 Vous pouvez demander cela lorsque nous cliquons en dehors de la superposition. 23 02:24.660 --> 02:28.020 Donc si je clique ici, la superposition se ferme automatiquement. 24 02:28.880 --> 02:39.008 Ce sont toutes de bonnes fonctions à avoir lorsqu'il s'agit d'une superposition qui s'ouvre au-dessus du site Web comme ce que nous voyons ici et comme nous pouvons le voir, je pense que la hauteur de ma page n'est pas la bonne. 25 02:39.240 --> 02:45.540 Donc c'est censé être 900, donc ici je vais aller à 900 à la place. 26 02:48.880 --> 02:49.640 Ok, c'est parfait. 27 02:50.100 --> 02:52.620 Nous avons donc maintenant notre superposition qui s'ouvre. 28 02:52.720 --> 03:01.920 En ce moment, il se positionne à la bonne position car, comme je le mentionnais, je pense que j'ai déjà prototypé cela plus tôt, mais généralement, il s'ouvre automatiquement au centre. 29 03:02.220 --> 03:06.100 Cela signifie donc que lorsque vous cliquez dessus, il s'ouvrira centré. 30 03:06.200 --> 03:09.700 Vous devez donc ajuster le positionnement à l’endroit où vous souhaitez qu’il s’ouvre. 31 03:09.860 --> 03:10.500 En haut à gauche, 32 03:10.660 --> 03:11.980 en haut au centre, en haut à droite. 33 03:12.060 --> 03:15.420 Dans mon cas, je veux qu'il s'ouvre en haut à droite. 34 03:15.580 --> 03:20.080 Chaque fois que je clique dessus, il s'ouvre simplement en haut à droite de ma page. 35 03:20.100 --> 03:20.256 Je vais donc aller en haut à gauche de l'écran. 36 03:20.560 --> 03:21.280 C'est parfait. 37 03:21.440 --> 03:24.060 Je souhaite avoir une couleur d'arrière-plan qui apparaît. 38 03:24.320 --> 03:27.000 Je peux régler l'opacité comme je le souhaite. 39 03:27.180 --> 03:32.448 Je veux pouvoir toujours voir le site Web en dessous, donc j'aime avoir de l'opacité. 40 03:32.780 --> 03:34.140 Donc c'est parfait. 41 03:34.400 --> 03:38.020 En ce moment, comme nous pouvons le voir, il s’ouvre instantanément. 42 03:38.340 --> 03:44.920 Alors peut-être qu'au lieu d'avoir la fenêtre contextuelle qui s'ouvre instantanément parce qu'elle est à droite, je veux peut-être qu'elle vienne de la droite. 43 03:45.080 --> 03:50.020 Donc pour le faire au lieu de le faire instantanément, j'ai deux options différentes. 44 03:50.100 --> 03:51.500 Ce qui m'est proposé ici. 45 03:51.660 --> 03:53.280 Je me suis dissous. 46 03:53.580 --> 03:56.380 Au lieu d'être instantané, cela va simplement s'estomper. 47 03:56.480 --> 03:57.880 Si nous le testons maintenant. 48 03:58.660 --> 04:05.840 Comme vous pouvez le voir, nous avons ce petit fondu qui est bien, mais moi, ce que je veux, c'est un emménagement. 49 04:05.960 --> 04:08.060 Donc je veux que ça vienne de la droite. 50 04:08.200 --> 04:11.020 Exactement comme l’exemple que nous avons ici. 51 04:11.260 --> 04:12.240 C'est parfait. 52 04:12.300 --> 04:14.340 On pourrait décider de le faire apparaître à gauche, 53 04:14.420 --> 04:16.020 du haut, du bas. 54 04:16.180 --> 04:19.940 Comme vous pouvez le voir, la vitesse est actuellement déjà réglée à 55 04:20.100 --> 04:22.840 la vitesse que j'ai établie plus tôt avec ma courbe, 56 04:23.060 --> 04:23.980 la facilité d'entrée et de sortie, 57 04:24.180 --> 04:26.840 600 millisecondes et la courbe que j'ai ajustée. 58 04:27.120 --> 04:32.520 C'est parce que Figma garde en mémoire le dernier réglage que vous avez effectué ici pour l'assouplissement. 59 04:32.660 --> 04:36.200 Et je pense que c'est un assez bon assouplissement que je vais simplement garder pour le moment. 60 04:36.480 --> 04:39.940 Si je le teste ici, ça a l'air bien. 61 04:40.120 --> 04:43.680 Donc si on l'ouvre maintenant, il s'ouvre depuis la droite. 62 04:43.780 --> 04:45.312 C'est donc une interaction plutôt cool. 63 04:45.980 --> 04:48.280 Voilà donc comment ouvrir une superposition. 64 04:48.500 --> 04:49.540 C'est vraiment aussi simple que ça. 65 04:50.100 --> 04:53.880 Maintenant, dans la superposition, vous avez quelques fonctions que vous pouvez également ajouter. 66 04:54.020 --> 04:59.800 Comme si nous allions ici sur notre bouton de fermeture et ajoutions une nouvelle interaction. 67 05:00.100 --> 05:02.000 Décochez un bouton de fermeture. 68 05:02.180 --> 05:04.736 Je veux fermer ma superposition. 69 05:05.020 --> 05:09.720 Nous venons d'ouvrir une superposition et je veux que lorsque je clique dessus, je ferme la superposition. 70 05:09.920 --> 05:12.180 Nous avons également une superposition d'échange. 71 05:12.380 --> 05:18.880 Cela serait utile si nous avions plus d'une superposition et que nous voulions changer le moment où nous cliquons sur un bouton. 72 05:19.020 --> 05:20.080 Pour l'instant je vais juste 73 05:20.100 --> 05:23.700 appuyez sur Fermer et disons que nous avons une deuxième superposition ici. 74 05:23.880 --> 05:29.080 Je vais donc simplement changer la couleur du texte pour que nous voyions qu'il s'agit de la deuxième superposition. 75 05:29.300 --> 05:35.480 Et je veux que lorsque je clique sur mon bouton d'envoi ici, je viens d'envoyer le formulaire. 76 05:35.740 --> 05:43.480 Alors peut-être que je veux que tout cela disparaisse et juste avoir un message de félicitations, votre message a été envoyé, message qui apparaît ici. 77 05:43.640 --> 05:47.620 Je peux donc simplement échanger la superposition lorsque je clique ici. 78 05:47.920 --> 05:50.040 Alors je vais juste pointer ici 79 05:50.100 --> 05:50.900 et décochez. 80 05:51.080 --> 05:55.104 Au lieu de naviguer, je veux échanger la superposition. 81 05:55.400 --> 06:01.400 Et encore une fois, je peux choisir si je veux emménager ou occuper des fonctions différentes. 82 06:01.620 --> 06:03.480 Dans ce cas, je veux juste me dissoudre. 83 06:03.780 --> 06:04.480 Tout ira bien. 84 06:04.700 --> 06:09.480 Et maintenant, si je regarde ça, j'ouvre ma superposition. 85 06:09.640 --> 06:12.500 Je peux le fermer en cliquant sur mon X. 86 06:12.736 --> 06:14.960 Ok, ça marche. 87 06:15.140 --> 06:20.080 Et quand je clique sur envoyer, je change ma superposition vers cette autre superposition. 88 06:20.340 --> 06:22.120 C'est donc aussi simple que cela à faire. 89 06:22.260 --> 06:23.940 Pour l'instant, c'est juste un fondu enchaîné. 90 06:24.020 --> 06:25.500 Nous avons une animation intelligente. 91 06:25.680 --> 06:29.460 Nous verrons un peu plus en détail ce qu'est Smart Animate dans quelques minutes. 92 06:29.600 --> 06:39.180 Mais dans l'ensemble, ce que fait Smart Animate, c'est qu'il comprend quelle est la différence entre les deux images et supprime tout le reste. 93 06:39.220 --> 06:40.832 Cela fait une transition tout seul. 94 06:41.160 --> 06:47.620 Alors disons que ce texte était ici sur la deuxième version et que j'ai fait l'animation intelligente. 95 06:47.840 --> 06:50.080 Ouvrons cela. 96 06:50.460 --> 06:50.880 Envoyer. 97 06:52.224 --> 06:57.100 Il s'animait entre les différentes étapes. 98 06:57.420 --> 07:06.080 Ainsi, le contenu qui a été supprimé a simplement disparu et ce texte présent sur les deux planches de travail s'est déplacé vers le bas et a changé de couleur. 99 07:06.300 --> 07:07.220 C'est plutôt cool. 100 07:07.480 --> 07:11.760 Voilà donc pour les différentes fonctions que l'on a sur les éléments. 101 07:12.000 --> 07:14.460 Nous avons donc vu le déclencheur au clic, 102 07:14.500 --> 07:14.800 traîner. 103 07:15.168 --> 07:19.400 Nous avons vu l'action qu'il est possible de faire avec les superpositions, 104 07:19.400 --> 07:20.420 la navigation, la porte aussi. 105 07:20.580 --> 07:23.700 Nous pouvons maintenant regarder les autres détails dont nous disposons. 106 07:23.900 --> 07:27.300 Outre le déclencheur et l’action, voici la destination. 107 07:27.720 --> 07:30.080 C'est ici que nous voulons pointer. 108 07:30.336 --> 07:37.840 Nous pouvons soit faire glisser pour décider de la destination, soit la sélectionner manuellement avec les différents cadres qui se trouvent sur votre conception. 109 07:38.080 --> 07:48.120 Dans notre cas, nous ne voulons pas changer la destination, mais nous pourrions décider que lorsque je clique sur ce bouton, au lieu d'échanger avec celui-ci, je souhaite changer la destination. 110 07:50.380 --> 07:56.340 allez sur la page d'accueil et cela a ouvert un autre cadre que j'ai ici qui s'appelle aussi la page d'accueil. 111 07:56.620 --> 07:57.920 Mais ce n'est pas ce que je veux. 112 07:58.120 --> 08:00.660 C'est donc l'une des autres options qui existent ici. 113 08:00.900 --> 08:04.180 Ensuite, nous avons l’animation que nous avons. 114 08:04.280 --> 08:11.960 Revenons à notre bouton principal ici et voyons les différents types d'animation parmi lesquels nous pouvons décider de choisir. 115 08:12.080 --> 08:12.880 Nous l'avons instantanément. 116 08:13.160 --> 08:14.780 Voilà ce que nous avons ici. 117 08:14.900 --> 08:17.680 Lorsque nous cliquons sur le bouton, nous passons instantanément à l’autre. 118 08:17.780 --> 08:18.460 Nous nous sommes dissous. 119 08:18.820 --> 08:19.980 C'est ce que nous venons de voir. 120 08:20.100 --> 08:24.900 Auparavant, au lieu d'être instantané, cela allait simplement s'estomper dans la nouvelle planche graphique. 121 08:25.080 --> 08:27.080 Nous avons une animation intelligente. 122 08:27.328 --> 08:34.060 Encore une fois, c'est quelque chose que nous verrons un peu plus bas car c'est un peu plus compliqué que les autres. 123 08:34.240 --> 08:36.060 Et nous avons d’autres options ici. 124 08:36.160 --> 08:44.660 Nous avons évolué un peu comme ce que nous venons de voir avec la superposition, c'est que la nouvelle page se déplacera au-dessus de la page sur laquelle nous sommes déjà. 125 08:44.860 --> 08:48.440 Cela pourrait donc être intéressant pour une transition de page. 126 08:50.540 --> 08:56.100 Nous avons toujours eu la possibilité d’aller dans la direction que nous voulions. 127 08:56.288 --> 09:03.700 Nous pouvons animer les calques correspondants et nous pouvons modifier l'assouplissement que nous venons de voir ainsi que le timing également. 128 09:04.100 --> 09:06.560 Ensuite, nous devons déménager. 129 09:06.720 --> 09:11.180 Cela va donc en quelque sorte démasquer l'autre page en dessous. 130 09:11.360 --> 09:13.100 C'est aussi un effet sympa. 131 09:13.260 --> 09:15.080 Nous avons poussé. 132 09:15.456 --> 09:19.260 Ainsi, la nouvelle page poussera simplement la page précédente lorsqu'elle arrivera. 133 09:19.420 --> 09:19.960 Ce sont 134 09:20.100 --> 09:24.540 très basique mais peut créer des animations et des effets sympas. 135 09:25.400 --> 09:27.680 Nous avons fait une glissade. 136 09:27.860 --> 09:29.520 C'est donc quelque chose que j'aime vraiment. 137 09:29.740 --> 09:36.480 C'est un peu comme l'entrée en scène, mais la planche sur laquelle vous étiez bouge également un peu et s'estompe. 138 09:36.680 --> 09:39.220 Donc, lorsque nous cliquons sur un nouveau, 139 09:39.320 --> 09:42.840 une nouvelle page, nous avons cette petite interaction sympa qui apparaît. 140 09:43.940 --> 09:47.220 Ouais, j'aime ce modèle coulissant vers l'intérieur et vers l'extérieur. 141 09:47.260 --> 09:48.540 C'est le même principe aussi. 142 09:50.200 --> 09:53.140 Mais pour l'instant, je vais simplement le laisser comme ça instantanément. 143 09:53.376 --> 10:00.460 Lorsque nous effectuons une transition de page, nous la faisons essentiellement instantanément ou en dissolution afin qu'elle soit rapide et directe. 144 10:00.600 --> 10:10.060 Peut-être que pour certaines applications, il peut parfois être utile de simplement le pousser ou si vous créez une présentation, cela peut constituer une transition intéressante entre les pages. 145 10:10.340 --> 10:14.540 Mais pour un site Web comme celui-ci, je pense que cela convient instantanément à la plupart des prototypes. 146 10:14.880 --> 10:20.080 Et oui, les autres options que nous avons consistaient simplement à réinitialiser la position de défilement que nous avions déjà. 147 10:20.570 --> 10:29.920 Voici donc les principales interactions qu'il est possible de réaliser lors du prototypage et avec cela, vous pouvez vraiment faire beaucoup de choses différentes dans votre prototype. 148 10:30.400 --> 10:37.536 Voyons maintenant les autres choses que nous voyons ici dans notre fenêtre prototype : le comportement de défilement. 149 10:38.020 --> 10:38.860 Voyons voir ce que c'est. 150 10:38.980 --> 10:41.856 Nous avons deux options différentes : position et débordement. 151 10:42.340 --> 10:47.920 Donc, si nous commençons par la position, nous avons trois options parmi lesquelles choisir. 152 10:48.060 --> 10:49.840 Défilement avec le parent, fixe, 153 10:50.272 --> 10:50.688 et collant. 154 10:51.300 --> 10:56.660 Ils sont donc utiles pour certains éléments dont nous souhaitons modifier le comportement de défilement. 155 10:57.140 --> 11:03.100 Disons que je veux que mon menu ici, cette partie ici du site Web, ne défile jamais. 156 11:03.480 --> 11:06.840 Être toujours fixé sur l'écran pendant que je fais défiler. 157 11:07.220 --> 11:12.320 Parce que maintenant, si je reviens au héros, la page d'accueil défile avec le reste du contenu. 158 11:12.620 --> 11:17.880 C'est parce que dans le prototype ici, nous avons un défilement avec les parents qui défilent avec la page. 159 11:18.040 --> 11:19.840 Dans mon cas, je veux que ce soit 160 11:20.100 --> 11:20.400 fixé. 161 11:20.600 --> 11:21.380 Reste en place. 162 11:21.840 --> 11:30.720 Donc, en faisant cela, comme nous pouvons le voir ici dans les calques à gauche, nous avons maintenant une colonne fixe qui apparaît avec notre menu à l’intérieur. 163 11:30.840 --> 11:35.980 Cela signifie donc maintenant que le menu du menu des calques est fixe et ne défilera pas. 164 11:36.260 --> 11:40.920 Ainsi, lorsque je fais défiler le site Web, il reste toujours au même endroit. 165 11:41.180 --> 11:48.256 La chose à garder à l'esprit lorsque vous choisissez de réparer est que, comme vous pouvez le voir dans les couches, elle devient la couche supérieure. 166 11:48.480 --> 11:49.780 Donc tous les 167 11:50.140 --> 11:56.360 les éléments fixes de la page seront toujours au-dessus du reste des éléments de la page qui défilent naturellement. 168 11:56.980 --> 12:04.660 Si je veux mon arrière-plan par exemple ici mon animation que j'ai en arrière-plan, c'est juste une vidéo. 169 12:04.860 --> 12:07.900 C'est amusant de savoir que vous pouvez également intégrer des vidéos dans le prototype. 170 12:08.140 --> 12:10.080 Cela rend le prototype beaucoup plus vivant ici. 171 12:10.300 --> 12:13.560 Je veux que ma vidéo soit réparée. 172 12:14.016 --> 12:15.400 Donc je ne veux pas qu'il défile. 173 12:15.712 --> 12:20.080 Je veux qu'il reste toujours au même endroit parce que je veux qu'il soit 174 12:20.100 --> 12:21.920 j'ai aussi la vidéo à ce stade. 175 12:21.980 --> 12:29.040 Pour l'instant, ce n'est qu'un dégradé que j'ai ajouté à ma conception parce que je voulais voir à quoi cela ressemble, mais la vidéo est vraiment juste en haut. 176 12:29.240 --> 12:36.160 Donc pour que la vidéo soit corrigée si je vais ici en prototype comme vous pouvez le voir je n'ai pas l'option corriger. 177 12:36.380 --> 12:40.180 C'est parce que ma vidéo est à l'intérieur d'un groupe qui n'est pas fixe. 178 12:40.260 --> 12:43.480 Vous ne pouvez donc pas avoir un élément fixe à l’intérieur d’un groupe qui n’est pas fixe. 179 12:43.648 --> 12:49.520 Si je le retire du groupe maintenant, j'ai la possibilité de le réparer, mais si je sélectionne cette option 180 12:50.100 --> 13:00.300 comme vous pouvez le voir, il est maintenant au-dessus de tout le contenu derrière le menu car dans les calques, il est ici derrière, mais vous pouvez avoir un élément fixe qui est 181 13:00.820 --> 13:02.520 derrière le reste des éléments de la page. 182 13:02.760 --> 13:08.280 L'option fixe n'est donc pas celle à choisir ici si vous souhaitez avoir un arrière-plan fixe. 183 13:08.560 --> 13:14.480 Au lieu d'utiliser l'arrière-plan fixe ici, ce que je vais faire est d'utiliser la troisième option que nous avons. 184 13:14.680 --> 13:19.840 Nous faisons donc défiler avec le parent, il fait simplement défiler naturellement, il ne défile jamais et passe au-dessus de tout. 185 13:20.540 --> 13:23.320 Et vous avez des arrêts collants sur le bord. 186 13:23.460 --> 13:32.400 Donc collant s'arrête au bord avec cette option vous pouvez avoir un élément qui deviendra collant dès qu'il atteindra le bord de l'écran. 187 13:32.720 --> 13:45.240 Par exemple, si je le déplace un peu vers le bas, nous avons notre vidéo qui est ici et quand elle atteint le haut de l'écran, comme vous pouvez le voir, elle devient collante, donc elle reste là, elle reste en place, elle est toujours là. 188 13:45.440 --> 13:49.220 C'est parfait c'est ce que je veux mais je ne veux pas que ce soit plus bas. 189 13:49.420 --> 13:50.020 Le fait que 190 13:50.100 --> 13:55.880 il est déjà en haut de l'écran en ce moment, il fait le même effet que s'il était fixe. 191 13:56.120 --> 13:59.440 Il ne défilera jamais car il est déjà en haut. 192 13:59.700 --> 14:05.980 Ne me demandez pas pourquoi le fixe doit nécessairement être au-dessus et le collant peut être en dessous. 193 14:06.360 --> 14:14.760 Je ne sais pas exactement pourquoi, mais c'est une bonne solution de contournement d'avoir un élément fixe en arrière-plan pour utiliser l'option collante. 194 14:15.100 --> 14:19.020 Très bien, donc ça marche, je pense que c'est plutôt cool. 195 14:19.180 --> 14:20.080 Voyons ce que nous pouvons faire d'autre. 196 14:20.224 --> 14:24.480 Jouez avec ces options ici pour fixer la position. 197 14:24.760 --> 14:30.920 Nous voulons donc que le menu soit fixe sur cette section, ici nous avons l'arrière-plan qui est également fixe. 198 14:31.160 --> 14:48.360 J'aimerais que cette partie gauche de ma conception reste fixe lorsqu'elle atteint cette position jusqu'à ce que la partie droite soit entièrement défilée, puis je veux que cette section suivante la pousse pour qu'elle commence à défiler lorsque nous atteignons cette section suivante. 199 14:48.560 --> 14:50.020 Alors comment faire ça ? 200 14:50.304 --> 14:53.220 C'est à nouveau là que le sticky entre en jeu. 201 14:53.360 --> 15:11.780 La façon dont cela va fonctionner, j'ai un cadre ici avec lequel je le masque, comme vous pouvez le voir, j'ai tous ces éléments à l'intérieur, donc c'est un cadre qui contient tous mes éléments ici et je veux ma colonne de gauche ici, je veux qu'elle soit collante à l'intérieur de ce cadre. 202 15:12.020 --> 15:19.904 Cela signifie donc qu'il restera collé en haut de l'écran lorsqu'il atteindra le haut de l'écran, mais lorsqu'il atteindra la fin de cette image 203 15:20.180 --> 15:21.900 ça va recommencer à défiler. 204 15:22.120 --> 15:24.400 C'est donc exactement ce que je veux en termes d'effet. 205 15:24.700 --> 15:47.240 Je vais donc simplement sélectionner cette partie ici, comme vous pouvez le voir, j'ai regroupé tous mes éléments ici que j'ai à gauche dans un cadre et j'ai rendu mon cadre un peu plus haut de cinq pixels pour avoir ce bel espacement car je veux garder cet espacement en haut de l'écran lorsqu'il atteint le haut de l'écran. 206 15:47.400 --> 15:49.840 Alors maintenant, si je vais dans le 207 15:50.100 --> 15:59.200 faites défiler et dites collant juste pour cet élément, ce qu'il fait, c'est que lorsque je commence à faire défiler, il doit devenir collant lorsqu'il atteint le haut. 208 15:59.420 --> 16:06.140 C'est parfait, c'est ce que je veux et puis quand on arrive au projet suivant, ça recommence à défiler. 209 16:06.660 --> 16:09.240 C'est parfait, c'est exactement l'effet que je veux. 210 16:09.380 --> 16:18.200 Je veux le même effet pour le prochain aussi, donc je peux simplement aller ici, le sélectionner et dire collant pour celui-ci aussi. 211 16:20.100 --> 16:23.200 Pour celui-ci et celui-là. 212 16:23.744 --> 16:24.980 Alors maintenant 213 16:25.580 --> 16:39.400 lorsque nous faisons défiler la page, nous avons cet effet sympa d'un élément qui n'est pas collant mais qui devient collant, puis lorsqu'il atteint la fin de son cadre, il cesse d'être collant, puis l'autre l'est et nous avons le même effet pour tous ceux-ci. 214 16:39.920 --> 16:42.340 C'est donc plutôt cool pour le positionnement. 215 16:42.740 --> 16:47.020 Sur l’autre page que nous avons, nous pourrions décider d’avoir exactement la même chose ici. 216 16:47.220 --> 16:49.300 Que notre menu soit 217 16:50.100 --> 16:50.200 fixé. 218 16:50.304 --> 16:55.424 Peut-être que je veux que cet élément ici, lorsqu'il atteint le sommet, devienne collant. 219 16:55.960 --> 17:05.472 Je l'avais donc déjà positionné comme collant, donc maintenant, lorsque nous faisons défiler cette autre page ici, lorsqu'elle atteint le haut, elle devient collante. 220 17:05.888 --> 17:13.560 Je pourrais faire la même chose pour ces éléments, peut-être les faire s'arrêter à cette position à la place, mais vous comprenez l'idée. 221 17:13.740 --> 17:18.660 C'est plutôt cool tout ce que l'on peut faire avec ces positionnements collants et fixes.