Tutoriel JavaScript : Apparition au défilement

[@alexjswill]

Franchement Graf cette vidéo c'est du solide. Explications et détails avec l'exactitude d'un pro. Merci pour ton travail de qualité et pour tes contributions pour la communauté des devs francophones.

[@NonameNoname-re9fo]

La sérénité et la calme avec lesquels sont expliqués les méthodes, pépites!

[@yveskone1173]

J attendais avec impatience revoir ce formidable Monsieur merci encore Grafikart pour toutes ces formations

[@pierrickgrangier8301]

Énorme Merci !!!! 🙏 Grafikart pour tous ces tutos et celui-ci en particulier. Merci pour tous ce que tu apporte à la communauté 🙏

[@livin10paris]

Pensez aux navigateurs qui ne supportent pas Intersection Observer : soit vous mettez un Polyfill (perso je prends celui que Google lui meme a fourni) soit vous faites attention que votre page soit quand meme affichée avec tous les éléments sans les transitions (un peu comme si le JS etait désactivé). Merci en tout cas pour ton tuto, Grafikart

[@donPEREdone]

Oui, vraiment je trouve très dommage que le tuto ne soit qu'une application d'api dans une playlist de tutos JS. Du coup, l'argument du "regardez, on n'a pas beaucoup de code"... Bah oui, évidemment, puisque c'est l'api qui fait tout. Mais justement... Perso j'évite tout ce qui est bibliothèques, framework et autres api pour apprendre un langage. Soit on apprend du JS, soit on apprend du web de manière générique et ce n'est pas du tout la même chose. Si on commence à se disperser sur toutes les api qui existent, c'est infini. Et surtout, le jour où l'api disparait, on fait quoi puisqu'on ne sait pas le faire en réalité ?

[@florianj.6214]

Encore un super Tuto !!

[@Actusenzo]

Exactement se qu’il me fallait, merci super vidéo !

[@_Greenflag_]

Merci pour toutes ces contributions !

[@aomo5293]

Merci, je viens de l'utiliser pour faire fonctionner un Infinit Scroll.

[@jeremylegendre1271]

Bonjour, Même souci que Minteck le même message s'affiche , j'ai cherhcé mais j'ai pas trouver de réponse satisfaisantes quelqu'un pour un petit coup de main ? apparition.js:10 Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'. at apparition.js:10

[@drey9003]

J'ai le même soucis, je bloque aussi. As-tu trouvé ?

[@houmeidzakary9230]

@@drey9003 Apparemment nous sommes plusieurs à avoir ce problème!

[@blondinthomas8618]

est ce que depuis tu as trouvé mdrr pcq je suis bloquer la aussi :'(

[@tristanboudra9832]

Quelqu'un a-t-il réussit à trouver la solution à ce problème ?

[@piantoart2199]

J'ai eu le même problème mais j'ai trouvé la solution, en fait le problème survient parce que le script s'execute avant que l'analyse de la page html est terminée, la solution est d'ajouter l'attribute "defer" dans le code html, comme ça:

[@pkparceque3485]

Hello -> 5:50 sur Edge y a-t-il moyen de voir le nombre d'appels de la fonction dans la console ?

[@OmmegaTang]

Merci beaucoup. Le tuto aurait limite pu être découpé en 2 parties, par exemple j'avais besoin d'animer seulement un élément, et voir un tuto de 27min a failli me dissuader de cliquer, en deux parties ca aurait fait 10min pour animer une seule section puis le reste pour aller plus loin Merci encore en tout cas, je cherchais un tuto de ce genre depuis un moment

[@OFR5086]

Merci pour cette vidéo super

[@YaoBoy]

Merci beaucoup ;)

[@mentalresistance174]

Merci pour le cubic-bezier en plus c'est pas loin de chez nous !!!! ;)

[@stepone3040]

J'ai vu la meme approche avec un plus c'est que le chargement des images au moment de l'apparition du bloque cela va influencer le temps de chargement de page

[@donPEREdone]

Ce qui serait vraiment bien, ce serait de montrer comment faire sans api puisque tu fais une série js, restons en js et si ça fait des tonnes de code ben... J'ai envie de dire tant mieux quoi, c'est le but d'un tuto 🤣. Pour ceux que ça intéresse, il y a cette vidéo "animation au défilement en pur javascript" kzbin.info/www/bejne/iZzLloWhjceEq7M

[@charlotte-dunand]

Bonjour, je suis en train d'essayer de mettre en place cet effet sur mon portfolio. Or je n'arrive pas à avoir une transition fluide sur l'effet, l'élément s'affiche directement. Une idée du problème ? Merci pour ce tutoriel en tout cas !!

[@MrJohAA]

Il te manque surement une transition css pour rendre l'apparition fluide.

[@BRADMBABI]

salut j'aimerais avoir les images de ce tp comment faire?

[@yogidenis]

Merci !!!

[@thibaultbarral3524]

Merci beaucoup

[@souhaylaphotographer1329]

Inspiring ! 😀

[@teleskop7]

Bonjour j'ai un problème que je n'arrive pas à résoudre, lorsque je fais le code avec visible et invisible et que je scroll, au lieu de me mettre un nouveau visible cela me remet que des invisibles

[@teleskop7]

ça y'est merci j'ai trouvé il manquait juste un h à Threshold quelle erreur de débutant lol

[@piantoart2199]

Si vous avez un problème du genre: Uncaught TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element' Essayez d'ajouter l'attribute defer dans votre code html comme ça:

[@kevos22]

Merci beaucoup !

[@IllusionIRL]

Top !

[@waffosteve9890]

je suis debutant dans le developpement web et j'aimerait avoir un peux d'aide de ta part. j'ai tous recement pris un vps , deux nom de domain, un abonnement mail chez hostinger mais j'ai des soucis l'or de la configuration des virtual host jusqu'a la mise enligne de mon site. stp aide moi avec un tutorielle dessus.merci

[@jboulemasuryoutub100]

Bonjour el maestro moi j'ai plustot besoin d'une application en php qui envoie des sms individuels ou groupé

[@madara237]

vous pouvez m'ecrire sur mon whatsapp. [phone]

[@sochindojo]

Les div ne s'affichent pas sur Safari.. :-(

[@Ryu53898]

The Fiasco 😂😂

[@tototurbo]

ça m'a choqué aussi, je vois ça je fuis lol xd

[@dadjibidansakhalsounnah7107]

Est ce qu'il y'a un tutoriel pour oracle

[@mamadidiarrisso7155]

cool le roi

[@nitakalaga5740]

Coucou Top le tuto 😁par contre je suis sur vue.js 2 et c'est m'affiche une erreur 😅 (Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.) 😓 Pour info je suis un junior pour le coup j'ai pas énormément d'xp quelqu'un a une soluce ? 🥲🥲🥲🥲

[@bikramchettri9405]

Thanks

[@deepakchettri3653]

Hey brother can you teach how to do filtering using PHP JavaScript and Ajax.

[@Abdel_monaam_1]

Stp Grafikart , donner-moi le démarche pour être fullStack JavaScript ..

[@waffosteve9890]

salu le grafikart

[@GuillaumeBeaumel]

while (burger.isDisplayed()) { viewer.eat(burger); }

[@remyd5036]

Quid du navigateur qui ne supporte pas Intersection Observer API? Tous les éléments vont rester cachés pour le triste utilisateur ! il faut penser a vérifier que le navigateur le supporte

[@elmarzougui]

cette template payée ou non ?

[@grafikart]

Oui j'ai payé un designer pour la faire (elle n'est pas dispo en dehors du site)

[@elmarzougui]

@@grafikart peux tu me contacter avec elle ??

[@grafikart]

@@elmarzougui Sketch file is included with the source here : www.grafikart.fr/tutoriels/tp-restaurant-figma-1052 And the fully functional CSS is there : www.grafikart.fr/tutoriels/tp-restaurant-recette-1059

[@joelthierry]

Pas déjà vu ce tuto ?

[@grafikart]

Je ne pense pas (mais je peux me tromper j'oublie que j'ai fait certaines tutoriels :D)

[@Maxxamande]

c’était pendant un live je crois

[@fcfc]

Grafikart a deja evoque cette fonctionnalite dans le tuto sur polyfill.io kzbin.info/www/bejne/f2PXg3htg7GJZpI