C'est hyper cool ! je l'utilise sur bcp de projet, que ça soit pour les animations, on pour faire du lazy loading d'images, de vidéos ou meme de composants 🙌 si je veux faire des grosses animations au scroll j'utilise GSAP avec ScrollTrigger 👍 les perfs sont top
Salut ! Je tenais à te remercier, grâce a ton tutoriel j'ai ENFIN réussi a comprendre l'intersection observer, je comprenais rien avec plusieurs tutos, merci beaucoup !! Continue ta chaine !
Super vidéo comme d'hab ! Mais je me demandais du coup, vu qu'ils ne font que les intersectionRatio et pas les pixels précisément , il suffit de partir du principe que 1 intersectionRatio = 100% des pixels, si on récupère la valeur en pixel de l'élément, avec un petit produit en croix on peux en théorie ajuster l'intersectionRatio au pixel près non ?
Merci pour cette super vidéo. En revanche, j'ai un peu de mal à comprendre la différence entre le threshold et le intersectionRatio ? J'ai essayé le code ci-dessous. Il fonctionne bien, mais qu'est ce qui fait foi pour le changement du background ? c'est le thresholds ou le intersectionRation ? let observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if(entry.intersectionRatio > 0.5){ target.style.backgroundColor = "red" } }) },{ threshold: 0.5 }) let target = document.querySelector("div") observer.observe(target)
Je vois, en fait le threshold permet de déclencher le callback seulement une fois que l'intersectionRatio l'a dépassé (ou re-dépassé en arrière), son intérêt est de ne pas déclencher le callback à chaque changement même très petit du scroll sur l'élément. Donc dans le cas de ton exemple, le code sera exécuter quand on scroll vers le bas et qu'on vient de dépasser 50% de l'élément (= threshold: 0.5), et quand on scrollera à nouveau vers le haut alors le callback s'exécutera encore mais il ne passera pas dans le "if" car l'intersectionRatio sera inférieur à 0.5 dans ce sens. Voilà tout !
C'est hyper cool ! je l'utilise sur bcp de projet, que ça soit pour les animations, on pour faire du lazy loading d'images, de vidéos ou meme de composants 🙌 si je veux faire des grosses animations au scroll j'utilise GSAP avec ScrollTrigger 👍 les perfs sont top
Je n'avais même pas pensé à l'utiliser pour du lazy loading ! C'est hyper propre bien joué, merci du partage ;)
Le big boss du JS a encore parlé.
Nouveau sur ta chaine, t'expliques vraiment bien, continues
Salut ! Je tenais à te remercier, grâce a ton tutoriel j'ai ENFIN réussi a comprendre l'intersection observer, je comprenais rien avec plusieurs tutos, merci beaucoup !! Continue ta chaine !
Ahah super ! Très content de ça ;)
Super comme astuce ! Merci !
très intéressant merci pour la vidéo
Super ! 👍👍👍👍👍👍👍
C'été incroyablement intéressant, merci pour cette vidéo ! :)
Ça va m'être très utile !
Franchement Bryan tu m’épates là merciii
Super! Très intéressant et très bien expliqué.
Bravo et merci 👍🏼
Super vidéo ! Je te trouve très pédagogue, j'ai tous compris 😁
top !!!!
Salut merci c'est vraiment pas mal cette API quand même ! Vivement un cas ou j'en aurais besoin.
Clac ! 😂! Super tuto
Super vidéo comme d'hab ! Mais je me demandais du coup, vu qu'ils ne font que les intersectionRatio et pas les pixels précisément , il suffit de partir du principe que 1 intersectionRatio = 100% des pixels, si on récupère la valeur en pixel de l'élément, avec un petit produit en croix on peux en théorie ajuster l'intersectionRatio au pixel près non ?
Exactement ! C'est ce que j'entendais par "en bidouillant un peu" ahah ;)
@@DevTheory ahhh oui forcément c'est ce que je me disais ahah
Merci pour cette super vidéo. En revanche, j'ai un peu de mal à comprendre la différence entre le threshold et le intersectionRatio ?
J'ai essayé le code ci-dessous. Il fonctionne bien, mais qu'est ce qui fait foi pour le changement du background ? c'est le thresholds ou le intersectionRation ?
let observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if(entry.intersectionRatio > 0.5){
target.style.backgroundColor = "red"
}
})
},{
threshold: 0.5
})
let target = document.querySelector("div")
observer.observe(target)
Je vois, en fait le threshold permet de déclencher le callback seulement une fois que l'intersectionRatio l'a dépassé (ou re-dépassé en arrière), son intérêt est de ne pas déclencher le callback à chaque changement même très petit du scroll sur l'élément.
Donc dans le cas de ton exemple, le code sera exécuter quand on scroll vers le bas et qu'on vient de dépasser 50% de l'élément (= threshold: 0.5), et quand on scrollera à nouveau vers le haut alors le callback s'exécutera encore mais il ne passera pas dans le "if" car l'intersectionRatio sera inférieur à 0.5 dans ce sens.
Voilà tout !