Démystifier la parallaxe : apprendre à créer des pages internet interactives avec Javascript

1. Pourquoi devriez-vous suivre ce cours ?: Parallax est un effet 3D impressionnant que vous pouvez voir dans des tonnes de sites Web, de jeux et d'applications. C' est un délice d'interaction et ça attire les gens comme les fous. Dans cette classe, je vais vous montrer comment coder manuellement votre propre expérience de parallaxe en utilisant JavaScript. Cela peut sembler vaudou et magie noire, mais c'est en fait assez simple et extrêmement gratifiant. m'appelle Rich Armstrong et je fais bouger les choses avec le code depuis 2006. Dans cette classe, nous passons étape par étape à travers la parallaxe consacrée expérimentée en répondant aux événements de déplacement de la souris et de défilement des documents. La classe est remplie de vidéos théoriques et pratiques et à la fin, vous serez en mesure d'étonner vos amis et d'apporter de la vie et de la magie dans vos projets web. Je conçois la classe pour quelqu'un qui connaît son chemin, HTML, CSS et JavaScript. Sévère désireux de créer des interactions de parallaxe. Je te vois dans la prochaine vidéo. 2. La parallaxe expliquée: Alors, quel est exactement l'effet de parallaxe ? Si vous avez déjà entendu ce terme, ce qui peut vous venir à l'esprit est un site Web qui fait bouger les choses à des vitesses différentes lorsque vous faites défiler. C' est un bon point de départ. L' effet de parallaxe est vraiment une illusion de profondeur qui se produit lorsque deux ou plusieurs objets se déplacent à des vitesses différentes mais associées, ce qui nous fait croire qu'il y a une distance entre eux, qu'il y a de la profondeur. Un dictionnaire définit parallaxe comme le déplacement apparent d' un objet observé en raison du changement de position de l'observateur. J' ai ajouté l'accent. Dans la vraie vie, quand nous bougeons, tout autour de nous semble bouger et tout à des vitesses différentes. Pensez quand vous regardez par une fenêtre et une voiture ou un train, ou même bougez la tête ou marchez en ce moment, pouvez-vous voir comment les choses semblent bouger autour de vous ? Vous verrez que les choses qui sont plus loin semblent se déplacer à une vitesse plus lente et les choses qui sont plus proches. Bien sûr que c'est nous qui bougeons. Cela peut vous sembler assez évident. La question est alors, comment pouvons-nous reproduire cela dans un monde numérique alors nos écrans sont en fait plats sans profondeur ? Eh bien, nous devons créer une illusion de profondeur. Nous devons faire croire aux gens qu'il y a de la profondeur là où il n'y en a pas. On devient illusionnistes et magiciens. C' est plutôt cool, non ? Pour créer l'illusion de parallaxe d'une manière simple. On pourrait faire bouger les choses à des vitesses différentes. C' est ce que l'animation offre, mais cela n'a rien à voir avec l'observateur. Il n'est pas contrôlé par l'utilisateur. Ce n'est pas interactif. Là où l'effet Parallax prend vraiment vie, c'est quand les éléments se déplacent en fonction des mouvements d'un utilisateur, comme lorsqu'ils défilent, lorsqu'ils déplacent la souris ou lorsqu'ils inclinent leur téléphone, et c'est ce que nous allons entrer dans cette classe. 3. Comment ce cours fonctionne: Il y a deux parties à cette classe, vraiment. Le côté parallaxe des choses et le côté codage des choses. On va écraser ces deux mondes ensemble. Vous pouvez prendre cette classe et l'appliquer à n'importe quel langage de codage que vous aimez, mais nous le ferons en HTML, CSS et JavaScript. Pourquoi ? Parce que c'est super accessible, c'est super amusant, et vous pouvez faire des choses très rapidement avec elle. Cela signifie que nous allons couvrir un grand nombre de sujets HTML, CSS et JavaScript et comment ils se rapportent les uns aux autres, ce qui est fondamental pour la conception d'interactions sur le web. Dans ce cours, il y a trois choses principales que nous allons couvrir. Le premier est ce que j'aime appeler, les entrées. Nous allons apprendre à suivre le mouvement de l'utilisateur et à l' utiliser pour informer la façon dont nos objets sur notre écran se déplacent. La seconde est ce que j'aime appeler, sorties. C' est là que nous allons apprendre à manipuler la façon dont nos objets se déplacent en fonction de nos entrées. Troisièmement, nous allons en apprendre davantage sur la parallaxe, ce que nous avons déjà fait. Mais nous allons également apprendre à utiliser les entrées et les sorties pour créer une expérience de parallaxe interactive. Ce qui est vraiment important, c'est que vous appreniez à faire ces expériences de parallaxe basées sur la théorie et pas seulement en copiant du code. Nous coderons à la main tout dans cette classe et si vous êtes sérieux pour apprendre le mieux, je vous suggérerais d'écrire votre propre code au fur et à mesure que vous allez. J' apprends mieux en suivant, en arrêtant la vidéo quand j'essaie de saisir ce qu'ils viennent de dire ou quand je veux comprendre quelque chose. Écrivez votre propre code, essayez des choses, cassez des choses et essayez même des choses avant d'y arriver. Criez si vous ne comprenez rien ou si vous avez des questions. Je vais utiliser un service en ligne appelé CodePen pour faire tout mon codage avec dans cette classe. J' aime enseigner avec elle parce que nous pouvons voir le HTML, le CSS et le JavaScript tout en un seul endroit et il recharge l'aperçu à mesure que je tape. Je vous recommande de l'utiliser aussi. C' est gratuit, il est facile de créer de nouveaux stylos, s'écarter d'un stylo existant en utilisant la fonctionnalité de fourche, et parce qu'il est déjà en ligne, c'est vraiment facile à partager. Ce qui signifie que si vous avez des problèmes, vous pouvez simplement partager l'URL avec moi et cela signifie également que vous pouvez partager votre travail génial avec d'autres étudiants, avec votre mère et avec n'importe qui d'autre. La seule chose que vous ne pourrez pas faire avec la version gratuite de CodePen est de télécharger des images, mais cela peut facilement être surmonté et je vais vous montrer comment le faire plus tard dans la classe. Si vous voulez écrire votre code sur votre ordinateur, en utilisant votre éditeur de code, c'est totalement cool. Je recommande d'utiliser Sublime Text, c'est mes favoris ou Visual Studio Code, il est fait par Microsoft. J' utiliserais également GitHub pour sauvegarder votre code et les pages GitHub pour le partage. C'est libre de. Si vous avez votre propre site Web, vous pouvez le télécharger là aussi. Allons-y, on va s'amuser beaucoup. 4. Entrées et sorties: Qu' est-ce que les intrants et les extrants ? J' aimerais voir les entrées comme des choses qui peuvent être suivies et auxquelles on peut répondre. Ensuite, j'aime voir une sortie comme quelque chose que nous pouvons contrôler. Dans un monde de codage, cela aide quand une entrée a une plage. Cela signifie que nous pouvons le suivre beaucoup plus facilement et ensuite répondre en conséquence. Pensez à un cadran de four. Il a une valeur minimale et maximale, ou une valeur de début et une valeur de fin. Ces valeurs correspondent à une plage de température. Avec le code, nous pouvons modifier les propriétés de l'objet en fonction d'une entrée. Ceux qui sont les plus amusants et les plus réalistes, sont ceux sur lesquels l'utilisateur a le plus de contrôle. Dans cette classe, nous allons travailler avec la position de la souris de l'utilisateur et la position de défilement des documents, comme les entrées de l'utilisateur. Ensuite, nous allons changer la position de l'objet en fonction de cette entrée. 5. Capturer le mouvement de la souris: Commençons. Ce que nous allons faire dans cette vidéo, c'est finir avec deux valeurs d'entrée que nous pouvons utiliser pour connecter nos valeurs de sortie. Ils vont être des valeurs de fraction qui transmettent la position X et Y de la souris. Nous utilisons des valeurs de fraction car cela facilitera la connexion de nos futures valeurs de sortie. Pour obtenir une valeur de fraction, nous devons obtenir la position actuelle de la souris et la comparer à sa position maximale. Je vais travailler avec la position X pour l'instant, mais la même chose s'applique avec la position Y. La position maximale dans ce cas sera la largeur des fenêtres. Tout ce que nous devons faire est de diviser la position actuelle de la souris par la position maximale. C' est un calcul assez facile. Mais cela suppose que nous voulons suivre la souris depuis le début de la fenêtre jusqu'à la fin de la fenêtre. Que faire si vous voulez suivre la position de la souris de 100 pixels de la gauche à 200 pixels de la droite. Comment calculer la valeur de la fraction alors ? Écrivons quelques valeurs. Nous voulons que la valeur de la fraction soit nulle lorsque la position de la souris est à 100 pixels et la valeur de la fraction soit un lorsque la souris est position est que la largeur des fenêtres -200 pixels. Nous devons calculer la valeur entre les valeurs de fin et de début. Nous pouvons le faire en soustrayant la valeur de début de la valeur de fin, que nous appellerons notre plage d'entrée, puis lorsque nous obtenons notre position actuelle de la souris, nous pouvons en soustraire la valeur de début pour annuler la valeur des positions de départ. Cela signifie que si la position de notre souris est de 100 pixels, elle sera en fait nulle dans notre calcul. Maintenant, nous comparons cette valeur à notre gamme pour obtenir une valeur de fraction précise. En utilisant ce calcul, nous obtiendrons toujours la valeur de fraction correcte. Le calcul est maintenant légèrement différent de avant, mais nous pouvons également utiliser ce calcul si nous voulons suivre de la gauche de la fenêtre tout le chemin vers la droite. Vous pouvez maintenant vous demander ce qui se passe si la position de la souris est comprise entre zéro et 100 pixels ? Quel genre de valeur de fraction obtiendrons-nous alors ? Nous obtiendrons des valeurs négatives et si la position de la souris est au-delà de la valeur finale des entrées, alors la valeur de fraction que nous obtiendrons sera plus grande qu'un. Ces valeurs seront vraiment importantes plus tard, mais pour l'instant, nous pourrions limiter les valeurs de fraction à des valeurs comprises entre zéro et un avec un peu de code. Si vous avez besoin d'un moment pour digérer ces calculs, je suggérerais d'interrompre la vidéo ici et d'obtenir un stylo et du papier et de le faire pour vous-même. Cela fait une différence quand vous le comprenez vraiment. C' est la théorie des entrées. Maintenant, nous allons l'implémenter dans le code. Nous n'avons pas de HTML jusqu'à présent, et c'est génial. Nous allons écrire un peu vers la fin de la vidéo et j'ai un peu de CSS que j'ai appliqué au corps. Il a une couleur de fond et il a une marge de zéro. Nous n'écrirons pas trop de CSS non plus, donc nous allons fermer cela pour l'instant. Commençons à écrire du JavaScript. Je vais créer une variable appelée entrée, où je vais configurer toutes mes informations d'entrée et ce sera un objet et à l'intérieur de cet objet, nous allons dire qu'il y a un objet MouseX et un objet MouseY. Cela contiendra toutes les informations pour MouSex et pour MouseY. Je vais juste travailler avec MouSex principalement et à la fin de la vidéo, je vais tout mettre à jour pour travailler avec MouseY aussi. On a notre position de départ, on va juste mettre ça à zéro pour l'instant. Nous avons notre position finale, qui va être la largeur de notre écran ou la largeur de notre fenêtre. Donc, je vais dire window.innerwidth, puis je vais définir ma valeur actuelle à zéro initialement, puis je dois aussi mettre dans ma gamme, et je dois mettre dans ma valeur de fraction. Je vais le faire en dehors de cette configuration initiale afin que nous puissions également la mettre à jour plus tard. input.mousex.range = input.mousex.end - input.mousex.start. La gamme du MouSex est égale à la fin du MouSex moins le début du MouSex, qui dans ce cas sera littéralement juste la valeur finale. Cela ressemble beaucoup à ce calcul initial, mais nous allons mettre à jour la position de début et de fin, ce qui rendra la plage beaucoup plus utile. Ensuite, nous pouvons calculer notre valeur de fraction, mais notre valeur de fraction ne sera pas très utile à moins que nous puissions réellement calculer la position X et Y actuelle de notre souris. Comment pouvons-nous faire cela en JavaScript ? Eh bien, nous avons ces choses appelées écouteurs d'événements et nous pouvons les ajouter à un tas d'objets différents. L' un des objets auxquels nous pouvons ajouter un écouteur d'événement est la fenêtre. Je vais dire window.AddEvent écouteur et cette fonction accepte un tas d'arguments ou d'informations différents que nous pouvons lui transmettre. La première chose que nous pouvons lui transmettre est le type d'événements que nous voulons écouter. Je vais écouter les événements de déplacement de la souris et ensuite ce que je veux passer ici est ce qu'il faut faire lorsque les événements de déplacement de la souris se produisent et c'est une fonction. Lorsque les événements de déplacement de la souris se produit, exécutez le code à l'intérieur de cette fonction et pour l'instant, nous allons juste écrire console.log et nous allons juste nous assurer que nous épelons tout correctement et nous allons dire, « Travailler ». Ensuite, nous ouvrons notre console, qui est la console CodePen, et nous déplaçons notre souris et nous voyons que la console a un tas de messages de travail qui arrivent. Ça veut dire que ça marche, ce qui est fantastique. Maintenant, je ne veux pas bloquer ce morceau de code ici parce que c'est une fonction anonyme, cela signifie que nous ne pouvons pas y accéder en dehors des événements de déplacement de la souris. Je pourrais couper ceci et je vais stocker ce morceau de code dans une variable appelée handle mouse move. Vous pouvez également le stocker à l'intérieur d'une fonction nommée. J' aime stocker des choses à l'intérieur des variables. Je vais le coller là. Cela signifie que je peux copier et coller ceci et cela signifie que lorsque les événements de déplacement de la souris se produisent, qui arrive tout le temps, il appellera cette variable qui exécute ensuite ce morceau de code. Fantastique. Si nous effacons la console et que nous déplacons notre souris juste pour vérifier qu'elle fonctionne en fait. Maintenant, la prochaine chose que nous devons réaliser car nous avons besoin d'obtenir la valeur X de la souris ou la valeur Y de la souris. Comment on fait ça ? Eh bien, en JavaScript, nous obtenons cet objet d'événement qui est passé à notre fonction. Tu pourrais appeler ça comme tu veux. Certaines personnes vont pour E, Certaines personnes vont pour EV. Si tu le voulais vraiment, tu pourrais l'appeler Bob. J' aime les événements parce qu'il décrit exactement ce que c'est. Au lieu de journaliser, de travailler, je vais enregistrer mon événement, puis mon objet événements. La raison pour laquelle j'ai un événement dans la chaîne est que je sais exactement ce que je connecte à un moment donné. Si vous avez un tas de journaux de console dans votre code et que vous n'avez pas d'indicateur de ce que c'est, cela peut devenir vraiment déroutant. Permet d'effacer notre console et de déplacer notre souris. CodePen dira que le journal a été ignoré. Il dira qu'il est trop grand pour leur console et que vous devrez peut-être utiliser la console du navigateur à la place. console de CodePen n'est pas aussi puissante. Donc, nous allons devoir utiliser la console de Chrome à la place. Donc, nous allons à View Developer, puis nous allons pour la console JavaScript et nous allons juste déplacer notre console un peu vers le bas afin que nous puissions déplacer notre souris ici. Vous verrez que lorsque vous faites défiler vers le bas dans la console de Chrome, il ya un tas d'événements plus à travers. Voyons ce qu'est cet objet d'événement. Est un tas de clés et de valeurs ici. Rendons ça un peu plus haut, comme ça et nous avons LayerX, Layery, nous avons client X, client X. Nous avons aussi offset X Y, PageX, PageY. Tout cela semble vraiment bon X et Y. Nous avons aussi un tas d'autres informations mais je suis le plus intéressé par ces valeurs X et Y. Ce que j'aimerais que vous fassiez, c'est choisir un de ces trucs et voir si ça marche. Je vais opter pour le client X et le client Y, ou peut-être PageX et PageY. Ils ont tous l'air vraiment similaires en ce moment. Fermons ceci et nous allons enregistrer Event.ClientsX et nous allons nous assurer qu'il va là à. Vivez notre console ici et déplacez-vous et nous obtenons des valeurs qui semblent vraiment prometteuses. Donc, si vous allez jusqu'à gauche, nous devrions nous attendre à un zéro, ce qui est le cas et si nous allons à droite, nous devrions nous attendre à un assez grand nombre, 572. Maintenant, nous pouvons vérifier si c'est réellement la valeur en mettant window.innerwidth qui est indéfini et c'est parce que nous avons orthographié la largeur avec un grand I, 573. C' est un peu suspect, tu ne trouves pas ? Eh bien, pour l'instant on va travailler avec ça, c'est plutôt bon. Maintenant, nous avons notre ClientX ce qui signifie que nous pouvons réellement aller et mettre à jour notre input.mousex.CURRENT qui est égal à notre Event.ClientX. Cela signifie que nous pouvons également mettre à jour notre valeur de fraction. Donc Input.Mousex.Fraction est égal. Tu te souviens de ce que nous avons calculé pour ça ? Eh bien, c'est notre entrée.Mousex.Current moins la valeur de départ. On va mettre ça à l'intérieur de quelques accolades pour que ça marche d'abord. Nous allons ensuite diviser cela par l'input.Mousex.Range. C' est un long morceau de code. C' est juste parce que nous sommes trop verbeux à ce sujet, nous disons Input.Mousex.Current. C' est juste pour que vous sachiez exactement ce qui se passe avec toutes ces valeurs à tout moment. Nous avons notre valeur actuelle, nous avons notre valeur de fraction. Voyons si ça marche vraiment. Déconnectons notre valeur de fraction et input.mousex.fraction. Rendons ça un peu plus grand. Nous allons de gauche à droite. C' est bizarre que ça atteigne 1,36. Que se passe-t-il ici ? Eh bien, vous avez peut-être vu que j'ai un peu redimensionné mon écran. J' aurais toujours commencé à zéro. Mais en fonction de la largeur de mon écran, il pourrait arriver à une valeur beaucoup plus grande qu'un. Qu' est-ce qui se passe réellement ici ? On va, vérifier ça. Nous stockons notre valeur finale à l'intérieur de notre objet, au départ. Il ne se met pas à jour lorsque l'écran ou la fenêtre se redimensionne. Nous devons mettre à jour cette valeur afin que nous puissions mettre à jour quelques autres valeurs afin qu'elle nous donne une valeur de fraction précise. Comment on fait ça ? Eh bien, ce morceau de code ici. Je vais le copier et le coller. Au lieu d'écouter un événement mousemove, je vais écouter un événement de redimensionnement. Ensuite, au lieu d'appeler la fonction HandleMove, je vais appeler la fonction HandleResize. Donc var HandleResize et cela va stocker une fonction. A l'intérieur de cette fonction, nous allons mettre à jour notre entrée de code .mousex.end est égal, et ce sera exactement le même que notre valeur initiale. On y va. Étant donné que notre valeur finale est mise à jour, nous devons également mettre à jour notre valeur de plage car elle utilise la valeur finale. Ça devrait gérer ça. Voyons si ça marche. Pour vider notre console, allez de gauche à droite. Il en arrive presque à un. 0.998, c'est presque un. On va travailler avec ça. Si nous redimensionnons notre navigateur 0-99, les choses fonctionnent définitivement. Ce que nous devons faire maintenant, c'est que nous devons vérifier que si notre valeur de départ est à 100 et une autre valeur, cela fonctionne également. Commençons par notre valeur de départ, puis nous atteindrons notre valeur finale après cela. Ce que je vais faire est, à l'intérieur de notre HTML, je vais créer un div avec une classe de bloc. J' utilise une chose appelée Emmet qui fonctionne dans CodePen, Sublime Text et Visual Studio Code. Une fois que vous avez cette abréviation, vous appuyez simplement sur « Tab » et il l'étend en un code pour vous. J' ai toute une classe là-dedans si tu veux vérifier. À l'intérieur de notre CSS, où Emmet travaille aussi, je peux aller .block. Je vais donner à cela une couleur d'arrière-plan et ensuite aller pour une couleur que CodePen a. Allons pour cette couleur verte. Copions-le dans le presse-papiers, collons-le. Merci beaucoup. Je vais définir une largeur de 100 pixels, puis je vais définir une hauteur de 100 hauteur de visionneuse. Maintenant, nous avons ce grand petit bar vert. Ça va être 100 pixels. Quand nous effacerons cela, nous saurons que quand nous atteindrons 100 pixels, ce qui est à peu près là, il devrait être zéro, ce qui semble être. Maintenant, nous devons définir notre fin à InnerWidth moins 200. N' oubliez pas que nous pouvons également simplement copier ceci et le coller ci-dessous où nous mettons à jour notre valeur finale. Assez important. Copiez et collez ce bloc de code, appelons-le block2. A l'intérieur de notre CSS, nous ferons à peu près la même chose pour block2. Nous allons lui donner une largeur de 200 pixels cette fois, une hauteur de 100 spectateurs. Nous allons dire position absolue, et nous allons dire juste, donnez-lui une valeur de zéro et une valeur supérieure de zéro aussi. Pour dire que c'est sur le côté droit. Si on va ici, ça devrait être zéro. Si nous allons ici, il devrait en être un, ce qui est le cas. Si on passe en revue un, ça va être une valeur plus qu'un. Si nous passons en dessous de zéro, ce sera une valeur inférieure à zéro. On y va. C' est exactement ce que nous avons voulu de cette vidéo. Je vais vous montrer deux autres choses. La première chose est que si nous ne voulons pas que nos valeurs passent en dessous de zéro et au-dessus d'un, ce que nous pouvons faire ici, c'est que nous pouvons dire. Si Input.Mousex.Fraction est plus grand qu'un, alors nous allons juste le plafonner à un. Si notre valeur est inférieure à zéro, nous allons également la plafonner à zéro. Comme ça. Ensuite, nous déconnecterons notre valeur de fraction après avoir cloué ces deux choses. Quand on va de gauche à droite, c'est zéro, zéro, zéro, zéro, zéro, zéro. Ensuite, il commence à fonctionner, en arrive à un, et ensuite il reste juste à un. C' est un moyen très simple de s'assurer que nos valeurs vont de 0 à 1. Mais ces valeurs négatives et les valeurs supérieures à un seront vraiment importantes dans une vidéo ultérieure. Maintenant, la prochaine chose est que nous avons notre valeur Y à régler. Ce que je vais faire ici, c'est je vais dire pause la vidéo et que vous essayez de déterminer vos valeurs Y. Amusez-vous, faites de l'expérimentation. Je vais entrer sur ma valeur y dans quelques secondes. Faisons notre valeur y. Je vais changer mon début à zéro à nouveau et ma fin à InnerWidth. Je vais descendre ici et faire la même chose. Alors je vais sortir mes deux pâtés de maisons parce que je n'en veux pas vraiment. Je vais aller à mon HTML et sortir ces deux blocs aussi. Maintenant, allons-y pour nos valeurs y. Je dois juste copier et coller un tas de trucs différents ici. Au lieu d'aller pour window.innerWidth, je vais aller pour window.innerHeight. Ensuite, je vais mettre en place ma gamme MouSey, mon extrémité MouSey, et mon départ MouSey. Quand je dis gérer la mousemove, je vais copier et coller ceci. Nous allons simplement copier et coller le MouseY dans tous ces endroits différents. C' est à peu près le même calcul, le même algorithme, on change juste les valeurs. Au lieu de l'événement de ClientX, je vais aller pour le ClientY. On n'a pas besoin de l'utiliser si on ne veut pas. Je vais juste les commenter. Je vais appuyer sur « Commande » ou « Contrôle  », et « Slash » Je vais juste les commenter. On peut enregistrer la fraction X et la fraction Y, et on changera ça en Mousey. Ensuite, lorsque nous gérons notre redimensionnement, nous allons simplement copier et coller cela à nouveau, puis copier et coller notre MouseY et changer notre InnerWidth en InnerHeight. Cela devrait fonctionner techniquement, alors vérifions que c'est le cas. Nous allons aller tout le chemin en haut à gauche, devrait être assez proche de 0,0. Ensuite, nous allons tout le chemin vers la droite qui devrait être assez proche d'un pour la valeur x, et ensuite vérifions que notre y fonctionne. Je vais aller jusqu'au sommet. Nous y allons, zéro tout le chemin vers le bas, ce qui nous donne presque un. Mais à cause de certaines raisons avec ce navigateur, il ne nous donne pas tout à fait une valeur d'un. Nous y allons, nous avons des valeurs de fraction pour notre position X et Y. Cela signifie que nous pouvons brancher certaines valeurs de sortie dans la vidéo suivante. Fantastique. 6. Relier le mouvement de la souris à une sortie: Dans cette vidéo, nous allons connecter nos valeurs de fraction d'entrée que nous avons calculées dans la vidéo précédente avec certaines valeurs de sortie. Ce qui signifie que nous pouvons commencer à faire bouger les choses en fonction de la position de notre souris, ce qui est super cool. Notre configuration de sortie ressemblera assez à notre configuration d'entrée. Il y aura une valeur de début et de fin ainsi qu'une plage. Pour déterminer la valeur de sortie actuelle, nous allons prendre la valeur de fraction de notre entrée et la multiplier par la plage de sortie avant de l'ajouter à la valeur de stock. Ou nous pourrions prendre cette valeur et la soustraire de la valeur finale en fonction de ce que vous voulez en faire. Maintenant, c'est la théorie, nous allons entrer dans un code. Nous allons nous amuser maintenant et faire bouger quelques yeux de googley quand notre souris bouge. Ça va être génial. À l'intérieur de mon HTML, je vais créer deux yeux. Alors allons-y pour l'œil et la pupille intérieure, comme ça et puis à l'intérieur de mon CSS, j'irai pour.eye. Je vais définir une couleur de fond de blanc, puis une largeur de disons, 200 pixels, une hauteur de 200 pixels, un rayon de bordure de 50 pour cent parce que nous voulons qu'il soit rond. Oui. Puis une pause A pour absolu, et ensuite nous dirons une gauche de 50 pour cent. Eh bien, merci. Sauvons ça. gauche de 50 pour cent et on dira une marge à gauche de disons, moins 100 pixels, juste c'est juste au milieu et alors on peut dire la même chose pour le haut de 50 pour cent et un haut de marge de moins 100 pixels est aussi là juste au milieu. Nous mettrons ensuite .pupil ici, et nous dirons que VGC est noir, nous dirons largeur de 50 pixels, hauteur de 50 pixels, rayon de bordure de 50 pour cent, valeur maximale de 50 pour cent. Nous pouvons à peu près copier tout cela et au lieu d'un 100 pixels, nous dirons juste 25 pixels. Ça n'a pas l'air droit. Maintenant, ça n'a pas l'air trop droit. Est-ce que c'est ça ? Parce que nous n'avons pas mis une position absolue. On y va. On a un globe oculaire, on a une élève, on a un oeil. Maintenant, je veux un autre oeil. Allons chercher un autre œil. Peut-être qu'on appellera ça un oeil 1 et celui-là un oeil 2. Super. Eye 1 aura, disons, une marge à gauche de moins 200 pixels.eye 2. Je n'ai pas trois yeux. Eye 2, une margin-gauche, peut-être pourriez-vous dire 0. On peut avoir un peu plus de place. Alors ajoutons 25 pixels à cela et 25 pixels à cela. On y va. On a des yeux. Maintenant, lorsque je déplace ma souris de gauche à droite, je veux que les globes oculaires des pupilles suivent la souris, ou peut-être regarder l'autre direction vers laquelle va la souris. Même chose avec ma position y. Nous avons fait notre HTML et CSS. Maintenant, entrons dans quelques JavaScripts. Rendons ces panneaux un peu plus grands. Ici, nous allons créer notre configuration de sortie. Cela aura l'air vraiment familier. Nous allons opter pour une configuration x et y, et x et y parce que ce n'est pas vraiment la souris x et la souris y, c'est en fait l'exposition x ou une position de translation x et la position de translation y. Allons pour une valeur de départ, et je dirai moins 100 pixels, sauf sans le px et la fin, par exemple, 100, le courant sera 0 et puis une plage, nous pourrions juste mettre notre gamme ici de 200, mais nous va créer dynamiquement cela après avoir créé l'objet. Je vais juste travailler avec la position x pour l'instant, et je vais vous faire faire la position y plus tard avant finir et vous montrer exactement comment je ferais la position y. Donc, ce qui est après ceci est notre sortie.x.range et ceci est notre sortie.x.end moins sortie.x.start. Fantastique. Je vais juste couper et coller les valeurs d'entrée où les codeurs d'entrée et la sortie où les codeurs de sortie. C' est un peu plus logique. Nous pouvons également commencer à compter les bits de codeur juste pour que nous sachions ce qui se passe. Fantastique. Ensuite, ici, nous n'en avons probablement plus besoin, sauf si vous allez utiliser une plage d' entrée où le début n'est pas 0 et la fin n'est pas la fenêtre dans une largeur. Donc, nous pouvons juste couper ça et ensuite nous pouvons faire un peu plus de commentaires ici. Donc, nous pouvons faire la souris x, nous pouvons dire souris y, ou nous pouvons simplement appeler cette entrée de la souris x à l'entrée de la souris y. Ensuite, nous avons quelques journaux de console qui se passent ici, que je vais juste commenter pour l'instant. Maintenant, nous avons nos contributions en cours. Nous avons mis en place nos sorties. Maintenant, comment convertir ou connecter nos entrées à nos sorties ? Sortie, orthographions cela correctement, sortie .x.current est égal, et nous avons une valeur de fraction avec laquelle nous pouvons travailler. Donc, nous allons dire notre valeur de fraction multipliée par notre output.x.range, qui va être une valeur en soi. Donc, vous n'avez pas besoin de le faire, mais parfois c'est un peu plus facile de dire, d'accord, c'est une valeur qui va fonctionner en premier, et ensuite nous allons dire output.x.start plus cette valeur. Maintenant, déconnectons-nous. Voyons ce qui se passe. Tout est prêt. Si nous éliminons ceci en premier, vous êtes tout le chemin de la gauche, qui est moins 100, tout le chemin vers la droite, ce qui est presque plus 100. Plutôt cool. Donc, cela fonctionne, nos valeurs de sortie arrivent à travers. Maintenant, nous avons juste besoin de le connecter au HTML. Mais comment diable faisons-nous ça ? Jusqu' à présent, tout a été un simple codage. Eh bien, un peu de mathématiques, mais pas de trucs HTML. Comment connectons-nous réellement le HTML ? En haut de mon document. C' est là que je vais configurer mon HTML. Donc, la configuration HTML. A l'intérieur de notre HTML, nous avons des cours, nous avons l'œil et l'élève. Je veux bouger et faire des changements sur l'élève. Essayons donc d'obtenir les éléments HTML pour ces classes d'élèves. Quelqu' un dit var pupilles HTML Collection égale document.get éléments par nom de classe et vous voyez comment nous utilisons le cas de chameau ici et puis je veux obtenir élève/pas les élèves, élève. Disons console.log, élèves collection HTML. Vous avez peut-être vu ce flash rapide, dit journal ignoré. Nous allons effectivement avoir à vérifier ce qui est en utilisant la console développeur de Chrome. On peut juste le reconnecter ici. Vous voyez ? Journal ignoré. Allons donc à la console Développeur et JavaScript. Cela enregistre la collection HTML, qui est div de l'élève et div de l'élève. Vous pouvez voir qu'il est en fait de sélectionner si ces éléments HTML, comme je les survole, nous pouvons également cliquer avec le bouton droit de la souris et dire révéler un panneau d'éléments, et nous y allons. On a ces deux yeux, ce qui est fantastique. Alors fermons ça. Cela ne nous aidera pas trop. Nous devons convertir cette collection HTML élèves en un tableau. Il y a plusieurs façons de le faire, mais l'un des plus simples est les élèves var. Array égale array.from, et nous collons simplement dans nos élèves HTMLCollection là-dedans. Si vous voulez faire du code prêt à la production, vérifiez simplement que ce morceau de code fonctionne dans tous les navigateurs dans lesquels vous voulez que votre code fonctionne. Maintenant, nous avons nos élèves Array, vérifions simplement cela, aussi un journal ignoré. Encore une fois, le journal a été ignoré. Allons voir ce que ça ramène. Encore une fois, cela va nous donner nos deux élèves, mais au lieu d'une collection HTML, ce ne sera pas un tableau, ce qui signifie que nous pouvons travailler avec. Clôtons ça, copions ce tableau des élèves, et allons dans notre section ascendante par ici. Nous avons élaboré notre sortie x, maintenant allons-y et appliquons la sortie au HTML. Nous copions nos pupilles Array, et puis nous utilisons la fonction rad tableau appelé ForEach. Maintenant, notre fonction ForEach prend un argument de fonction. Nous pouvons dire fonction et à l'intérieur d'ici, nous allons mettre une fonction anonyme. Nous y allons, et nous exécutons du code pour chaque élève qui est à l'intérieur de notre tableau. A l'intérieur de cette fonction, nous obtenons des informations possibles. Le premier élément d'information est l'élément réel. Vous pourriez écrire élément, je vais écrire élève, parce que je veux savoir que je travaille avec un élève, et puis vous avez aussi passé ce que Luca dit. Le premier élève, va obtenir une valeur zéro quand nous connectons i, le suivant va obtenir une valeur d'un quand nous connectons i. C'est vraiment, vraiment cool parce que cela signifie que vous pouvez changer votre code, vous pouvez changer une logique basée sur ce que je c'est. C' est un peu déroutant quand je dis que nous pourrions utiliser quelque chose comme K ici. Disons que pupil.style.transform, et cela va réellement changer le HTML, égal. Ils veulent dire traduire x. Je vais utiliser translate x pour l'instant. Je vais dire traduire x, et je vais dire 75 pixels. On y va. Voyons si cela fonctionne réellement. moment, ça ne fait rien parce qu'on n'a pas encore fait bouger la souris. Effacons ces console, et peut-être que nous pouvons juste effacer les journaux pour l'instant. Vous voyez maintenant comment nos élèves avaient été codés pour être 75 pixels. Si nous faisons un clic droit et nous disons Inspecter, vous pouvez voir qu'il a une traduction de 75 pixels appliquée. C' est fantastique. Fermons cela à nouveau, nous pouvons faire défiler vers le haut, et nous pouvons simplement sortir ce journal de la console, puis nous faisons défiler vers le bas pour appliquer la sortie au morceau de code HTML. Au lieu de faire de cela une valeur statique, faisons de cela une valeur dynamique. Nous pouvons dire plus, et nous pouvons maintenant mettre une valeur de sortie .x.current ici. Ce que cela fait, c' est de concaténer trois valeurs différentes. Cette chaîne, cette valeur de nombre avec cette chaîne, et il les met tous dans une valeur de chaîne. C' est ce qu'on appelle la concaténation de chaîne. Un petit mot descriptif étonnant là-bas. Il les applique à la valeur pupil.style.transform. Voyons si ça marche. On y va. C'est assez amusant. Laissons juste notre console et fermons ça. C' est vraiment, vraiment cool. C'est amusant. Il se chevauche un peu, donc nous pourrions changer un peu nos valeurs d'entrée ou de sortie. Si nous faisons défiler ici, nous changeons nos valeurs de sortie à moins 70 et peut-être notre fin à 70. On y va. Jamais tout à fait atteint, ou ce que nous pourrions faire est à l'intérieur de notre CSS, nous pourrions changer notre i, nous pourrions simplement dire débordement à caché. Cela signifie que quand on arrive au bord, il ne se chevauche pas, il va juste derrière. Alors votre choix quoi faire ici. Cachons ça encore une fois. Quel est le prochain ? Laissez-moi vous montrer quelques choses vraiment cool. En ce moment, nos élèves suivent la souris. Comment pouvons-nous l'obtenir pour ne pas suivre la souris, mais être inverse ? Lorsque je déplace ma souris de gauche à droite, les élèves se déplacent de droite à gauche. C' est possible ? Eh bien, regarde ça. Notre output.x.current est égal à la sortie .x.start au moment présent. Que se passe-t-il si nous commençons à la fin, et nous disons moins cette valeur ? Cela signifie que lorsque nous allons du côté droit vers le côté gauche, cela ne fait pas l'inverse de ce que fait notre souris. Ce que je veux que vous fassiez, c'est mettre en pause cette vidéo et essayer de faire fonctionner les valeurs y pour les élèves. Je vais vous montrer comment je ferais les valeurs Y pour les élèves. Allons-y. Je vais mettre des sections ici, copions et collez ceci. Moins 100 à 100, il devrait être à peu près les mêmes valeurs. Vous pouvez les modifier si vous le souhaitez. Peut-être qu'on peut, on va peut-être le changer en 125, comme ça. Ensuite, nous allons juste calculer notre gamme pour notre y. Nous avons une entrée x souris, et l'entrée y souris, sortie x. obtenons notre sortie y, comme si, et nous pouvons recommencer à la fin. Il change en y, souris y fraction, ce qui est vraiment important. Vous pouvez réellement expérimenter avec la souris x avec votre y, c'est un peu drôle. Je vais vous laisser le soin. Ensuite, ici où nous appliquons au HTML, au lieu d'utiliser translate x, je vais utiliser translate, ce qui signifie que je dois mettre une autre valeur ici. On peut dire 50 pixels et on déplace notre souris. Cela restera toujours à la même position. n'est pas tout à fait ce que nous voulons, nous voulons que ce soit dynamique, donc au lieu de 50 pixels, nous voulons utiliser une concaténation plus de chaînes ici. Nous allons mettre entre guillemets simples, plus, plus, et puis entre les avantages utilisera notre sortie y.current. Voyons ce qui se passe ici. Cela va exactement là où notre souris ne va pas, et vous voyez que nous pouvons réellement cacher nos globes oculaires, ce qui n'est pas idéal. Je vais changer mes valeurs ici à 75, et je vais les changer à 75 et 75 aussi. On y va. Plutôt cool. Si nous voulions que notre valeur y suit la position de la souris plutôt que d'être inverse, nous pourrions commencer à la position de départ, puis ajouter cette partie du calcul. Vous voyez que je déplace ma souris vers le haut, elle suit ma souris. Quand je vais de gauche à droite, les yeux font le contraire. Vous pouvez changer le code très facilement et simplement mettre à jour le code HTML. Pour l'exercice étirement avec ceci, ce que je veux que vous fassiez, je veux que vous essayiez pour chaque élève, faites un mouvement dans une direction différente. Lorsque je déplace ma souris du haut de l'écran vers le bas de l'écran, je veux qu'un œil suive ma souris, et je veux que l'autre œil ne suive pas ma souris. Je veux que ce soit inverse. La même chose pour le X. Lorsque je déplace ma souris de gauche à droite, je veux qu'un œil suit la souris, et je veux que l'autre oeil fasse l'inverse. Mettez la vidéo en pause ici, et voyez si vous pouvez le faire. Essayons ça. Je veux que mes élèves fassent le contraire. Ce qui est génial, c'est que j'ai cette valeur k ou i, quoi que vous vouliez l'appeler. Je vais dire si, et je dirai k égal, égal, égal à zéro, ce qui sera le premier i, faire quelque chose, sinon, faire autre chose. Copiez et collez ceci ici, copiez et collez ceci ici, et sortons ceci, qui ressemble à ça. Cela devrait toujours fonctionner exactement de la même manière, nous avons le même morceau de code dedans. Maintenant, j'ai mes valeurs actuelles ici. Ce que je vais faire, c'est, je vais changer ou ajouter une valeur différente. Je vais copier et coller cette sortie x, et je vais dire point opposé. Je vais dire commencer plus cette valeur ici, et je vais faire exactement la même chose pour ma valeur y. Je vais dire que le contraire est la fin, moins, et commencer plus. Maintenant, vous pouvez appeler ça comme vous le vouliez. Vous pouvez l'appeler inverse, vous pouvez même changer ceci pour commencer, et ceci pour finir, et ceci pour plus, et ceci pour moins, tout ce que vous voulez. J' ai maintenant deux valeurs de sortie avec lesquelles je peux travailler. J' ai le courant et j'ai le contraire. Voyons ce qui se passe ici, si je mets à jour ceci à l'opposé et à l'opposé, et celui-ci à l'actuel et actuel, que se passe-t-il ? Si je vais jusqu'au milieu, il est normal, et si je vais jusqu'à gauche, il va un peu comme bizarre squinty, si je vais à droite, super squinty. On y va, vous pouvez commencer à vous amuser, tous codés. Le HTML est juste en cours de mise à jour par votre code, vraiment cool. Dans la vidéo suivante, nous allons passer au niveau suivant. Nous avons appris à déplacer les choses avec JavaScript. Ça a été vraiment amusant. Mais pour le moment, il n'y a pas beaucoup de profondeur. n'y a pas beaucoup de parallaxe. Nous allons présenter la parallaxe et la profondeur dans la prochaine vidéo. Je suis impatient de le faire. 7. Créer l'effet de la parallaxe: Dans cette vidéo, nous allons créer une illusion de profondeur. Il y a différentes façons de le faire, mais une façon que j'aime tout à fait est de donner à chaque élément de parallaxe à une valeur de profondeur entre zéro et un. Oui, nous parlons encore de valeurs entre zéro et un mais, pourquoi ? Parce qu'il est facile de se connecter à nos valeurs de sortie. Zéro signifie très proche et on veut dire très loin. Comme un élément s'éloigne de plus en plus, il se déplace de moins en moins rapidement. Comment nous faisons cela dans le code est, pour chaque élément, nous commençons les sorties x et y que nous avons élaborées dans la dernière vidéo, puis par les sorties x et y que nous avons élaborées dans la dernière vidéo, puis nous soustrayons une valeur qui est constituée en multipliant les sorties x ou y actuelles par le profondeur. Si la profondeur d'un élément 0.5 alors les sorties x des éléments seront la moitié de la sortie x actuelle. Si la profondeur d'un élément est zéro, les sorties x de cet élément seront la sortie x complète et si la profondeur d'un élément est un, la sortie x pour cet élément sera zéro. L' autre chose dont nous devons être conscients est l'endroit où nos éléments apparaissent à l'écran. En HTML, sauf si vous spécifiez des éléments z-index, il apparaîtra sous les éléments qui viennent après lui et au-dessus des éléments qui viennent avant lui. Si notre premier élément a une profondeur de 0,1 et que notre deuxième élément a une profondeur de 0,8 en HTML, le second élément apparaîtrait au-dessus du premier. Mais selon les profondeurs des éléments, nous voulons que le premier élément apparaisse sur le dessus car il a une valeur de profondeur inférieure. Sauf si vous voulez définir manuellement des index z ou mettre tous les éléments qui sont plus loin en haut du document, nous devons ajuster valeurs de l'index z sur chaque élément avec du code. Nous pouvons le faire en définissant un ZIndexRange. Nous élaborons ensuite les éléments zIndex en soustrayant la plage zIndex multipliée par la profondeur de la zIndexRange. La valeur zndiexRange doit correspondre ou être supérieure la quantité de décimales que vous avez l'intention d'utiliser dans vos valeurs de profondeur. Si vous utilisez une décimale simple, un ZIndexRange peut être 10. Si vous utilisez deux décimales, utilisez un zIndexRange de 100 et ainsi de suite. Un ZIndexRange de 1 000 ou 10 000 est un pari assez sûr. Comme vous pouvez le voir, tout est à voir avec la profondeur. Maintenant, entrons dans le code. On a un peu à couvrir. Alors que sur les yeux googly exemple était assez amusant de jouer avec et de créer ne va pas vraiment nous aider à créer une expérience de parallaxe. Je vais faire un peu de remodelage ici. Tout d'abord, je vais supprimer mes yeux du HTML et créer des éléments d'élément de parallaxe afin que nous puissions créer peut-être trois d'entre eux. Ensuite, dans mon CSS, au lieu de eye1 et eye2, au lieu de mon élève, je vais changer mon .eye2 peut-être simplement copier et coller ceci à l'élément parallaxe. Couleur de fond, nous pouvons changer cela en noir. La couleur de fond est noire. La largeur et la hauteur 200. Rayon de frontière, on peut sortir ça, d'accord ? La position est absolue gauche et haut margin-gauche, margin-top. C' est tout bon. Ça a l'air super. Il est au centre de la page. Le débordement : caché, on peut l'enlever. Ce que nous allons faire est pour chacun de ces éléments définira une couleur d'arrière-plan distincte. Ensuite, en haut ici, au lieu de PupilsHTML Collection, nous pouvons dire des éléments HTMLCollection et nous pouvons copier et coller cela. Au lieu de chercher la fermeture de l'élève, nous allons à nouveau chercher parallax item. Nous pouvons copier et coller ça. Ensuite, au lieu de PupilsArray, je vais aller pour les éléments Array. Nous avons ensuite obtenu nos entrées et nos sorties qui sont toutes assez bonnes. Je vais les changer de 75 à 100 juste pour qu'il y ait un peu plus de mouvement, peut-être que nous pouvons même dire 150. Copiez et collez simplement ces. Nos sorties sont gérées. Nous avons ensuite obtenu toutes les entrées MouSex et MouseY en cours d'élaboration. Nous avons notre sortie x. je n'ai pas besoin d'un courant et d'un contraire en cours d'élaboration tout le temps. Je vais juste aller pour le courant. Je vais rester avec la fin moins cette valeur ici. Appliquer la sortie au HTML, c'est génial donc nous allons aller avec nos valeurs actuelles. Prenons ceci et écrasons ceci parce qu'il n'y aura plus d'yeux. Au lieu de notre PupilsArray ici, nous allons aller pour ItemsArray. Au lieu de référencer cet élément avec pupi, nous pouvons aller élément, puis item.style.transform, puis nous le traduisons. On dirait que ça marche fantastique. Permet de mettre un peu de style dans ces blocs. Je veux dire couleur de fond. De quelle couleur est-ce que je veux ? Eh bien, celui-ci va être noir, donc c'est génial. Copiez et collez ces attributs de style. Ouvrons notre panneau d'actifs en stylo couleur. Je vais juste copier un de ceux-ci et le coller ici. Alors on va chercher un bleu et on va le coller ici. Merci beaucoup. Maintenant, nous avons tous nos carrés qui bougent exactement à la même vitesse. Ce qui se passe ici, c'est que si je viens là-dedans, tu verras le petit et si je viens là-dedans, tu verras le noir. Si j'entre dans les deux et encore, prends-moi qu'ils bougent tous exactement à la même vitesse. Ce que nous allons faire ici, c'est que nous allons commencer à introduire notre profondeur. Pour cet article 1 Je veux une profondeur de disons 0,1. En JavaScript, nous pouvons utiliser data depth et quand je dis profondeur, vous pouvez mettre ce que vous voulez ici. C'est à vous de décider. Allons pour 0.1 et copions et collez ceci. Rendons ça un peu plus gros. Cela peut être de 0,3 et 0,6. Cela signifie que celui-ci devrait être notre place la plus proche. Celui-ci est au milieu et celui-ci devrait être le plus éloigné. Ici, nous pouvons voir que ce n'est pas le cas, mais nous n'avons pas fait de codage pour le faire ainsi. Cela met juste en surbrillance sur html et CSS et passons à notre tableau d'éléments pour chaque boucle. Ici, nous pouvons commencer à jouer avec la profondeur. Pour réellement obtenir la profondeur dans JavaScript, c'est ce que nous allons faire. On va dire profondeur var. Nous installons cette profondeur à l'intérieur d'une variable appelée profondeur. Nous dirons item.dataset.depth. Quand je dis profondeur ici, si vous avez nommé votre data depth, quelque chose comme data-distance, alors vous direz dataset.distance, mais nous avons la profondeur ici. Voyons si cela vient réellement par console.log. Nous dirons k pour l'article, puis nous dirons profondeur et profondeur. Lorsque nous déplacons notre souris, le premier élément a une profondeur de 0,1, le second a une profondeur de 0,3 et le troisième a une profondeur de 0,6. Les articles arrivent à travers. Le fait est que ce sont des valeurs de texte. Je veux qu'ils soient des valeurs numériques. Comment pouvons-nous faire en sorte que cela se produise en JavaScript ? On peut utiliser ce truc appelé flotteur d'analyse. Ensuite, nous sélectionnons cela et ensuite nous le mettons entre accolades. Ce que l'analyse float fait, c'est qu'elle convertit quelque chose en un nombre et plus précisément un nombre avec des décimales. Nous savons que nous avons des décimales donc cela fonctionne très bien. L' autre chose est que nous devons mettre une virgule 10. Si vous ne mettez pas ce n'est pas un match trans massif, mais c'est la meilleure pratique. La raison pour laquelle j'ai mis la virgule 10 ici est parce que nous disons que nous voulons que ce soit un système décimal. Il pourrait convertir un nombre ou un morceau de chaîne en quelque chose qui compte par 15s par exemple. C' est vraiment une bonne pratique. Gardions ça dedans. Maintenant, quand on se déplace et qu'on verra que ce sont tous des chiffres maintenant, ils sont orange, ils n'ont pas de citations autour d'eux. Maintenant, comment appliquer cela à chacun de nos carrés ? Paramétons une sortie d'élément. Cela va ressembler à notre sortie ci-dessus, sauf nous n'aurions pas de fin de début et de valeur actuelle, nous aurons juste une valeur x ou y. On n'a pas besoin de chacun d'entre eux. Ici, nous allons avoir notre valeur x. Quelle sera notre valeur x ? Eh bien, ça va commencer à notre sortie x.current. Ce sera cela comme un démarreur et nous dirons moins la sortie x.current multipliée par la profondeur. Nous pouvons mettre des accolades autour de ceux-ci juste pour nous assurer que nous savons qu'il est calculé en premier, mais il est effectivement calculé en premier à cause du signe de multiplication. On a toute notre exposition. Maintenant, je dis itemoutput.x. Voyons si cela fonctionne. Le y fait toujours partie de la position générale ou globale y, mais notre x est déterminé par notre profondeur qui est assez cool. Maintenant mettons la position y ici. Nous pouvons simplement copier et coller ce y:output.y, output.y et ItemOutput.y. Maintenant, vous pouvez voir qu'il se déplace inversement à la position de la souris et qu'il est basé sur la profondeur. Éliminons ceci et fermons. Mais il y a encore un petit problème. Dans notre HTML, vous verrez que notre profondeur, celui-ci est à 0.1 ce qui signifie qu'il devrait être à l'avant, n'est-ce pas ? parce qu'il est plus proche de nous. Même si ça a l'air sympa, ce n'est pas vraiment vrai. Plus quelque chose est proche, plus vite il devrait être en mouvement. Comment on change ça ? Eh bien, dans notre JavaScript, nous pouvons maintenant commencer à changer l'index z ou l'index z, en fonction de la partie du monde dont vous êtes. Ajoutons une nouvelle valeur ici, z-index. Ce que nous allons faire, c'est que nous allons dire que 10 000 seront sur la plage de l'indice z. Nous allons créer une nouvelle variable dans notre sortie sous peu, mais nous commençons par 10.000. C' est juste un numéro sûr pour travailler. On va dire 10 000 moins 10 000 multipliés par notre profondeur, d'accord ? Maintenant, on peut juste les mettre en accolades pour que vous sachiez que c'est fini en premier. Si notre profondeur est un, alors notre indice z sera zéro. Si notre profondeur est nulle, cela signifie que notre indice z ou ZIndex sera de 10 000. Ensuite, nous ajoutons une autre ligne pour notre article et nous disons item.style.zindex est égal et nous avons juste tracé ce nombre là-dedans. Ça ne marche pas. Ouvrons notre console, les journaux coupés. n'y a pas de messages d'erreur, les choses ne fonctionnent pas. Que se passe-t-il ici ? Nous devons aller à notre Chrome, Développeur, Console JavaScript et il dit ReferenceError : z Index n'est pas défini depuis qui se passe partout dans le spectacle. On peut venir dire ZIndex. Ce n'est pas ItemOutput.zIndex est juste zIndex. On y va. Ça devrait arranger les choses pour nous, fantastique. Maintenant, notre boîte noire est sur le dessus de la boîte bleue est en bas. Les choses ont l'air vraiment réaliste maintenant, plutôt cool. Vous remarquerez peut-être quelque chose d'un peu étrange maintenant. Ces articles sont tous en fait de la même largeur et de la même hauteur mais comme nous les avons déplacés de plus en plus loin, ils ne semblent pas être de plus en plus loin. Ce que vous pourriez faire est que vous pouvez les mettre à l'échelle manuellement ou changer la largeur et la hauteur de plus en plus loin qu'ils obtiennent ou vous pourriez le faire avec du code. Vous pourriez faire un dynamiquement. C' est ce que nous allons faire dans la prochaine vidéo. 8. Améliorer le réalisme: On a fait de la magie de la parallaxe et ça a l'air génial. Mais si nous essayons de faire regarder les choses et de se comporter comme elles le font dans la vraie vie. Il y aura toujours plus de choses que nous pouvons faire. Dans cette vidéo, nous allons aborder deux d'entre eux. Nous allons également faire une certaine optimisation du code et je remplace les boîtes avec des feuilles jolies parce que les feuilles sont cool. La première chose que nous devons aborder est l'échelle. S' il y a deux éléments qui sont de la même largeur et la même hauteur, et l'un d'eux est plus loin. Il devrait paraître plus petit en échelle et il devrait paraître plus petit en fonction de sa distance. Son échelle devrait être relative à sa profondeur. Vous pouvez coder à la main l'échelle de chaque élément, ou vous pouvez le faire avec du code et bien sûr, nous allons y arriver avec du code. Nous pourrions calculer l'échelle très facilement en commençant par un et en soustrayant la profondeur des éléments. Mais peut-être que nous ne voulons pas que nos articles soient si petits. Définissons une échelle de début et de fin, ce qui nous mènera à la création d'une plage d'échelle. Ensuite, pour calculer une échelle d'élément, nous commençons par l'échelle de départ, puis ajoutons la profondeur multipliée par la plage d'échelle. Ça a l'air assez familier, n'est-ce pas ? La prochaine chose que nous devons aborder est le flou. Les objets apparaîtront de plus en plus flous au fur et à mesure qu'ils s'éloigneront. Mais nous ne voulons pas forcément qu'ils deviennent flous jusqu'à une certaine profondeur. Sinon, tout sauf les éléments et la profondeur zéro sera flou. Une façon de calculer le flou est de décider d'une valeur de profondeur de départ, qui sera l'endroit où le flou va entrer et l'autre est une valeur de plage de flou, ce qui serait la façon dont le flou et l'élément peuvent obtenir. La valeur de profondeur de départ doit être une valeur comprise entre zéro et un afin qu'elle soit corrélée avec les valeurs de profondeur et la valeur de plage de flou soit à laquelle nous allons connecter la profondeur de chaque élément. Tout comme notre plage d'index Z, la valeur de flou des éléments est ensuite calculée en soustrayant la valeur de profondeur de départ de la profondeur des éléments, puis en multipliant cette valeur avec notre plage de flou, vous pouvez vous retrouver avec des valeurs de flou négatives. Mais pour le moment, cela signifie que ces éléments apparaîtront non flous, qui est exactement ce que nous voulons. Maintenant, mettons en œuvre l'échelle et le flou dans notre code et pendant que nous le faisons, optimisons un peu notre code. Nous allons d'abord transformer nos blocs en feuilles fraîches. Nous allons ouvrir notre panneau HTML, donnons-lui un peu plus d'espace. Je vais enlever les attributs de style, boom, boom et boom. Ensuite, à l'intérieur de mon élément de parallaxe, je vais ajouter une image et la source va être ? Si j'ouvre mon panneau d'actifs à l'intérieur de CodePen, il y a un tas d'images. Tu pourrais aller sur des photos qu'elles ne sont pas idéales. Avec CodePen pro, il vous permet de télécharger vos propres actifs. J' ai téléchargé un tas de mes propres ressources de parallaxe. Vous pouvez utiliser ces ressources si vous le souhaitez. Vous pouvez également utiliser les ressources disponibles dans la classe et je vais vous montrer comment télécharger vos propres ressources et copier l'URL si vous n'avez pas CodePen pro. On l'a copié. On va le coller dans notre source et on y va. Ça arrive. Copiez et collez ces dans nos articles div, puis l'actif numéro 2 et l'actif numéro 4. Nous y allons et j'utilise l'actif numéro 4 au lieu de l'actif numéro 3 parce que l'actif numéro 3 est vraiment un gros splotch et n'a pas l'air si cool. Puis à l'intérieur de notre CSS, je vais point parallaxe, élément et je vais aborder l'image dans l'élément parallaxe. Je dirai la largeur ou peut-être la largeur maximale est de 100 pour cent et la hauteur maximale est également de 100 pour cent. Voyons ce que ça fait. Ouais, ça a l'air plutôt bien. Maintenant, comment puis-je le mettre au milieu ? Peut-être que nous pouvons utiliser un flex, df pour l'affichage flex je dirai justify-content, centre et align-items centre. On y va. Nous pouvons enlever notre couleur de fond. Nous pouvons changer la largeur et la hauteur à 300 pixels et voilà. Nous avons maintenant trois feuilles l'une sur l'autre. Ce que je veux faire maintenant, c'est que je veux juste faire pivoter les feuilles un peu. Ouvrons notre HTML et faisons un peu de style en ligne ici. Tout d'abord, passons à un attribut de style et changeons la rotation de la transformation à environ 30 degrés, comme ceci. Ensuite, nous allons copier et coller ceci et nous allons changer ceci en négatif 45 et celui-ci en quelque chose comme 110. Est-ce que ça marche du tout ? Non, parce qu'on a mal transformé. Que diriez-vous de ça ? Nous y allons, et les choses commencent à fonctionner maintenant. Nous avons quelques feuilles intéressantes qui se produisent en ce moment. Ils sont un peu meilleurs que nos pâtés de maisons. Nous avons fait notre HTML, nous avons notre CSS fait, maintenant passons à une certaine optimisation JavaScript. La première chose que je veux faire est, je veux supprimer ces valeurs que nous ne savons pas vraiment ce qu'elles sont et ce qui se passe si nous changeons une, alors nous devons toujours changer l'autre. Changeons cela en output.zindex.range et nous allons copier et coller ceci et puis ici nous allons juste mettre dans notre objet zindex et nous allons mettre dans une clé de plage, et la plage sera 10.000. C' est la première optimisation que je veux faire. La raison pour laquelle je fais ça, c'est que je n'ai pas un tas de ces 10 000 numéros partout dans le spectacle. Je sais exactement ce que c'est et je peux le mettre à jour en un seul endroit et il le mettra à jour tout au long de mon code, ce qui est vraiment cool. La prochaine chose que je veux faire est, je veux changer comment cette fonction de déplacement de la souris de poignée fonctionne au lieu d'avoir tout ce code à l'intérieur d'ici, qui devient vraiment, vraiment long, je veux le diviser. La façon dont je veux le diviser est que je veux créer une variable appelée updateinput et je veux stocker une fonction ici qui exécute ce code. Prenons ce code à partir d'ici et mettez-le dans cette fonction , puis allons exécuter UpdateInput à partir de cette fonction. Ça veut dire que je sais exactement ce que ça fait. Mais je n'ai pas vraiment besoin de regarder le code et de le parcourir à chaque fois. Le seul problème avec cette façon de le faire est que l'événement ne sera pas présent dans cette fonction. Ce que je vais faire avant d'appeler les événements de mise à jour, c'est que je vais affecter ma souris .x à event.clientx et ma mouse.y à event.clienty. Vous pensez peut-être que bien, où le diable est maîtrisé x venant ? Eh bien, nous allons créer ça. Allons pour var mouse et va créer un objet et son x sera zéro et c'est y il sera zéro. Maintenant, quand nous obtenons l'événement, dira mouse.x est égal à event.clientx. Ensuite, au lieu d'assigner event.clientx à notre mousex.current, nous pouvons dire mouse.x et mouse.y. Cela signifie que nous pouvons exécuter nos entrées de mise à jour sans avoir à compter sur une propriété d'événement. Maintenant, faisons la même chose pour notre sortie. Cela crée une variable appelée UpdateOutput et stockons une fonction à l'intérieur d'ici. On peut couper ça et le coller. Au lieu d'avoir deux lignes de commentaires, je peux juste dire sortie x et y, et faisons-le comme ça. Ça a l'air plus soigné. Nous appelons ensuite la fonction UpdateOutput directement après les UpdateInput et ensuite nous voulons mettre cela dans une fonction à. Celui-ci est un peu différent parce que nous créons une sortie d'élément pour chaque élément, puis nous mettons à jour le HTML. Comment appelons-nous cette fonction ? Peut-être que vous pouvez dire updateEachParallaxItem. Que diriez-vous de ça ? Copions ça, collez-le. Je dirai var égal la fonction et ensuite nous pouvons couper ceci et le mettre ici. Maintenant, notre code semble beaucoup plus lisible. Nous voyons juste qu'il met à jour les entrées, il met à jour les sorties, puis met à jour chaque élément de parallaxe. C' est aussi vraiment cool parce que nous pouvons appeler chacun de ces séparément et en dehors de cette fonction de déplacement de la souris de poignée. C'est génial. Nous avons un peu nettoyé notre code. Maintenant, quelle est la prochaine ? C' est le temps de l'échelle. Où faisons-nous notre échelle ? Eh bien, nous faisons notre échelle et notre ItemOutput. Ajoutons une nouvelle propriété à notre ItemOutput et à notre échelle. Qu' est-ce que ça va être ? Ça va être quelque chose comme notre output.scale.start plus. Nous allons mettre à l'intérieur de nos parenthèses ici, plage de points d'échelle de sortie multipliée par la profondeur. On n'a pas arrangé ça, alors on va le mettre en place. Tout cela, nous pouvons en fait les cacher pour l'instant, ce qui est vraiment cool à propos de CodePen. Il est également disponible dans les éditeurs de code. Nous pouvons cacher la valeur de la souris et ensuite nous allons de l'avant et mettre notre échelle ici. Je vais avoir une valeur de début, et la valeur de début que je recommanderais d'être une, car une échelle de un signifie qu'elle est à la taille d'origine. Nous avons ensuite une valeur de fin, et la valeur de fin peut peut-être être 0,2, mais nous allons mettre à jour cela dans un instant. Ensuite, nous allons travailler sur notre gamme comme le reste de ces calculs. plage de points de l'échelle de points de sortie est la fin de point de l'échelle de point de sortie moins le début de point de l'échelle Vous pensez peut-être, « Accrochez-vous, nous allons commencer par 0,2, puis en soustraire un, ce qui nous donnera une valeur négative de 0,8 comme plage. » C' est parfaitement correct. Tu pourrais le changer si tu le voulais. n'y a pas de moyen difficile et rapide de faire les choses avec du code. C' est comme ça que je le fais. Défilons vers le bas. Notre échelle est maintenant l'échelle de sortie point start, ce qui serait un. Ensuite, nous ajoutons la plage de points d'échelle de sortie, qui va être une valeur négative, multipliée par la profondeur. Si notre profondeur est un, alors notre plage de points d'échelle de points en sortie sera négative 0.8. Nous allons dire début plus négatif 0,8, ce qui nous donnera 0,2 d'échelle, ce qui est fantastique. Si notre échelle ou si notre profondeur est à zéro, la plage de points d'échelle de points en sortie multipliée par zéro ne sera rien. Ensuite, nous resterons avec une échelle d'un. Le problème avec l'échelle est que l'échelle et la traduction sont des propriétés de transformation, donc nous devrons ajouter de l'échelle dans cette ligne de code ici. Alors échelle, essayons-le, 0,5. Déplaçons notre souris ici. On y va. Ils sont vraiment petits, alors rendons les choses dynamiques. Je vais aller pour l'échelle des points de sortie de l'élément. Cela semble plutôt bien, et si nous faisons défiler ici et que nous définissons l'échelle de fin à zéro, les choses devraient devenir beaucoup plus petites. Peut-être que si nous changeons notre HTML, si nous changeons le 0.6 à une profondeur d'un, nous devrions réellement le voir disparaître. C' est nulle part où on peut le voir. C' est parce que notre fin est zéro, et il aura une échelle de zéro. Qu'est-ce qu'on fait ici ? Nous le changeons à 0,2 ou 0,3, ou si vous voulez 0,3, et puis nous y allons. Ce n'est pas tout à fait zéro. Je n'aime pas les objets ayant une profondeur d'un, cela signifie qu'ils ne bougent pas, donc je préfère aller pour 0,9, puis ça bouge légèrement. Nous avons maintenant notre échelle triée, c'est fait. Ce qui est ensuite, c'est le flou. Permet de mettre une valeur de flou ici sur notre sortie d'article. Quelle est la sortie du calcul du flou ? profondeur de départ du point de flou de point, que nous n'avons pas tout à fait configurée, et nous allons dire notre profondeur moins notre profondeur de départ de flou de point de sortie. On va mettre ça à l'intérieur d'une accolade pour que ça marche d'abord. Ensuite, nous allons dire multiplier par notre gamme de points de flou de points de sortie. Ce que cela fait, c'est dire que nous avons une profondeur, cela pourrait être zéro, donc zéro moins notre profondeur de départ, qui serait peut-être 0,5, donc vous auriez un négatif 0,5 multiplié par la plage de flou. Cela vous donnerait une valeur négative, ce qui est parfaitement bien pour un article avec une profondeur de zéro. Mettons juste dans cette valeur de sortie. Allons pour le flou et définissons notre profondeur de départ, et disons 0,5. Tout ce qui est à 0,5 ou plus commencera à obtenir une valeur bleue. Nous définirons ensuite notre gamme, et nous dirons 20 pour l'instant. Implémentons cela dans le HTML. Nous allons aller au filtre point de style point d'article, que nous n'avons pas encore utilisé. Nous avons réellement besoin d'une valeur de chaîne pour cela, et nous allons dire flou, et essayons juste cinq pixels en ce moment, déplacez notre souris un peu. On y va, on a des valeurs de flou. Maintenant, faisons cette dynamique. Ce qui est vraiment important à noter ici, c'est que vous avez besoin d'un pixel ou d'une valeur de mesure, donc nous allons simplement supprimer les cinq et mettre dans le flou des points de sortie de l'élément, et quand nous déplacons notre souris, nous y allons. Vous voyez un élément qui est plus loin est maintenant floue, et les éléments plus proches de nous, ils ne sont pas flous. Si nous changeons les valeurs de profondeur de départ, allons peut-être changer cela à 0.1, nous verrons que mon élément, qui est à 0.1, il n'est toujours pas floue, mais les éléments à 0.3 et 0.9, ils sont certainement floue. Si nous devions changer notre gamme à quelque chose comme 40, vous devriez voir que les articles plus loin deviennent encore plus flous. Nous avons notre configuration de flou. La seule chose que vous avez peut-être remarqué est que chaque fois que je change de code, donc je vais juste mettre un peu de code aléatoire ici, vous verrez qu'avant de déplacer ma souris, ces choses ne sont pas floues et ne sont pas mises à l'échelle, ce qui est problématique. Cela signifie que, à moins ou jusqu'à ce que nous bougions notre souris, les choses ne seront pas vraiment comme si elles étaient floues ou mises à l'échelle. Supposons cela et mettons en œuvre du code qui corrigera cela. Ce qui est génial, c'est que nous avons réellement mis à jour les entrées, mis à jour les sorties et mis à jour chaque élément de parallaxe. Nous pouvons simplement copier et coller ce code et aller au bas de notre code et le coller. Laisse le désindenter, et dès le début, vous verrez que maintenant les choses sont mises à l'échelle et que les choses sont floues. Ils sont légèrement décalés, ils ne semblent pas vraiment être au milieu, donc peut-être que nous pouvons faire est d'ajuster la position X et Y de la souris. Allons à notre souris X et Y, et nous allons aller pour la largeur intérieure du point de fenêtre et la hauteur intérieure du point de fenêtre. Peut-être qu'on ne devrait pas faire ça. Peut-être devrions-nous le multiplier par 0,5. Cela signifie que les X et Y seront au milieu de la fenêtre, comme si c'était à peu près là, ce qui a l'air génial. Si nous faisons des changements de code ou que quelqu'un vient visiter notre petit stylo ou notre site, cela signifie qu'avant qu'ils aient eu la chance de déplacer leur souris, les choses vont sembler floues, elles vont être mises à l'échelle, ce qui est fantastique. Nous avons fait un peu de mise à jour du code, nous avons implémenté des feuilles dans nos exemples de parallaxe, et nous avons fait une mise à l'échelle et un flou. Super-duper. Comme promis, je dois vous montrer comment télécharger vos propres actifs. Si vous ouvrez un nouvel onglet, vous pouvez rechercher l'hébergement d'images. Il y a un tas de façons différentes d'héberger des images. Certains d'entre eux ne fonctionnent pas, mais il suffit de l'essayer. Ce que nous visons, c'est que nous voulons obtenir une URL d'image que nous pouvons insérer dans CodePen. Allons commencer à télécharger. Nous choisissons un atout de parallaxe comme ce visage cool, nous disons, « Okay, nous allons télécharger ». Ensuite, nous copions son lien, vous collez son lien. ne s'agit pas de l'URL de l'image. Une fois l'image chargée, vous cliquez avec le bouton droit de la souris et vous dites « Copier l'adresse de l'image », collez-le à nouveau, et vous verrez qu'il indique point PNG ou point JPEG, quel que soit votre chargement. Vous pouvez ensuite copier cette URL, puis à l'intérieur de votre HTML, vous pouvez le coller. On y va. Vous n'avez pas besoin de CodePen pour télécharger des images ou pour mettre des images dans vos projets. Maintenant, nous avons un visage cool, et nous n'avons pas besoin d'utiliser CodePen Pro. Ou si vous n'utilisez pas CodePen du tout et que vous êtes sur votre ordinateur local, il est assez facile de référencer des images sur le système de fichiers en utilisant des URL relatives. Super facile. Il y a peu de choses que nous pourrions ajouter et mettre en œuvre qui le rendraient encore plus réaliste, et peut-être même lui donner un peu de facteur wow. Si vous pouvez penser à tout ce que vous aimeriez essayer d'implémenter, je vous suggère d'essayer de le coder vous-même, amuser, de faire quelques erreurs, et si vous avez besoin d'aide ou que les choses ne fonctionnent pas comme vous l'attendez, partagez votre URL dans la section Commentaire de la classe, et je vais essayer de vous aider. 9. Planifier comme un amateur: Lorsque vous concevez et codez différentes versions de l'effet Parallax, il peut y avoir beaucoup de pièces mobiles. Ce n'est pas seulement le cas pour la parallaxe, mais aussi pour d'autres pièces de conception d'interaction. planification devient une partie essentielle du processus et encore plus essentielle lorsque vous travaillez avec une équipe. Essayer de comprendre tout à l'avance, comme un professionnel pour le coup droit ne va tout simplement pas fonctionner, ou si vous essayez de faire fonctionner tout comme par magie pendant que vous codez n'est même jamais arrivé ou cela prend beaucoup plus de temps que si vous êtes juste de planifier au début. Comment prévoyez-vous ? C' est une excellente question. Je planifie de deux façons, et je les fais tous les deux à plusieurs étapes d'un projet. La première méthode consiste à écrire ce que je veux arriver. Je commence par écrire assez largement et de manière descriptive. Ma première écriture pourrait ressembler à ça. l'utilisateur déplace sa souris, les éléments se déplacent. J' irais alors à quelque chose comme ça. l'utilisateur déplace sa souris de gauche à droite, les éléments se déplacent de droite à gauche. Ensuite, je vais le changer à nouveau, l'utilisateur déplace sa souris de gauche à droite, les éléments se déplacent inversement de droite à gauche à un rapport. Ensuite, lorsque l'utilisateur déplace sa souris de gauche à droite, chaque élément se déplace inversement de droite à gauche à une vitesse relative à sa distance de l'utilisateur, vous pouvez voir comment j'ajoute de plus en plus de détails à ma description ici. Enfin, ça finira comme ça. l'utilisateur déplace la souris horizontalement, chaque élément se déplace inversement à une vitesse relative à sa distance par rapport à l'utilisateur. Cela peut sembler un peu complexe, et c'est pourquoi je n'ai pas commencé à écrire complexe parce que c'est un peu surprenant d'esprit. Cette description de fin est mon objectif final. Je commence avec cela à l'esprit et vous pouvez voir comment a changé au fil du temps, plus je suis sorti de ma tête, plus je pourrais être détaillé, j'ai fini par le rendre succinct et un peu plus générique. Ma prochaine étape consiste à décomposer mon objectif en morceaux gérables. Quand les choses sont tombées en panne, tout semble plus facile et relativement simple. Ces morceaux font partie de mon plan d'action. Ce qui est important à comprendre, c'est que je n'ai pas créé tout le plan d'action en même temps. Ma prochaine écriture pourrait finir par ressembler à ça. Suivez la souris X en utilisant les événements de déplacement de la souris. Comparé X de la souris à la largeur de l'écran pour créer une fraction. Connectez cette fraction à une plage d'éléments X. Faites ceci pour chaque élément et appliquez une profondeur. Ensuite, pour chaque point, je pourrais le décomposer encore plus loin. La souris de piste X en utilisant les événements de déplacement de la souris, je peux faire quelques notes comme ceci. Un, ajouter l'écouteur d'événement, deux, créer une fonction de nom, gérer le déplacement de la souris, peut-être trois, créer une variable qui stocke l'événement X à l'intérieur de la poignée de déplacement de la souris. On y va, tu peux voir comment j'écris tout ça. Je n'ai pas à tout faire en même temps. Ce qui finit par se passer est que ces lignes peuvent devenir des commentaires dans votre JavaScript, que vous pouvez ensuite suivre très facilement. Là, comme vos pointeurs dans un labyrinthe, mesure que vous obtenez de mieux en mieux, vous pouvez vous retrouver à sauter des parties de la planification. C' est parfaitement correct. Ce qui est vraiment important à retenir, c'est qu'à tout moment ou à n'importe quel moment du processus, vous pouvez faire un plan. Il suffit d'écrire ce que vous voulez arriver sous forme de points, soit sur un commentaire Javascript, ou sur un morceau de papier sur un document texte régulier. J' ai un tapis massif sur ma table la plupart du temps, donc je peux juste prendre rapidement des notes, je peux planifier rapidement. Répartissez ce qui doit se passer en anglais ou dans la langue que vous parlez le mieux, puis écrivez le code pour cela. Le deuxième type de planification que je fais est de mettre un stylo au papier ou un crayon à l'iPad. Je dessine des choses, je travaille les choses, je dessine les documents, je dessine avec un écran Toile comme je dessine avec une souris, je dessine des éléments. Je dessine tout ce que je peux, puis je commence à mettre de fausses valeurs dans des endroits. Ma souris X et ma largeur d'écran, ma plage de sortie, puis je commence à faire des calculs. Je représente des inconnus avec Ys et Bs et Xs. Je fais les calculs lisibles et de préférence en JavaScript ou quelque chose qui peut être facilement transféré en JavaScript. Ensuite, j'essaie le même dessin avec des valeurs différentes, je vois quels résultats j'obtiens et puis j'essaie l'interaction à différents stades, quand ma souris est sur la gauche, quand ma souris est au milieu, quand ma souris est tout le chemin sur la droite. Ensuite, une fois que vous pensez savoir ce qui se passe, remplacez les valeurs inventées par des noms de variables. Ces croquis de planification sont dorés, c'est comme si vous aviez eu ces moments de brillance, ces moments lucides où vous n'êtes qu'un génie, que vous enregistrez. Vous mettez le stylo sur le papier, vous faites tous vos calculs, et ensuite vous utilisez un plus tard où vous n'êtes pas, les sentiments sont brillants. Il y a une très petite chance que vous puissiez vous souvenir tous ces calculs dans votre tête pendant que vous codez. Je trouve qu'il est préférable de l'écrire et ensuite de le transférer au code. Ce qui est génial dans la planification, c'est qu'elle n'a pas besoin d'être parfaite et que vous n'avez pas besoin de tout faire en même temps. Vous pouvez itérer dessus rapidement. Vous pouvez montrer aux gens, vous pouvez améliorer dessus et vous pouvez y revenir chaque fois que vous êtes coincé. Vous pouvez utiliser un mélange d'écriture et de dessin quand vous le souhaitez. 10. Capturer la position du scrolling: Maintenant que nous avons créé notre première expérience de parallaxe, nous pouvons commencer à créer une expérience de parallaxe défilant. C' est vraiment amusant à créer et la plupart des gens sont totalement hypnotisés par eux. Mais que voulons-nous réaliser ? La première chose que je veux atteindre est, je veux créer une valeur de fraction d'entrée Scrolly à laquelle je peux connecter mes valeurs de sortie. La deuxième chose que je veux réaliser est, je veux alors que chacun de mes éléments se déplace dans la direction opposée à la direction de défilement, mais proportionnel à leur profondeur. Plus un élément est éloigné, plus il se déplace rapidement cette fois, mais dans la direction opposée à la direction de défilement. La seule chose que nous devons surveiller avant de sauter dans le code est que le maximum que nous pouvons faire défiler est en fait la hauteur du document moins la hauteur des fenêtres. Rappelons-nous cela lors de la configuration de notre valeur de fin d'entrée Scrolly. Sautons dans le code. Commençons par faire nos documents, faire défiler le document. Jetons dans notre HTML ici. Nous pouvons créer des choses appelées parallax-container. On y va. Je vais juste mettre ce code en retrait. Collons cela et nous pouvons copier et coller le conteneur parallaxe comme ça. C' est bien. Ensuite, nous pouvons lui donner une classe alt et celle-ci une classe alt, afin que nous puissions changer les couleurs d'arrière-plan. Ensuite, dans le CSS, nous pouvons coller ceci et lui donner une hauteur ou une hauteur min de 100 VH, ce qui est 100 hauteur de spectateur. Nous pouvons dire .parallax-container.alt et nous pouvons donner à cela une couleur de fond. Que choisirons-nous ? Allons chercher des actifs. Choisissons un vert vraiment clair peut-être, peut-être un vert beaucoup plus foncé ou nous pourrions même aller pour tableau comme rose. On y va. Collons ça ici. Maintenant que nous faisons défiler vers le bas, il y aura des divs verts et roses. Ça nous montre combien on fait défiler. Nous avons également cette barre de défilement sur le côté droit. On y va. Maintenant, nous avons un document qui défile. Nous pouvons également ajouter tous ces éléments de parallaxe dans le deuxième conteneur de parallaxe. Cela signifie que lorsque nous faisons défiler vers le bas, où sont-ils ? Je n'en ai aucune idée. C' est parce que nous n'avons pas mis de position relative sur notre conteneur parallaxe. Alors que nous faisons défiler vers le bas, nous y allons. Ça a l'air vraiment sympa. Les couleurs fonctionnent vraiment bien ensemble. On a un et deux divs avec nos feuilles. Maintenant, notre mousemove fonctionne. Je vais le commenter pour l'instant. Au lieu d'écouter une mousemove, ça ne fonctionnera plus. Nous allons commencer à travailler avec un écouteur d'événement qui écoute un événement scroll. Comment on fait ça ? Eh bien, au lieu d'écouter une mousemove sur la fenêtre, nous allons dire document.AddeventListener et nous allons écouter un événement scroll et nous allons dire handlescroll. Ensuite, pour notre handlescroll est égal à une fonction. Tout cela devrait sembler assez familier. Nous allons simplement enregistrer quelque chose pour nous assurer que cela fonctionne réellement. Défilement. Ouvrons notre console. Au fur et à mesure que nous faisons défiler, nous avons un tas de défilement qui se passe. Comment pouvons-nous savoir à quel point on fait défiler ? C' est une très bonne question. La façon dont nous allons faire cela est que nous allons travailler sur var Scrollamt égal et nous allons aller pour document.DocumentElement.scrollTop. Voyons si ça marche. On va dire ScrolAmt et ScrolAmt. Nous ouvrirons à nouveau notre console. Disons que et au fur et à mesure que nous faisons défiler, nous voilà. Notre ScrolAmt arrive. Le dernier est zéro. Comme on va jusqu'au bas, c'est 951. Ce sont nos montants de défilement. Peut-être que nous pouvons maintenant comprendre quelle est notre quantité maximale de défilement. Comment on fait ça ? Encore une fois, nous allons utiliser ce document.DocumentElement. Nous dirons que scrollMax est égal à document.DocumentElement.scrollHeight. On va le comparer comme ça. On y va. Faisons défiler ça. Le nombre maximal de défilement est de 1268. Ça ne marche pas vraiment, n'est-ce pas ? Mais rappelez-vous, la hauteur du document ne sera pas la même que la quantité de défilement parce que nous avons toujours la hauteur de la fenêtre à une hauteur digne. Faisons moins fenêtre.InnerHeight. Défilons à nouveau, 951, 951. On y va. Nous avons notre valeur constante, nous avons notre valeur finale. Maintenant, nous pouvons prendre ces valeurs et crée une entrée à partir d'eux. Je vais juste les copier pour l'instant. Donnons-nous juste un peu plus d'espace. Nous allons aller à nos valeurs d'entrée et nous allons dire Scrolly et nous allons créer un nouvel objet ici et nous allons dire commencer. Notre départ sera nul. Nous pouvons changer cela à une valeur autre que zéro. Mais dans ce cas, nous voulons suivre la position de défilement de notre document entier. Nous allons alors avoir une valeur finale, qui va être, notre scroll max. Eh bien, tout ça. Maintenant, c'est vraiment, vraiment long. Ce que nous pouvons faire ici est dire var et nous pouvons dire, HTML équivaut document.DocumentElements. On y va. Ensuite, nous pouvons remplacer cela et cela. Notre valeur finale, ça va être ça. Alors notre ScrolAmt, ça va être notre courant. On pourra y arriver un peu plus tard. Le courant sera nul au début. Nous avons aussi besoin de notre fraction et de notre gamme. Nous allons nous entraîner un peu plus tard, et nous allons travailler notre gamme juste en dessous de l'entrée. Allons pour Input.scrolly.range est égal, et puis nous pouvons simplement copier et coller ceci. scrolly.end moins défilement.Démarrer. Ce qui nous donnera notre gamme. Maintenant, ce qui est vraiment important dans la plage, c'est qu'elle changera dès que la valeur finale du Scrolly change et que la valeur finale changera lorsque le navigateur redimensionne. Mettons à jour cette valeur. Si on passe au redimensionnage, le MouSex, Mousey. Allons et mettez.Scrolly.End. Quelle était notre valeur finale ? Défilons ici. Copiez et collez ceci. Faites défiler tout le chemin vers le bas. Notre valeur finale est mise à jour, puis notre valeur de plage est également mise à jour. Copions le calcul de la plage Scrolly et collons-le ici. Maintenant, on voit HandlesCrolly. Nous avons le ScrolAmt, qui va maintenant être notre input.Scrolly.Current. Ce sera notre HTML.ScrollTop. Alors notre input.scrolly.fraction va être quoi ? Dans ce cas, il va être notre courant divisé par le maximum, donc input.scrolly.end. Mais rappelez-vous nos calculs précédents, si vous pouvez juste regarder un peu plus haut ici, mettre à jour les entrées, est notre fraction de la souris d'entrée est notre mousex.Current moins notre mousex.Commencez divisé par notre gamme d'entrée MouSex. Nous allons copier ce format. Allons ici, manipulons le défilement et nous allons copier et coller ceci. Ceci est juste plus précis dès que nous commençons suivre notre document d'une position non nulle à une position qui n'est pas la hauteur totale de notre document, nous en aurons besoin pour calculer la fraction réelle. Notre scrolly.Fraction va être le scrolly.Current moins le scrolly.Démarrer, qui dans ce cas est juste zéro et nous allons diviser par le scrolly.Range, qui dans ce cas va également être la valeur de fin scrolly. C' est gérer le parchemin. Mais maintenant, vous pouvez être comme, eh bien, pourquoi l'autre à l'intérieur des entrées de mise à jour vient avec cela là-dedans. Bien sûr, on peut. Faisons ça. Copiez et collez, mettez à jour les entrées de notre HandleScroll. On y va. Nous allons juste couper ça, enlever tout ça, et nous allons mettre ça dans nos entrées. On y va. Notre contribution arrive maintenant. Comment le connecter maintenant à une sortie ? Nous allons mettre à jour nos résultats. ce moment, je vais juste commenter nos sorties pour que rien ne fonctionne du tout. Ça ne marche pas de toute façon. Ce que nous pouvons faire ici, c'est que nous pouvons juste mettre à jour notre position Y. Notre output.y.Current est notre sortie .y.end moins notre entrée. Nous pouvons aller scrolly.Fraction, multiplié par notre output.range. Voyons si ça marche. Alors que nous faisons défiler, quelque chose se passe-t-il du tout ? Vous remarquez quelque chose ? Non, je ne m'en aperçois pas trop. se passe quelque chose ici ? Qu'en est-il des sorties de mise à jour ? Le Y.Currents fonctionne ? Oui, ça devrait fonctionner, mais rappelez-vous qu'on doit appeler les sorties de mise à jour. ceci ou nous allons copier les sorties de mise à jour et mettre à jour chaque élément de parallaxe. Mettons-le après avoir appelé la mise à jour et mis fonction dans notre gestionnaire d'événements HandleScroll. Nous pouvons également simplement couper ceci et peut-être le mettre juste ici pour qu'il soit un peu plus proche de notre gestionnaire d'événements HandleMove. On y va. Maintenant, voyons ce qui se passe pendant que nous faisons défiler. Il se passe des choses. Vous pouvez voir que la parallaxe fonctionne certainement. Nous avons un peu de flou, nous avons une certaine échelle, et tout est lié à notre position de défilement. Nous avons réalisé ce que nous avons décidé de faire dans cette vidéo. Nous avons connecté une entrée à une sortie en utilisant notre position de défilement. Ça a l'air très bien. Il y a quelques problèmes avec cela jusqu'à présent cependant, nous allons le couvrir dans la prochaine vidéo. Je te verrai là-bas. 11. Des valeurs d'entrées uniques pour chaque élément: Notre expérience de parallaxe sur la dernière vidéo est plutôt bonne. Mais si vous regardez de près, quelque chose n'est pas tout à fait correct. Je vais te montrer. Si je vais jusqu'au bas de mon document et je commente ces entrées de mise à jour et les fonctions de sortie de mise à jour, et j'arrête d'écouter les événements de défilement. Vous verrez que toutes mes feuilles ou tous mes éléments de parallaxe, ils sont centrés au milieu de la page. Alors, si je fais défiler un peu vers le bas, ce sont eux aussi. Maintenant, quand je reviendrai dans mon code ici et mon code ici, vous verrez que tous les éléments de parallaxe sont au bas de la page. Pourquoi c'est ça ? Il va y avoir deux raisons pour que ça arrive. La première raison est que lorsque nous faisons défiler jusqu'à notre calcul du courant de sortie, vous verrez que nous commençons par le y.end. Fondamentalement, nous allons commencer par le y.end et ensuite à mesure que la valeur de la fraction augmente, donc nous nous rapprocherons de plus en plus de la valeur de départ. Au lieu de cela, nous voulons le dire, commençons par la valeur de début et à mesure que la valeur de la fraction augmente, nous allons nous rapprocher de la valeur finale. Cela semble un peu mieux, et maintenant si nous faisons défiler un peu plus vers le haut, nous verrons que lorsque nous définissons notre valeur de départ, nous avons effectivement commencé à moins 150. On va commencer à zéro. Maintenant, tout devrait commencer exactement au bon endroit. Lorsque nous faisons défiler vers le bas, nous verrons que ces éléments dans ce conteneur rose, ils ne commencent pas à leur place d'origine. C' est tout ce que nous voulons réaliser dans cette vidéo. Lorsque nous arrivons à un élément ou lorsque nous faisons défiler vers un élément, nous voulons qu'il soit dans la position d'origine. La raison en est que, ces éléments se déplacent en fonction la fraction de défilement de tout le chemin en haut jusqu'en bas. Ce que je veux dire, c'est que je veux seulement que la fraction de défilement soit nulle ici et une sur ici, plutôt que tout le chemin en bas et tout le chemin en haut. Je ne veux pas que les sorties de chaque élément soient basées sur la position de défilement du document entier. Je veux qu'il soit basé sur quand il est visible. La question que nous devons nous poser est, à quelle fraction de défilement un élément devrait-il être à sa position d'origine ? Parce qu'à l'heure actuelle, ils ne sont dans leur position d'origine que lorsque la fraction de défilement est à zéro. Alors, comment on s'en sort ? La clé réside dans notre mise à jour chaque fonction d' élément parallaxe à l'intérieur du tableau d'éléments pour chaque boucle. Maintenant, pour chaque élément, nous allons réellement créer sa propre entrée, donc l'entrée d'élément. Ce que nous pourrions faire, c'est que nous pourrions réellement coder chaque entrée unique pour chaque élément, cela prendra des heures. Nous allons utiliser du code pour le régler pour nous. Maintenant, notre entrée d'élément, nous allons avoir YScroll, et dans notre YScroll, nous allons avoir un début et nous allons avoir une fin. Nous mettrons à jour ces valeurs dans une seconde. La prochaine chose dont nous avons besoin est une plage, donc si nous faisons défiler ici, où est-ce qu'on travaille réellement sur la plage ? Eh bien, c'est la sortie, nous y allons, le scrolly.Range, alors copions cela et faisons venir ici. Au lieu de dire input.scrolly.range, nous allons dire ItemInput.scrolly.range et ItemInput.scrolly.end, moins ItemInput.scrolly.start. C' est vraiment important. Cela signifie que nous pouvons spécifier un début et une fin pour chaque élément. ce moment, nous pouvons coder une valeur en dur. Au lieu d'être zéro, on pourrait dire, à 450, c'est là que je veux que ma fraction zéro soit et ma fraction finale, je veux qu'elle soit à 800. Lorsque j'ai fait défiler 800 pixels vers le bas de la page, je veux que ma fraction soit une, et quand j'ai fait défiler 450 pixels vers le bas de la page, je veux que ma fraction soit nulle. Commençons à déconnecter certaines valeurs. Ce que je vais faire ici, c'est que je vais entrer dans mon HTML et je vais commenter tout un tas de ces divs, juste que nous avons un div avec lequel travailler. Ça veut dire qu'on n'aura qu'une seule série de journaux. Alors que je fais défiler, est-ce que ça marche ? Ça n'a pas vraiment l'air, peut-être qu'il ne fait pas si bien défiler. On peut vérifier qu'il n'y a pas d'erreurs. Il y a quelques erreurs, il suffit de cliquer dessus. Nous dirons, iteminput.scroll.end, c'est parce que nous avons orthographié Scrolly différemment à YScroll. Changons YScroll en Scrolly, voilà. En faisant défiler vers le bas, nous verrons que notre feuille fait un léger mouvement. Ce que nous avons ici, c'est que nous avons notre gamme de défilement. Que devons-nous faire d'autre maintenant ? Nous devons déterminer notre valeur de fraction. Où déterminons-nous notre valeur de fraction ? Eh bien, on s'en occupe ici. Nous avons notre fraction Scrolly, alors copions et collez cela, et nous dirons ItemInput.Scrolly.Fraction égale, et c'est vraiment important. Nous allons toujours le baser sur l'entrée.Scrolly.Current, qui est basé sur les pages défilent, mais nous allons dire moins l'ItemInput.Scrolly.Start, et nous allons diviser par l'ItemInput.Scrolly.Range. Super important. La prochaine chose que nous devons faire est de trouver un nouveau résultat. Pour le moment, nous utilisons les extrants globaux et nous faisons quelques calculs ici. Allons à nos sorties, et nous verrons cette sortie.Current est calculé ici. Donc, nous allons juste créer une nouvelle variable ici, et nous dirons si notre ItemOutputyCurrent, parce que nous avons déjà un ItemOutput. Le fait que nous n'avons besoin que d'une seule valeur signifie que nous n'avons pas à utiliser un objet, et ici nous pouvons dire outputy.Start, ce qui est génial parce que nous allons toujours utiliser nos valeurs Outputy.Start et end, puis au lieu du défilement d'entrée fraction, nous allons aller pour la fraction de défilement d'entrée d'élément. Donc, nous avons notre ItemOutputyCurrent, maintenant nous pouvons l'appliquer à notre valeur y ici. Le fait est que, notre sortie .y.current, est actuellement un peu inexacte. Si nous avons défilé vers le bas, et peut-être que nous pouvons juste commenter ces éléments de retour dans. Alors que nous faisons défiler vers le bas, vous ne pouvez pas vraiment le voir si bien ici, alors augmentons notre valeur finale à quelque chose comme 3000. En faisant défiler ici, vous verrez que les éléments qui sont plus loin se déplacent plutôt rapidement. Nous ne voulons pas vraiment qu'ils se déplacent rapidement ou qu'ils semblent bouger rapidement. Si nous changeons cela à 1 000, peut-être pourriez-vous le voir un peu mieux. Lorsque je fais défiler vers le bas, je ne veux pas vraiment que les éléments qui sont plus éloignés apparaissent comme s'ils se déplacent plus vite. Comme nous l'avons dit dans la vidéo précédente, je veux que les éléments qui sont plus loin se déplacent plus rapidement dans la direction opposée, ce qui signifie que lorsque je fais défiler vers le bas et que le document se déplace vers le haut, je veux que les éléments qui sont plus loin se déplacent vers le bas à un rythme plus rapide. Essayons ça. Ici, où nous travaillons sur notre position. Au lieu de commencer par les courants y et de réduire le courant y multiplié par la profondeur, je vais juste commencer par les courants y et multiplier la profondeur. Cela signifie que plus il est profond, plus vite il va bouger. Essayons ça. Pendant que je fais défiler, quelque chose se passe ? Non. C'est parce que nous utilisons toujours notre courant de sortie. Utilisons notre sortie d'élément y courant, et cela va être par élément. On y va. Nous allons commencer à une portée de 450 et terminer à une portée de 800. Maintenant, au fur et à mesure que je bouge, vous verrez que les choses vont un peu mieux, et parce que nous faisons défiler entre 450 et 800, nous n'avons pas besoin d'utiliser cette valeur massive ici, donc nous pouvons revenir à 300. Au fur et à mesure que nous faisons défiler, nous voilà. Les choses ont l'air un peu mieux. Si nous changeons cela à 500, peut-être pourrons-nous en voir un peu plus. Au fur et à mesure que nous faisons défiler, vous verrez que l'élément supérieur va en fait avec la page au fur et à mesure qu'elle défile vers le haut. Ensuite, les éléments qui sont plus loin se déplacent en fait vers le bas alors que nous faisons défiler vers le bas. La page monte, nous défilons vers le bas et les éléments qui sont plus loin défilent vers le bas, se déplacent vers le bas à la même vitesse ou plus rapidement que les éléments qui sont plus proches de nous. C' est un peu complexe. Revenons à notre boucle. Ce qui se passe ici, c'est que nous fixons le début et la fin. Je vais juste commenter ces deux sections à nouveau. Nous avons juste une feuille ou un objet de parallaxe. Nous pouvons réellement faire un enregistrement de console ici. Je vais copier ça. Je vais ensuite passer à nos commentaires. Je vais ensuite enregistrer notre défilement actuel. Allons faire défiler et puis je vais copier ceci et coller ceci. Ouvrons une console et on ne veut plus de profondeur. Mais ce que nous voulons, c'est que nous voulons la fraction. Regardons ça. On y va. Au fur et à mesure que nous faisons défiler cet élément, lorsque nous serons là, vous verrez que la fraction est négative 1,26. Bizarre ? Mais regarde ça. Lorsque nous faisons défiler et que vous verrez que la position de défilement augmente, vous verrez que la valeur de la fraction est vraiment proche maintenant. Quand nous arrivons à une valeur de 450, nous y allons. La fraction est nulle. Lorsque vous obtenez une valeur de 800, vous verrez que la fraction va à un ou juste au-dessus d'un. Cela signifie qu'il se déplace entre la valeur de début et de fin que nous avons spécifiée dans notre sortie. Comme se déplaçant entre zéro et 500, entre une plage ou une plage de défilement de 450 et 800. C' est super, super cool. Maintenant, nous ne voulons pas que chaque article commence à 450 et se termine à 800. Nous voulons commencer là où il est visible et finir quand il n'est pas visible. Comment on fait ça ? Eh bien, l'un des meilleurs moyens que nous pouvons faire cela est dire, item.OffsetParents.OffsetTop. Un parent offset est vraiment important. Dans notre CSS, vous verrez que notre position relative est déclarée. Cela signifie qu'il s'agit d'un parent offset. Cela signifie que tout ce qui a une position en plus statique est un parent offset. A l'intérieur de notre conteneur parallax, nous avons nos articles parallax. Un article de parallaxe, dira : « Qui sont mes parents de décalage ? » et le conteneur de parallaxe dira : « Moi, je suis. » Ensuite, nous allons travailler sur le haut de décalage, la distance entre le conteneur de parallaxe et le haut du document, et ce sera notre valeur supérieure qui est assez cool. La prochaine chose est de rester assis à la fin. Nous allons prendre ceci et nous allons en faire notre fin mais nous allons ajouter la fenêtre.innerHeight, comme ça. Nous allons dire que nous allons commencer au OffsetParents.OffsetTop. La distance entre les parents décalés et le haut du document et la fin sera distance entre le haut des parents et le haut du document plus la fenêtre.innerHeight. Plutôt cool. Vérifie ça. Au fur et à mesure que je fais défiler, je devrais arriver à environ ici, qui est une fraction de zéro, position de défilement de 319. C' est là que va être notre article de parallaxe. Fermons ça, et nous ferons exactement la même chose ici. Vérifie ça. Plutôt cool. Si nous venons d'annuler et d'annuler, en commentant essentiellement dans tous nos éléments de parallaxe. Maintenant, ça va commencer au milieu ici. Comme nous faisons défiler vers le bas, vous verrez que quand nous arriverons à cette position juste ici, hey, il va aussi être au centre exactement où nous l' avons mis à l'origine ce qui est fantastique. Si vous ne voulez pas utiliser OffsetParents.OffsetTop, c'est bon. Mais ce qui est vraiment important, c'est que vous utilisez quelque chose qui ne change pas sa position car si vous calculez dynamiquement les valeurs de début et de fin et que vous le basez sur quelque chose qui change son offsetTop, les choses peuvent devenir vraiment, vraiment désordonnées et déroutantes très rapidement. De cette façon, si nous devons juste copier et coller un tas de ce code et le mettre dans notre prochain conteneur de parallaxe et notre prochain conteneur de parallaxe. On peut changer un tas de ces valeurs. Nous pouvons changer cela de l'actif 1 à peut-être 60 et 61 et 67. Allons ici, je vais changer ça à 2-1 et à zéro. On va changer ça en 11-21-41. En faisant défiler vers le bas, voyons ce qui se passe. D'accord. Ils apparaissent tous exactement au bon endroit que nous arrivons au parent offset étant en haut de l'écran ce qui est fantastique. C' est vraiment cool, et je vous encourage à utiliser ce offsetParents.OffsetTop pour obtenir que les choses soient exactement là où vous les avez définies à l'origine. Bien sûr, vous n'avez pas besoin d'utiliser l'échelle et vous n'avez pas besoin d'utiliser le flou. Ils rendent les choses un peu plus réalistes. C' est essentiellement tout ce que vous devez savoir sur le défilement parallaxe et l'utilisation de l'effet de parallaxe avec des événements de déplacement de souris. Bien joué. Je vais vous montrer quelques choses de plus avant de coder une expérience entière, ce ne sont pas seulement des exemples. Sweet, je te vois dans la prochaine vidéo. 12. Utiliser la position de la souris et du scrolling: Vous vous demandez peut-être si vous pouvez utiliser la position de la souris et la position de défilement ensemble pour modifier l'effet Parallax. La réponse est, oui. Dans cette vidéo, je vais vous montrer comment. Si nous faisons défiler jusqu'au bas, nous allons décommenter notre morceau de code que nous avons commenté. Nous disons essentiellement, « Écoutons à nouveau l'événement de déplacement de la souris ». Heureusement, nous n'avons supprimé aucun de nos codes. On a juste besoin d'emménager ici. Nous pouvons juste le commenter à nouveau. Mais notre y.current a été modifié pour le faire fonctionner pour la position de défilement. Ce que nous allons faire, c'est que nous allons monter ici et nous allons mettre une nouvelle valeur. Mettons un objet comme ça, et je vais juste copier le courant de début et de fin de x, et le y que nous allons appeler Scrolly. Maintenant, nous devons créer et copier et coller un tas de valeurs qui ont utilisé la position y dans notre code. Commençons par ici. On peut dire Scrolly, et on va juste mettre à jour ça. Puis obtenu un tas d'entrées, ce qui est génial. Ensuite, notre sortie ici, nous pouvons mettre à jour l'entrée Scrolly, Output.Scrolly gamme. Ensuite, nous avons notre sortie .Scrolly start, Output.Scrolly gamme. Je pense que c'est à propos de ça. Fantastique. Vérifions simplement que ça bouge. Vous pouvez voir que cela répond à notre déplacement de la souris sur l'axe des x et il répond à notre défilement sur l'axe des y. Maintenant, ce que je veux arriver, c'est que je fais défiler vers le haut et vers le bas, et que je déplace ma souris de haut en bas, je veux que l'axe y ou l'axe vertical réponde aux deux. Comment on fait ça ? La clé réside dans ce morceau de code juste ici. Ce morceau de code que je viens de mettre en évidence, c'est notre morceau de code de défilement. La prochaine chose que je veux ajouter ici est code que nous avons supprimé dans la vidéo précédente. Je vais dire output.y.current, et peut-être que vous pouvez juste vous assurer que tout cela est arrangé pour que nous sachions que ceux-ci sont séparés. sortie.Y.Current, je vais dire moins, et accoler à nouveau, sortie.y.current multiplié par la profondeur. Nous avons notre valeur de défilement ici, puis nous avons notre valeur de souris ici, et nous les ajoutons ensemble. Vérifie ça. Maintenant que je fais défiler, semble plutôt bien. Joli. Parfois, ces éléments de parallaxe empiètent sur les autres zones d'éléments de parallaxe. Un moyen vraiment facile de corriger cela est d'aller à votre CSS, et nous pouvons dire conteneur parallax, nous pouvons juste définir ceci pour débordement caché. Juste comme ça quand on fait défiler, il se cache derrière. On y va. C' est ainsi que vous utilisez la position de la souris et la position de défilement dans le même document. C' est vraiment cool, vraiment amusant d'utiliser les deux en même temps. 13. Le code des autres: Parlons d'utiliser du code que vous n'avez pas écrit. Cela pourrait être en utilisant un plugin, en utilisant du code que vous avez copié sur Internet, ou en utilisant quelque chose comme jQuery. Beaucoup de plugins et de frameworks sont tout simplement incroyables. Ils sont faits par des gens super intelligents et ça rend nos vies beaucoup plus faciles. C' est comme externaliser une partie de votre codage à quelqu'un d'autre. Il y a des plugins faits pour les développeurs et des plugins pour le grand public. plugins pour les développeurs rendent le codage plus facile et plus standardisé. Ils ont également tendance à se concentrer sur des parties spécifiques du processus et vous permettent de gérer le reste. Plugins qui sont faits pour le grand public ou plugins qui disent : « Nous faisons tout ! » et généralement assez sceptique, et vous devrez peut-être passer des heures à lire leur documentation et leurs directives pour faire fonctionner quoi que ce soit. L' inconvénient de la plupart des frameworks et plugins est que du temps, vous n'aurez pas besoin d'utiliser tout ce qu'il a à offrir. C' est l'équivalence d'acheter un ensemble d'outils et d'utiliser uniquement un marteau. En outre, si le plugin que vous utilisez ne fait pas exactement ce que vous voulez, alors vous êtes coincé. Vous devrez commencer à partir de zéro. Tout ce que vous avez à faire du hack-work qui finit souvent par prendre beaucoup plus de temps qu'une bonne planification et un code écrit à la main. Ensuite, il y a du code écrit par d'autres personnes. Vous pouvez trouver ce type de code sur support, dans les articles de blog, sur Stack Overflow, où que vous soyez. Parfois, ce code est fantastique, rien de mal, c'est incroyable. D' autres fois, ce n'est pas génial du tout. Le meilleur type de code pour vous est le code que vous comprenez et vous assurez-vous qu'il fonctionne pour votre projet et vos navigateurs que vous essayez de prendre en charge. 14. Mettre tout en œuvre: Je vous ai montré un tas de choses, beaucoup sur les entrées, les sorties et l'effet de parallaxe. Maintenant, c'est à votre tour de créer quelque chose. Ne vous poussez pas à créer un grand site Web en utilisant tout ce que vous avez appris en classe. Prenez une partie de ce que je vous ai montré et faites un petit projet ou faites quelques petits projets, ou tout simplement travailler dessus tous les jours. Lorsque vous êtes prêt à le partager avec votre mère, avec le monde entier, et avec nous, envoyez un lien de quelque chose que vous avez fait. Il peut être sur CodePen ou il pourrait être hébergé en utilisant Surge, GitHub Pages ou même votre propre site Web. Si vous avez besoin d'aide, n'oubliez pas de partager un lien vers votre code. Dans le reste de cette vidéo, je vais créer un petit projet à moi en utilisant quelques choses que j'ai enseignées en classe. J' ai inclus ceci pour vous montrer que je ne suis pas parfait. Le développement est difficile. Vous verrez que j'ai fait des erreurs et que j'oublie parfois des choses assez importantes. Mais j'espère que cela vous montre comment le vrai développement se passe et j'espère que cela vous incite à créer, à jouer et à expérimenter sans la pression d'être parfait. Je vais jeter un oeil rapide dans ma planification et ce que j'ai est un conteneur avec un tas de feuilles différentes dedans. Toutes ces feuilles vont être des éléments de parallaxe. Ils vont avoir des profondeurs différentes. Ils vont parfois être un peu flous, mais ils ne vont pas être mis à l'échelle. Ils vont avoir peut-être une largeur et une hauteur aléatoires, et chaque feuille va être générée aléatoirement par JavaScript parce que je n'ai pas envie de mettre, que beaucoup de feuilles à l'intérieur de mon HTML et je ne me sens certainement pas comme les coiffer. Ils vont avoir une rotation aléatoire, un flou aléatoire ou une profondeur aléatoire, et ils seront tous des éléments de parallaxe. Ensuite, au-dessus de ce conteneur, il y aura une usine de parallaxe avec une entrée e-mail et un bouton d'inscription et ce sera tout. Mettons-nous à craquer. Ce que j'ai, c'est que j'ai quelques valeurs de couleur que j'aime vraiment. Commençons par ce corps. Je veux un corps sombre, alors peut-être allons-y pour le noir, bgc, peut être noir et aussi je vais mettre une marge à zéros. n'y a pas de marge autour de mon corps. Prenons un exemple, feuille allant et son d'un conteneur de parallaxe. À l'intérieur de mon conteneur de parallaxe, je veux un élément de parallaxe, puis à l'intérieur, je pourrais avoir une image, mais je vais en fait mettre l'image sur l'arrière-plan. Allons-y pour .leaf. Ensuite, il va avoir une image de fond aléatoire. Mais nous allons tout faire en CSS, élément parallax et conteneur parallax. Permet de les copier dans mon CSS. Comme ça. Cela va avoir une largeur de 100 vh puis une hauteur de 100 vh, ma largeur serait un 100 vw en fait. Donc 100 vw, un 100 vh pour mon conteneur parallaxe à la position de parent. Ensuite, mon élément de parallaxe sera à la position absolue. Ensuite, pour l'instant, nous pouvons avoir une largeur de 300 pixels, hauteur de 300 pixels, et nous pouvons avoir une marge supérieure de moins 150 pixels. Non, je ne pense pas qu'on en ait vraiment besoin, on en a juste besoin. On a notre position, on a notre largeur, on a notre hauteur. De quoi avons-nous besoin ensuite ? Position absolue, peut-être que vous pouvez simplement dire, haut de 50 pour cent et à gauche de 50 pour cent. Haut, largeur gauche, hauteur. Allons pour notre feuille et cela peut avoir une largeur de 100 pour cent et une hauteur de 100 pour cent. Il peut avoir un arrière-plan, et l'arrière-plan va être une URL. L' un des atouts sera l'un de ces congés. Copions simplement celui-ci, collez-le là, et cela dira sans répétition centrale et taille de l'arrière-plan peut être contenue. J' aime déjà ça. Vérifions simplement que c'est ce que nous voulons. Allons pour une couleur de fond jaune. Ouais, ça a l'air cool et ensuite mon article de parallaxe, 50 pour cent. On y va. C'est cool. Nous allons randomiser le haut et la gauche de chaque élément. Ils seront tous d'environ 300 pixels de haut et de large. Nous pouvons changer cela pour les rendre plus grands et plus petits. Vous pouvez l'enlever. Maintenant, passons dans du Javascript, mais ce que je veux faire ici, eh bien, je veux mettre en place toutes mes feuilles. Ce que je vais faire ici, c'est que je vais générer au hasard un tas de feuilles différentes et de splotches, peu importe. Allons chercher un tas d'arguments. Faisons quelque chose. Allons aller var i est égal à 0. Alors je vais dire, alors que je suis plus petit que, disons 10 pour l'instant, alors je vais dire i plus, ce qui signifie qu'il augmente en valeur. Peut-être que vous pouvez juste fermer ceci, ce n'est pas tellement choquant que nous tapons. A l'intérieur d'ici, qu'est-ce que je veux faire ? Pour écrire quelques commentaires. Eh bien, tout d'abord, je veux créer de nouveaux éléments, créer une nouvelle feuille pour les éléments intérieurs, puis ajouter un élément au conteneur. Ensuite, après cela, je veux dire largeur aléatoire, hauteur, profondeur. Qu' est-ce que je veux d'autre, rotation, image de fond. Puis ajustez le flou sur la profondeur. Ça a l'air plutôt bien. Ce que je vais faire ici est de mettre rapidement un identifiant sur ce div et ce sera un conteneur de parallaxe. Je veux également ajouter les noms de classe. Essayons ça. Ce que je veux faire ici, c'est dire que var parallax conteneur égal document point get element par Id et ce sera mon conteneur parallax. Créez un nouvel élément avec un nom de classe d'élément parallaxe. Allons pour le document point créer des éléments, et je veux être un div et nous allons dire élément var. Alors ce que nous allons faire est de donner à cet élément un nom de classe. Nous allons faire la même chose ici, donc nous allons créer une feuille et dire que c'est une feuille. Ensuite, nous allons ajouter la feuille aux éléments, donc point d'élément ajouter feuille enfant puis ajouter élément à contenir. Conteneur Parallax point ajouter ajouter enfant et nous allons mettre dans l'élément. Voyons si ça marche maintenant. J'en ai deux ici. J' ai un tas de feuilles qui se passe ici, c'est fantastique. La prochaine chose que je veux faire est juste de vérifier que ceux-ci sont tous réellement positionnés absolus. On dirait qu'ils devraient l'être. Faites un clic droit et inspectez la feuille. Toutes les feuilles sont ajoutées au conteneur de parallaxe et il n'y a qu'un seul élément de parallaxe. Dire créer élément, qui est un point point point point de créer l'élément div, le nom de la classe d'élément est feuille. Le nom de la classe d'élément est l'élément parallaxe, nom de la classe de point feuille est l'élément feuille ajouter feuille enfant, puis le conteneur de parallaxe pincer l'élément alt. Si nous faisons un clic droit sur celui-ci maintenant, nous devrions voir un tas d'éléments de parallaxe tous avec des feuilles à l'intérieur d'eux. C'est génial. La prochaine chose que je veux faire est que je veux obtenir une largeur, une hauteur, une profondeur, un ratio, une image de fond, tout ça. Allons-y pour la largeur des points de style point de l'article est égale à 300 hauteur. Allons pour la profondeur, la rotation et l'image de fond, donc la hauteur. Ensuite, nous allons aller pour la profondeur puis la rotation, donc celui-ci sera la profondeur. Ce sera une profondeur de point de jeu de données point, alors nous allons dire rotation. Cela ne sera pas là, ce sera transformée et ensuite la dernière sera une image d'arrière-plan, donc image d'arrière-plan et nous aurons cette image d'arrière-plan ici. Ensuite, nous avons besoin d'un nombre aléatoire, donc je vais créer var nombre aléatoire égal à point mathématique aléatoire. Ensuite, notre largeur va être, allons-y pour 600 multiplié par le nombre aléatoire, ce qui nous donnera une valeur comprise entre zéro et 600, puis plus 300. Si c'est zéro, alors ce sera 300 ou peut-être que vous pouvez dire plus 200, et peut-être que nous pouvons dire que celui-là est 500. Évidemment, cela va être réglé en premier, alors donnons-leur quelques accolades, la profondeur va être un nombre aléatoire, et ça va juste être entre zéro et un. Alors je vais me transformer. Qu' est-ce qu'on veut ici ? On veut quelque chose entre 0 et 360. Allons à 360 multiplié par un nombre aléatoire et puis notre image de fond, nous voulons l'un d'entre eux entre 1 et 91. Essayons ça. Pour mon numéro d'image bGIMG, je veux que mon nombre aléatoire soit multiplié par 90. De toute façon, entre 90, mais je vais dire, eh bien, voyons ce que c'est en fait. Mettons en deux pour l'instant, numéro d'image BGIMG. Ouvrons notre console, donc nous sommes 64 points peu importe. Ce qu'on peut faire ici, c'est que tu peux dire des maths et ça nous donnera six. Fantastique. Pourquoi on ne se déconnecte pas ? Console dot log numéro BGIMg et cela devrait nous donner un tas de différents nombres BGIMG. Cela semble plutôt bon et change à 91 Je pense que ça devrait aller. Ensuite, nous pouvons mettre notre numéro BGimg ici et nous aurions pu faire la même chose avec ce calcul ici, peut-être que nous devrions essayer ça. Allons mettre ça ici. Supposons cela et disons faire pivoter le nombre et copier et coller cela. Nous pouvons faire la même chose avec tout cela en fait, mais parfois c'est inutile. On dirait pas que j'ai des plantes au hasard, non ça n'a pas vraiment l'air. L' image d'arrière-plan existe-t-elle réellement ? clic droit ici et inspectez l'article parallaxe, c'est parce que nous devons le mettre sur notre feuille. Disons élément d'arrière-plan point feuille, voir si cela change quelque chose, div image de fond point point de style div. Profondeur pointillée, transformer tourner. Peut-être devrions-nous faire quelques recherches sur la façon de mettre une image d'arrière-plan sur un élément avec JavaScript. Allons pour l'image de fond JavaScript. Image d'arrière-plan. Parce que nous n'avons pas mis d'URL. Essayons ça. Je vais dire URL, et comme certains ou comme ça. Que diriez-vous de ça ? Ne comprends pas ce que tu dis. Toute cette URL, l' une d'entre elles, mettons-le là. On dirait que nous avons des images de fond aléatoires. Fantastique. Merci beaucoup les écoles W3. Boom, quelle est la prochaine ? Eh bien, nous devons trouver notre flou. Allons pour item.style.filter équivaut à un flou de 20 pixels. Il y a tout un tas de flou qui se passe là-bas, et nous avons déjà notre profondeur. Où est notre profondeur ? Voici notre profondeur. Peut-être que nous pouvons dire que la profondeur var est égale à RandomNum, et nous pouvons dire, d' accord, quelle est la valeur de flou ? flou var est égal à notre profondeur. Nous avons besoin d'une valeur de début ici, donc je vais dire output.blur.start, puis multiplier par la sortie .blur.range. Maintenant, évidemment, nous n'avons pas ces valeurs, alors mettons-les en place. Cela va dire mettre en place sortie et la sortie var est égale, et notre sortie va être flou, et nous allons avoir un début de 0.2 et la plage de 20. Que diriez-vous de ça ? Début et plage de flou de sortie. Que se passe-t-il si on change ça à cinq ? Alors que se passe-t-il ? Si nous devons dire commencer par un, je m'attends à ce que tout cela ne soit pas floue. Ça ne marche pas. item.style.filter flou 20 pixels, c'est parce que tout est juste 20 pixels là. Changeons cela en une valeur de flou. Là, nous allons et nous pouvons mettre le flou apparaître avec toutes les autres variables. Changons notre départ à 0,2 et notre gamme à 20. Espérons que nous verrons certains d'entre eux être flous et d'autres pas. Alors peut-être que je peux changer ma largeur pour, je ne sais pas, 50. Entre zéro et 500 et oui, le minimum sera 50. item.style.Filter flou, vous pouvez mettre cela là-haut. Ça a l'air assez bien jusqu'à présent. Que devons-nous faire d'autre ? J' ai un flou, j'ai un aléatoire pour spludge, j'ai une largeur et des hauteurs aléatoires, j'ai une profondeur et un flou aléatoires. Maintenant, je suppose que j'ai besoin d'une position aléatoire. Je ne pense pas avoir mis ça en fait. Allons pour item.style.top est égal et nous pouvons dire, où est ce randomNum multiplié par, et nous pouvons dire window.innerHeight. Cool, puis window.innerWidth pour ma valeur gauche, et puis nous allons juste ajouter un pixels à cela. Alors nous devrons peut-être contourner ça. Pas tout à fait sûr, mais faisons-le de toute façon juste pour que nous n'obtenions aucune valeur de point. Inspectons ça. Maintenant, nous avons transformé les filtres en haut à gauche. se passe un tas de trucs. Eh bien, c'est fantastique. Mais peut-être que nous pouvons aussi simplement dire math.Round moins 200 aussi, et c'est juste pour que l'élément est aller un peu vers la gauche et un peu vers le haut. Sinon, ils vont toujours à droite et au bas de la page. Ensuite, nous pouvons également mettre un débordement caché sur notre conteneur parallaxe afin que nous n'ayons aucune barre de défilement. On a des positions aléatoires maintenant je pense qu'on doit les faire bouger. Faisons-les bouger. Mettons en place notre entrée et partageons. Peut-être que nous pouvons dire configuration HTML. Nous allons ajouter les points-virgules aussi. Notre contribution sera MouSex et MouseY. Ensuite, nous allons avoir, je vais commencer à zéro et je fais toujours ce window.innerWidth, puis notre courant. Nous pouvons juste commencer à window.innerWidth multiplié par 0,5, puis nous avons besoin d'une plage qui fonctionnera par la suite. Nous pouvons simplement copier et coller ceci. Ensuite, nous disons input.minusx.range égale entrée.mousex.end moins. Copiez et collez ça. Commencez. Ces choses me font flipper. Nous avons notre configuration d'entrée. Maintenant, ce qui est le suivant, c'est que nous devons faire nos auditeurs d'événements. Alors peut-être que nous pouvons simplement cacher cela pour l'instant, et nous pouvons dire window.AddeventListener, et nous pouvons dire mousemove, handleMove. Ensuite, nous pouvons également ajouter un redimensionner, redimensionner la poignée. Redimensionner et je ne sais pas tout à fait pourquoi j'ai parlé gérer comme ça. Mais j'ai fait HandleMove. On peut dire HandleResize. Ce qui doit se passer dans notre redimensionnement. Nous devons faire notre gamme. Je vais mettre fin à notre gamme, c'est bien. Alors je m'occuperai de la Move. Que se passe-t-il dans HandleMove maintenant ? Nous devons faire la fraction d'entrée et le courant, puis les sorties courant et ensuite appliquer au HTML. Allons pour nos UpdateInput, qui est une fonction, et nous pouvons simplement copier et coller ceci et dire UpdateOutput, comme ça, et ensuite nous pouvons dire UpdateParallaxItems. Nous pouvons simplement copier et coller ces, fantastiques. Ce que nous devons d'abord faire dans les entrées de mise à jour, c'est, les courants et notre fraction. Faisons ça, update-input. Ce que nous allons obtenir est, obtenir nos événements et nous disons que le point de souris x est égal à l'événement point client X. Nous n'avons pas encore configuré notre souris, donc nous ne pouvons pas le faire. souris Var est égale à 0 ou peut-être vous pouvez dire, la largeur intérieure du point de fenêtre multipliée par 0,5. Nous pouvons copier cela pour notre valeur y et dire hauteurs intérieures. Si nous venons de couper ceci et de le mettre en haut, nous pouvons réellement référencer cela, donc c'est un point de souris x et un point de souris y. La prochaine chose que nous devons faire est de copier et coller ceci, point de souris y est notre client Y. La prochaine chose que nous devons faire est, nous sommes coupés des valeurs de fraction, donc nous y allons et en fait cela ne va pas ici, va ici, et ça va ici, on y va. Ensuite, nous pouvons réellement mettre à jour nos valeurs actuelles entrée souris X point courant égal point de souris x, et mettre la souris point Y, le courant va souris point y. alors notre valeur de fraction, point d'entrée souris X fraction point, et cela est égal début moins actuel divisé par plage. Nous les mettons à l'intérieur des accolades, et nous le changeons à la souris Y. Nous avons fait nos entrées, c'est génial. Maintenant, les sorties. Que va-t-on faire pour nos produits ? Eh bien, nous devons faire sont x et y. Allons pour le point de sortie x. Avons-nous encore un x ? Non, nous ne le faisons pas, donc l'échelle pour x, et nous aurons un début de moins 150, et une fin de 150, puis un courant de zéro. Nous allons copier et coller ceci, et changer ceci en y et ensuite nous allons simplement copier et coller ceci, et les changements en x, x, x et ceci en y, y, y, et ceci en sortie. Déjà. Nous avons maintenant notre sortie x et y. La prochaine chose que nous devons faire est en fait continuer ici et dire, point courant égal, et notre valeur actuelle va être la fraction de point de souris x point d'entrée multipliée par point de sortie x plage de points. Plutôt cool. On n'a probablement pas besoin de le faire, mais je vais le faire quand même. Il rend la vie un peu plus facile, donc y-courant fraction souris y, et la gamme de points y de sortie. Maintenant, nous avons mis nos sorties. La prochaine chose est, nous devons appliquer au HTML. Ce que j'ai fait ici, c'est que j'ai configuré le HTML, mais je ne l'ai pas ajouté à un tableau. Disons, items-array est égal à un tableau vide. Ensuite, ce que je veux faire est, var élément quand je le crée, et je fais le nom de classe, et je dirai items-array dot push, et je vais juste ajouter cet élément à ce tableau. Ensuite, je peux le référencer plus tard, donc items-array, passons ici. Items-tableau point foreach, et à l'intérieur de ce foreach fournissent un élément de fonction et k ou élément et i. Ensuite, ce que je peux faire est, je peux créer un var Item-sortie égal à un objet, et il y aura un x, il y aura un y. Cela va en fait être cela, juste mes x et y. Ensuite, je vais dire point styles d'élément dot transformation égal à traduire, et puis nous dirons 20 pixels, 20 pixels. Ensuite, je vais aussi avoir une profondeur, donc la profondeur var est égale à la profondeur de point définie de point. Je vais dire ParseFloat. Nous n'avons probablement pas besoin de le faire parce que nous générons ce numéro ici. Nous pourrions stocker cela sur l'élément lui-même mais je pense que c'est juste une bonne façon de le mettre en HTML, et de le ramener juste pour cimenter ce que vous avez appris pendant la classe, donc c'est notre profondeur. On va juste mettre cette valeur 10. Nous avons notre profondeur, nous avons notre sortie Item-output. Faisons cette dynamique. Nous allons commencer par notre courant X point de sortie, puis le multiplier par notre profondeur. Alors les choses si, quelqu'un regarde un peu. Je pense que je pourrais avoir à voir avec cette valeur ici. Je pense que je pourrais avoir à commencer avec point de sortie x point start plus cette valeur. Ça a l'air juste et on fera la même chose ici. Puisque ce sera notre valeur y, mettez toujours des accolades par ici. Ensuite, notre x serait notre sortie-x point courant [inaudible] est actuellement, multiplié par la profondeur. Vérifions deux fois. Maintenant, copions et collez ceci. Sortie-y point courant, c'est à peu près la même chose. Ensuite, nous pouvons mettre ceci au point x, puis copier et coller tout cela. Dites item-output point y. Espérons que cela devrait fonctionner. Tout un tas de choses ne se produisent pas, ne semble pas qu'il soit même de reconnaître que je déplace ma souris, alors allons à View, Developer Javascript Console, ne peut pas définir la transformation de propriété de undefined. C' est des styles de points d'article. Styles ne fonctionne certainement pas, alors allons-y pour le style point d'article. Sauve mon stylo, pour que les choses fonctionnent ici. Peut effectivement supprimer cela, donc nous allons juste commenter cela. On dirait qu'il y a beaucoup de rotation ici. Vérifions notre rotation. Je pense que notre rotation ne fonctionne pas, parce que nous l'avons réglé sur notre article. Quand nous sommes allés pour cette rotation, chaque fois que ces images se déplacent ici, cela signifie que cela écrase. Changeons ça à notre feuille. Peut-être que nous pouvons juste verser le flou un peu. Allons à la sortie floue, faisons cela 10, et changez cela à cinq. Ensuite, où j'ai configuré mon HTML, je vais peut-être changer cela à 50, cela va maintenant être 50 feuilles et splotches et quoi que ce soit d'autre. On dirait pas qu'ils sont positionnés au hasard. On dirait qu'ils sont juste en position de haut à gauche en haut à droite. C' est bizarre. Si nous allons en haut et à gauche, InnerHeight, InnerWidth , ouais, c'est juste bizarre, alors nous allons peut-être enregistrer ceci, disons i, dimensions, je vais juste aller en haut et à gauche. Allons donc pour notre Developer Javascript Console. Le problème est que, ce qui se passe, c'est, à mesure que les éléments augmentent, sorte que les valeurs du haut et de gauche augmentent, ce qui donne comme ça vraiment même se propager de haut à gauche en bas à droite. Donc, ce que je vais faire ici, c'est, au lieu de compter sur ce nombre aléatoire ici, je vais juste copier et coller cela et en utilisant RandomNum unique pour le haut à gauche, la transformation, la largeur et la hauteur. En fait, je vais juste utiliser Math.Random partout dans le spectacle. Donc nous allons dire, RotatEnumber. Mettons-le là aussi. Donc, RandomNumber, est-ce que tu existes plus ? La profondeur est toujours RandoNumber. Ou on peut juste changer ça et ça devrait être ça, plus de nombres aléatoires. Donc nous avons maintenant un tas de feuilles, ce qui est assez cool. Ils bougent beaucoup quelque chose ne semble pas ici. Qu' est-ce qui se passe ? Eh bien, je pense que ça a quelque chose à voir avec notre courant que nous commençons par le début, et ensuite nous disons le MouSex. , multipliée par la plage commençant à la plage. Alors peut-être peut dire fin - et fin -, et voir comment cela fonctionne. Ensuite, notre x est notre sortie x.current multiplié par la profondeur. Ça a l'air beaucoup mieux. C' est joli de ça. Changeons à nouveau nos valeurs de coup. Commencez à 0,5, bien dire commencer à 0,35 et notre gamme pourrait être jusqu'à 16, et la seule chose que nous n'avons pas fait est notre Z et X, Donc nous devons faire notre Z. Nous pouvons donc travailler cela et dire que var ZIndex est égal à notre gamme Z. Donc, nous pouvons dire, output.z.range, que nous n'avons pas encore mis en place, moins notre profondeur multipliée par output.z.range, allons-y et faisons ça. Dix mille, ça a l'air assez bien. Gamme donc. Maintenant, définissons Item.Style.zIndex est égal à zIndex. Tu vois ce qui s'est passé là-bas ? Redimensionner les choses ne fonctionnent pas vraiment bien. Mettons à jour ça. Donc, sur mon redimensionnement et dans la gamme, allons-y pour input.mousex.end égal à window.innerWidth. MouseY est innerHeight. Ensuite, nous pouvons copier et coller pas notre sortie, mais nos plages d'entrée ici. Voyons si ça marche mieux. Ça a l'air plutôt bien. Mais c'est un peu un bordel. Alors peut-être que je pourrais sélectionner mes images un peu mieux, ou peut-être que nous pouvons simplement réduire le flou à nouveau. Certains d'entre eux ici à partir de 0.2 et disons 10. Oui, c'est tout à fait aléatoire quant à ce qui apparaît, et je parie que si je retirais tout le flou, ce serait beaucoup plus performant. Donc si on va trouver le flou. Donc style.blur ou style.filter, celui-ci ici. Il suffit de commenter ceci. Ça se sent beaucoup mieux. Je me demande si je peux changer cela en un pourcentage, le haut et la gauche plutôt que d'être des pixels réels. Alors changeons ça à un pour cent. Donc Math.Aléatoire multiplié par 100, moins, disons 10, et cela signifie que cela fonctionnera peu importe ce que la hauteur et la largeur de la fenêtre est et si elle est redimensionnée. Changeons les quantités d'éléments que nous devons aimer 100 ou quelque chose. Peut-être qu'on peut même dire moins un peu plus ici, donc moins 20 pour cent. Ouais, ça a l'air plutôt bien. J' aimerais voir combien de feuilles je peux mettre ici. On y va peut-être pour 150. C' est comme une jungle flippante ici, ouais c'est vraiment cool. Peut-être qu'on peut juste diminuer ce score de 130. Il y a beaucoup de mouvement ici. Ce que je dois faire maintenant, je dois mettre dans le reste de mon HTML. Allons pour ParallaxContainer, et en plus de cela, je vais mettre dans mon formulaire conteneur, en fait j'épelle le conteneur droit. À l'intérieur, j'aurai un formulaire, et à l'intérieur de mon formulaire, je vais avoir une entrée avec un type de texte. J' ai pas vraiment besoin d'un nom d'identification pour l'instant. Ensuite, un type d'entrée de soumettre. Nous disons, Inscrivez-vous et peut donner comme une valeur d'espace réservé de, Adresse e-mail. En dehors de notre formulaire, nous pouvons avoir un dicton h1, Parallax Plants Newsletter et h2 dit, S'il vous plaît inscrivez-vous. Maintenant, nous pouvons juste styler ça. Allons pour notre conteneur de forme, et nous dirons que la largeur est de 100 pour cent. On dira que la hauteur est à 100 pour cent. Ou peut-être que nous allons juste dire 100vw et 100vh. Ensuite, nous dirons la position absolue et supérieure zéro, gauche zéro. Nous pouvons également définir à l'affichage flex et dire justify-contenu, et nous dirons centre et align- éléments aussi, centre. Ensuite, je dirai, ligne de direction flexible peut changer cela en une colonne. Alors, dans mon corps, je peux dire, font-family. Je voudrais être Open Sans je pense. Ouvrez Sans super. Puis mon h1, donnons-lui juste une couleur de blanc. Nous pouvons dire text-shadow 0, 0, 10 px, rgba 0, 0, 0.5. Peut-être que nous pouvons changer ceci à 4px et ceci à 20px et nous pouvons rendre ce 0.8 encore plus sombre, ouais c'est génial. Je peux dire font-size de 50 px, peut-être 40 px, et alors notre h2 peut à peu près être la même chose. Sauf que ce sera 20px. Peut changer la marge à 0. La marge à 0 aussi. Puis notre forme, même margin-top de 20 px. Ensuite, notre entrée et dire type = texte, et notre type d'entrée = soumettre, et ici nous pouvons faire la même chose que notre formulaire conteneur. Nous pouvons également simplement définir le type d'affichage pour fléchir à l'intérieur de notre formulaire. Au centre, mais on peut aller à la ligne ici. Ouais, comme ça, dis frontière, aucun, et dis contour, aucun. Dites taille de boîte, border-box peut dire que le rembourrage est 10px, et cela semble plutôt bon. Peut-être 10px, 20px ou peut-être que nous pouvons dire 10px, 12px comme ça. Ou peut-être que nous pouvons même donner à cela une hauteur de, disons 40px. Notre soumission peut avoir une hauteur de 40px. Nous pouvons aussi dire bg ou nous pouvons dire bordure de none, contour, none, pointeur de curseur. Ma couleur de fond, faites défiler vers le bas pour obtenir quelques belles couleurs ici, je veux le rose. Mettons ça et puis donnons à ceci un rembourrage de ce qu'on dit ici 10, 12. Vous pouvez peut-être nous en donner un peu plus. Fantastique, puis la taille de la police peut être de 16px. La même chose ici, et notre couleur peut être noire et le poids de la police peut être audacieux. Notre couleur ici peut également être noire. Ça a l'air plutôt bien. Ce que je voudrais faire est, j'aimerais voir si je peux ajouter une ombre portée sur les feuilles sans le rendre super lent. Allons filtrer et ombre portée. Cela devrait peut-être être à l'intérieur de guillemets, mais vérifions simplement et nous dirons 0, 0, 0, 0.5. Est-ce que ça a fait quelque chose ? Ne le pense pas. Qui fait quelque chose du tout ? Je ne pense pas non plus. Filtre et ombre portée, ombre portée comme ça. Non, je ne pense pas. Qu' en est-il du filtre CSS ombre, ombre portée oh pas de commentaires. Que diriez-vous de ça ? Travailler du tout ? Celui-ci, il fonctionne mais il est super est faible. Sortons ça rapidement avant que mon ordinateur ne casse. On est de retour là-bas. Je suppose qu'avec le flou et l'ombre portée, les choses ne sont pas si performantes. Ensuite, nous avons notre Newsletter Parallax Plants, inscrivez-vous. Au fur et à mesure que vous déplacez votre souris, toutes ces plantes bougent. Il y a des plages bizarres dans nos personnages ici et là. Mais c'est plutôt cool. Tout cela est juste vraiment facile à changer et à configurer. Nous pouvons changer cela à quelque chose comme 300 pour le rendre encore plus réactif. Ça a l'air assez amusant. C' est ma newsletter Parallax Plants. Amusez-vous à créer le vôtre. Si vous souhaitez modifier la vue. Tu peux aller à, je pense que Full Page. A toujours ce petit bar, peut-être que vous pouvez aller à Live View. Maintenant, mes images sont massives, c'est pourquoi ça prend tellement de temps à charger. Mais c'est plutôt cool. Il y a un peu d'espace au sommet de la tempête. Peut-être que vous pouvez changer ça. Allons à la vue de l'éditeur, et faisons défiler vers le bas jusqu'à ce que nous arrivions à notre tableau ItemsArray. Je pense que c'est à propos d'ici. Allons-y pour 40 pour cent, ouais essayons ça 40 pour cent. Rafraîchissons ça. Peut-être sera beaucoup mieux si je n'avais pas un tas de plages, comme ces grosses choses ici. Bref, j'aime ça. C'est beaucoup de plaisir. Tout est Parallaxing vraiment bien. C' est une façon vraiment agréable d'avoir une page d'inscription à la newsletter. Cool. 15. Que faire ensuite ?: C' est tout pour ce cours. Merci de l'avoir pris. J' espère que tu t'es bien amusé. J' espère que vous avez beaucoup appris. J' espère que vous voulez faire un peu plus de codage. Ce que je veux te laisser, c'est que ce n'est que le début. La conception d'interaction est super amusant et dans le monde du web, c'est certainement le côté plus drôle de JavaScript. Il y a beaucoup plus à apprendre et il y a certainement beaucoup meilleures, rapides et plus élégantes façons d'écrire du code que la façon dont j'ai codé dans cette classe. Mon objectif a été de rendre tout aussi simple et aussi facile à comprendre que possible. Si vous avez des questions ou si vous voulez discuter de quoi que ce soit, veuillez le faire dans la communauté ou communiquer avec moi sur les médias sociaux. Si vous avez apprécié la classe, veuillez lui donner un avis et le partager afin que d'autres élèves puissent le trouver et en bénéficier. J' ai aussi beaucoup plus de cours dans la ligne de conduite. Si vous aimez la façon dont j'enseigne, suivez-moi sur Skillshare et sur les médias sociaux et consultez taptaptapkaboom dot com. Au revoir pour l'instant et je te verrai bientôt.