bonjour à tous et bienvenue dans cette nouvelle de son de javascript aujourd'hui nous avons mettre en pratique ce que nous avons appris jusqu'ici et nous allons le crayonnage bonnes photos dans les transitions reproduisent l'effet domino ou bien les faits de vagues comme ceci alors commençons à d'ores et déjà préparer ce code dans la valise body j'ai prévu une div identifié par conteneur et j'ai appliqué des stylos un style qui va s'appliquer sur le côté nord celui qui va contenir l'album est une classe que je n'ai pas encore utilisés quand je me rends sur des navigateurs le résultat est le suivant l'élément qui ont cadré au noir c'est la balise d'identifier par conteneur objectif maintenant c'est de créer beaucoup de balises diva l'intérieur de celle-ci de telle sorte à les animer indépendamment l'une de l'autre pour avoir l'effet vague souhaitait alors pour commencer nous allons prévoir ici un événement au chargement de la page donc windows donc window points au nude égale affection c'est à dire chargement de la page le traitement affaire est le suivant je vais d'abord initialiser quelques paramètres par exemple je m'entraîne vers égal avant on pourra dire le nombre de dives dans ses dires le nombre d'éléments que je vais intégrer pour qu'on s'y film avec ses vingt éléments ensuite je vais créer une variable qui va cibler objets conteneur par exemple quand voilà comme ça je galles document point jet cantina voilà parce que j'aurai besoin par la suite utiliser cet objet bon lit de répéter ces attaques sont rares je vais tout simplement d'un mètre de la barrière lille quand bien sûr j'aurais peut être besoin d'autre chose que je vais déclare ici dans cette fonction mais pour le moment je vais appeler une autre fonction qui s'appelle limite cette fonction s'appelle qui va se charger de crier mais van vyve au chargement de la pêche alors il si j'aime à trencin il dit et voilà maintenant on va essayer de créer des éléments par exemple animant que j'appellerais vie égale d'eau qui m'ont un curieux et element l'élément a créé ses la balise d'yves de largeur de cette île yves sera la largeur du conteneur divisé par le nombre d'éléments ça veut dire vent fort du maître ici vivent en ce sens bref égale la largeur du conteneur c'est à dire quand - l'alliance wes divisé par le nombre d'éléments savoir dr moi je maîtrise entre parenthèses et ensuite je vais qu'en cadets nés avec pays que ça veut dire l'unité la même manière je vais spécifie la hauteur qui sera égal à la hauteur du grand ténor adore la géométrie les points moins égal à quand on climate compter avec l'unité des x et pour pouvoir distinguer cette élite jeu villas dotées de la classe ma classe je mettrais 10 points last name égale ma classe voilà ensuite je vais ajouter ceux qui vivent aux conteneurs d'entente points apple's dix ans maintenant j'exécute alors j'ai bien la diff qui a été créé bien sûr manger besoins des vins div alors équipés de boucles et sur ce traitement est maintenant qu i égal à zéro et inférieur strictement à npr et lucius on mettra des accolades ici et voilà donc maintenant qu'on j'actualise ha d'orge ils indiquent qu'ils ont été écrits bien sûr marquer qui n 10 qui a débordé c'est normal non parce que j'ai appliqué une bordure est du coup donc ça hein élargit davantage la diff bon il suffit d'enlever la bordure attend maintenant je n'en ai plus besoin c'est à dire que je peux éliminer ce style j'actualise mon maintenant mes vingt dix villes sont bien ici à l'intérieur mais je veux pas les voir pour ce que je vais faire maintenant c'est de rappliquer une image derrière ce nom bon tout d'abord on voit par question des images que je vais charger dans mon album je les y stocker dans nos dossiers qui s'appelle images dont je dispose de cinq images nommé ainsi shampoing jpg ch et 1.2 jpg et ibis phare et romarin ils ont toute l'extension point jpg pour tout d'abord je vais déclarer ces images dans un tableau conseil un travail à faire par exemple ici dans cette fonction l'image également directement je mettrais décrocher je mettrai les chemins dont l'image s'est lâchement la première image du sap et de chats points du psg deuxième image ces chiens point jpg troisième image c'est ibis en jpg la 4e ses fans en jpg et la dernière ses rangs marins en jpg maintenant mes images ils ont été créés pense que je vais faire maintenant s'y appliquer la première image du genre donc arrière-plan 2 du livre que je viens de créer à dourdan je vais faire boire avant d'intégrer je mettrais yves point bas en dix matches et gad et continue de perdre pas je vais spécifié du à rennes qui est dans ce cas image avec l'index je mettrais par exemple m à bron sachant que les aime ça sera une variable dont que je vais déclarer ici de préférence je vais faire appel de la sanction militants dernier donc y'a bon schéma présente lui-même égal à zéro dans spécifié donc les premiers index de l'image maintenant j'actualise voilà donc maintenant j'ai mes vingt dix qui contient la même portion d'image qui était appliqué mais bien sûr pour que l'image soit adapté avec les conteneurs il faudra roddick mentionné cela il faut que de largeur de l'image soit égal à barr joueurs du conteneur moi je mettrais ici bon avons après peu importe c'est un background sans égal quand il contador je vais spécifié par exemple la largeur de l'image ça sera alors joueur du continent bon quand on line tweb en cadets avec px et pour la hauteur de m us au dos à dire je vais laisser navigateur à deviner automatiquement on attend j'actualise avoriaz pas un grand changement mais l'image a bien été redimensionné donc maintenant j'ai la même portion de l'image qui se répètent et c'est normal maintenant je vais jouer sur bagdad aux actions afin de décaler d'image de dives endives et le résultat sera comme un puzzle se déride images qu'elles étaient constituées de plusieurs morceaux dont je mettrais ici nick point position égal à d'or pour la position des x bon ça sera juste c'est une valeur en pourcentage dont tu mettrais indique celui qui multiplie la valeur en pourcentage de ouadda sans diviser par le nombre d'image une matrice et des parenthèses pas ce que je vais faire la concaténation par la suite dans le nombre d'imagés nbr voilà et là j'ai des conquêtes est né avec le pourcentage est pour la position verticale je mettrais 50 pour son salaire pour prendre le centre de l'image au niveau verticale maintenant j'ai actualise bon j'ai l'image qui a été constituée mais en réalité bon l'image nappes étaient bien constituées regardez donc il ya bien des traits que je peux voir ici parce que du calcul n'est pas tout à fait correct en réalité il fallait matricielle baer moins un an maintenant si on regarde bien le résultat maintenant est nette dans l'image est bien clair donc il ya plus ces petites coupures en fait comment ça se fait bon pour mieux expliquer ça bon je vais réduire le nombre pour les deux donc maintenant j'ai deux portions d'image on j'actualise maintenant j'ai deux dit mindi vie si une division alors là dans sa portion de gauche la position horizontale sera zéro pour son et la portion de droite d'imposition de x sera 100% maintenant sujet trois portions maintenant j'ai trois dif en j'actualise la 1re div la 2e div et la troisième ici la première la position horizontale sur à 2 0% la dernière toujours son pour son essai du milieu c'est 50% alors ce qu'on constate c'est que toujours je commence par 0 et j'ai fini par s'en est du coup donc il faut faire en sorte que du calcul colle bien avec le résultat souhaité donc là qui multiplie sans et qui divise un an bras de telle sorte à ce que le maximum que peut atteindre y correspondent à ce nombre pourra voir là-bas d'or sont à la fin et du coudon qui on sait que ça commence à 0 il a fini dans ce cas montre la valeur 3 ça va finir à 2 il faut bien que des dénominateurs soit égale à deux aussi donc ses proies moins égal à 2 donc maintenant je vais remettre la valeur vends mon image il bien reconstituée c'est bon bon maintenant je n'ai plus besoin de suer cadre du continent je peux d'éliminer du css comme ça dans mon image a bien été constitué bon maintenant nous allons essayer d'appliquer une petite rotation pour chacune des portions de l'image avant la fonction i need bon je l'écris une autre variable que j'appellerais engourdir l'angle dans les ghanéens tableau bon je me soigne ou comme ça ou bien directement décrocher vite pour dire que c'est une variable des tic tac nous voilà et maintenant à chaque fois donc à chaque itération de iv calculé nouvelle valeur de hong dong de i égal moi je mettrais pas une valeur négative ans qui va changer en fonction de m i don't know i o qui multiplie par exemple 15 pour dire 15 degrés voilà comme ça maintenant je vais appliquer cet angle à ma portion c'est à dire à mon image actuelle dont le mettrait dans le bon sens et un transport légal des comptes valeurs je vais mettre perspective il avait spécifié une valeur par exemple il me fixait le bon c'est la distance référentiel de l'observateur en quelque sorte et d'en mettre en route et il y est content valeurs je vais tout simplement conquis athénée avec ang lee et bien sûr que spécifié la vador degrés maintenant je vais voir le résultat j'ai bien réussi dantas pectives one en conjectures et lisse c'est bien donc maintenant j'ai bien de la rotation qui appliquée sur chacune des portions donc à sa valeur zéro d'acier - 15 - 30 - 45 et c'est donc dans ces retrouver avec l'aval en -90 qui est perpendiculaire à l'écran du coup et n'est pas visible même chose ici c'est un multiple de la valeur - 90 jusqu'ici c'est bon donc maintenant on va essayer d'animer ces différentes vivons va par exemple et faire tourner à drogba on va prévoir une autre fonction que j'appellerais animé et que j'appellerais d'ailleurs après la création de chacune des portions de l'image sont là fonctionnent admet il vous avez sans doute deviné qu'il s'agit d'une fonction récursive donc m a par exemple été égal cet anime et donc la vitesse bon ça dépend ce que vous voulez pas entre la milice est grand de voir ce que ça va donner à la fin et ensuite on va cibler chacune des livres qu'on a créés et on va lui a piqué donc la rotation souhaitait bien sûr on va faire ce traitement vers un four donc fort qu'li égal à zéro et inférieur enver les plus plus jeunes on va faire le traitement il ya juste un truc c'est que bon n'oubliez pas que le dire que j'écris ici bon il va être rasée à chaque itération non ça veut dire quand ils viennent à zéro donc ils vivent il va indexer la première valise d'yves camp iguana un dif il va indexer deuxième du code a première maintenant il est perdu alors ce qu'il faut faire si qu'on va ajouter un attribut par exemple je mettrais 10.7 hâter les buts bon je peux ajouter heidi pour d'évidents la valeur par exemple la première portion et identifie par 0 la deuxième c en est la dernière ses 19 haddad a donc déjà pour un petit peu que ça va ressembler quand je vais m inspectez ont maintenant du code que j'essaie soit donc la 1re div donc il identifie par 0 la deuxième c'est dans la troisième 6 2 et c'est donc maintenant je vais prendre cette rubrique ça veut dire document point jet éléménts by heidi qu'on y voit un style points donc là je prendrai directement ce style de voix d'enfant parce que ces mêmes que je vais appliquer et je vais changer la valeur de pays dont kang et on se fait pas d'un crime en d2 un nouvel enfant on va voir maintenant ce que ça donne c'est bien quand on a bien l'animation ça veut dire que tu te les livres maintenant ils sont en train de tourner si on veut accélérer un petit peu le mouvement alors soit on va diminuer donc de délai ou des incréments d'une valeur supérieure ens en page 2 donc là c'est un peu plus rapide qu'avant adam maintenant c'est bon pour cette partie c'est à dire celles qui concernent à d'animation des objets bon maintenant ce qu'on va essayer de faire c'est masquer quelques et d'yvon par son objectif c'est de créer une sorte d'éveil qu on ne va pas tout affiché comme ça mais on va afficher de gauche à droite alors premièrement on va d'abord duo masqué c'est à dire la création on fera quelque chose du genre par exemple pour l'instant point visibility et donne rien n'est visible dans un premier temps et on va les afficheurs feriez mesure là par exemple va mettre une condition par exemple il y en deux il est supérieur à moins 90 degrés parce que figurez-vous que des valeurs sont négatives voilà dans ce cas on va afficher la div en cours un document alors je copie sens bien je peux faire un truc comme ça on vous présente les objets légal on lui doit répéter ce coût d'achat hop instant et invisibilité on va voir maintenant ce que ça donne je crois que tu vis dans quelque part car oui voilà donc là il fallait mettre ça à l'intérieur de la boucle et non pas à l'extérieur de variables qui n'a pas encore été crédible dans vatan j'actualise et voilà donc ça ne tombe bien aux résultats dont profite d'une vague comme sa victime qui se propage mais le mouvement perpétuel devant il faut bien que ça s'arrête qu'on anglais viendra ghana 0 j'arrête le mouvement lorsque je vais faire ici c'est que je mettrais une condition bon par exemple les glyphes eng 2 y est strictement inférieure à 0 c'est à ce moment là que j'avais incrémenté rush france hugo d'élus mais ici on va voir maintenant ce que ça donne c'est bon donc ça ça ressemble à quelque chose on va bien que des vagues pour la première image avait été créé mais bon si on va accélérer un peu le mouvement attendons de m quand ils disent ici et dans matran d'implémentation pas trop donc c'est bon pour la première maintenant si bien créer si on veut avoir plus d'éléments qui qui bouge en même temps alors on va mettre ici on va réduire de 300 travailleurs disent c'est bon que ça donne un petit donc il ya juste un truc bon si vous regardez encore ici il ya des petits traits qui s'affiche parce que soit on n'a pas encore atteint la valeur zéro soit on l'a dépassée de peuvent en fait c'est normal parce qu'on tende incrémente vador dedans ne sont pas sûr que l'on va tomber dans la valeur zéro parce que si on commençait sa valeur initiale et qu'on a créé man 2 3 est ce qu'on va vraiment tombés dans la vallée rozier on peut tomber dans une valeur avant bien après adam va corriger sans un truc comme ça dans 13 alors en guise bon ça veut dire si la condition n'est plus vrai donc on va corriger lente et on va mettre lorsqu'on a forcé la valeur on va voir maintenant ce que ça donne si elles vont maintenant qu'ils appuient le trait on voit bien que ça marche bien donc maintenant je peux changer devait alors je me mettrais n'importe quoi bon si je mets 10 du mouvement sera plus rapide mais on n'aura toujours pas de problème voilà on en mettra la valeur deux ans qui viennent si bon jusqu'ici c'est bien mais maintenant il faut quand même changé l'image c'est à dire que quand on aura affiché tout des objets que la dernière diva atteint la valeur zéro ont ce qu'il faut changer d'image mon père m y suis conditions saif ang la dernière digue à savoir npr - en est égal à zéro dans ce qu'en pense qu'on va faire si incrémenté im donc l'index de l'image voilà vous incrémenté 2-1 du ségala mais n'oubliez pas que nous avons un nombre limité d'image bon c'est à dire on commence à zéro et on finit 1 5 - c'est-à-dire à 4 donc maîtresse une condition relatif im est supérieure à la longueur du tableau donc images ou à nantes - ans dont il est supérieur alors dont celui qu'on va remettre im égal à zéro c'est à dire que la valeur delhi m va toujours être comprise entre 0 et 4 ok bon même moment ça veut dire que quand je changer l'image qu'il faut faire c'est arrêter le compteur donc on m ait lieu un thé et quand on arrête les compteurs on va rappeler la fonction i need pour qu'il refasse le même traitement en appliquant une autre image dont je mettrai donc ici encore minutes voyons d'abord ce que ça va donner en jésus à 10 en fait ce n'est parlement ce qui est prévu et c'est tout à fait naturel ont regardé en effet nous avons créé vingt dix ans il qu'un dur à chaque fois on met appendchild à dire on va ajouter un enfant du coup nous avons déjà créé 20 éléments et quand on va créer les 20 prochains on va les y ajouter on va pas écraser ce qui existe des gens parce qu'on va faire c'est éliminer donc les 10 qui existe des gens adorent tout simplement avant de créer des vins dif on va d'abord supprimer les vins dits qu'ils existent avant remettra banques dans la fonctionnalité un truc du genre par exemple fort igal à 0 est inférieur à 1 br et plus la maternelle et on va cibler l'objet quand la voix le mot shine on va supprimer l'enfant qui n'est rien d'autre que la livre qui a été écrit alors la cible et grâce à et des documents minguettes et des matelas et haïti bon si on fait ça on va générer une erreur pourquoi parce que à la première exécution je n'ai pas encore créé aucune d'yves adore cet élément n'existe pas et du coup je tente de supprimer un élément qui n'a pas encore été créée abonda meilleure solution c'est de faire ce que ma gestion des exceptions et maintenant mettre un crâne en javascript supporte bien la gestion des exceptions comme les autres m'engage comme j'avançais plus je puisse y est c est en maître catch ont fait la syntaxe est vraiment très simple on va essayer de tricot de bon non mais 30 jusqu'au bien n'importe quoi moi c'est à dire que si cette instruction retourne une erreur comme c'est le cas à la première exécution dans ce cas on va exécuter juste clos mon salaire juste n'importe quoi pour ne pas laisser de vide et sinon à gorbatchev pression sera effectué ici bon ce qu'on appelle d'exception qui étaient générés automatiquement par de javascript alors donc au bout d'un an mais qu'on vous souhaitez ou bien un peu importe donc maintenant on actualise on va voir ce que ça donne aux premières images deuxième image 3e 4e 5e 3 milliard et voit donc ça fait le tour bon parce qu'on a bien cinq images qui vont défiler de cette manière bon on voit juste que donc la 1ère div bon on ne sont pas vraiment l'animation alors on va ajouter une autre valeur négative au début par exemple on mettre en valeur initiale en mettra un exemple - 90 degrés là pour dire que au début c'est perpendiculaire à d'écran c'est pas visibles et ensuite ça fait de mouvements anti on va voir maintenant maintenant c'est mieux alors j'espère que vous avez apprécié cet exercice merci pour votre attention et à la ville et au prochain