Intersection Observer

 Intersection Observer


const main = document.querySelectorAll("h1");     <<< [It will select all h1]
 const observer = new IntersectionObserver((entries) =>{     [all h1 are in the form of events in entries as array]
    console.log(entries);     [if you have 3 h1 you will see 3 intersection observer as items inside array]
    entries.forEach((entry) =>{  [inside that array each intersection obeserver as selected using foreach loop]
        if(entry.isIntersecting){     [ entry refers to single intersection observer from 3 of them (3 ota h1 maddhe 1 ota)]
            console.log("THIS IS entry");  [ isIntersecting means whether it is on screen or not ]
            console.log(entry);   [ if any of entry (i.e.  h1) is being displayed under screen then this if statement runs  ]
            entry.target.classList.add("show");  [  when h1 is being displaying on screen then another class is added to h1 which content CSS property ]
        }
    })

 },{
    threshold: 1,   [It means 100% of h1 should be seen, then only if statement will run]
    rootMargin: "-250px" [It will reduce that screen size, so that on exact time data can be displayed +ve increases screen size]
 });

 main.forEach((events) =>{   [This means we want to run intersection observer for all h1, each and every h1 are executed, if there is single element no need to use for loop]
    observer.observe(events);
 })

Code without any notices :


const main = document.querySelectorAll("h1"); 
 const observer = new IntersectionObserver((entries) =>{
    console.log(entries);   
    entries.forEach((entry) =>{
        if(entry.isIntersecting){ 
            console.log("THIS IS entry");
            console.log(entry);
            entry.target.classList.add("show");
        }
    })

 },{
    threshold: 1,
    rootMargin: "-250px"
 });

 main.forEach((events) =>{
    observer.observe(events);
 })


Comments

Post a Comment

Popular posts from this blog

Gsap effect on click

 Gsap effect on click   < div class = "item" >     < div class = "circle" ></ div >     < h1 class = "head" >Angela</ h1 >   </ div > Here is the same code, small gsap effect on click; * {     margin: 0 ;     padding: 0 ;     box-sizing: border-box ; } body {     display: flex ;     justify-content: center ;     align-items: center ;     height: 100 vh ;     background-color: rgb ( 10 , 8 , 19 );     color: white ;     font-family: sans-serif ; } .item {     display: flex ;     gap: 1 rem ;     align-items: center ;     cursor: pointer ; } .circle {     height: 20 px ;     width: 20 px ;     background-color: white ;     border-radius: 50 % ; } Javascript; gsap . defaults ({ duration : 0.2 }) const myAnime = gsap . timeline ({ paused...
Read more

Gsap timeline position parameters

 Gsap timeline position parameters In the following timeline code:  let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }) normally when animation of box1 completed in 1s then box2 starts and after 1second of box2 animation of box3 starts if the duration of box1 was 5 second then animation of box1 will take 5s to complete and then only animation of box2 starts. For more enhancement the position parameter was introduced Some of the examples of position parameter are: 1. let mytimeline = gsap . timeline () mytimeline     . to ( '.box1' ,{ x : 400 , duration : 1 })     . to ( '.box2' ,{ x : 400 , duration : 1 })     . to ( '.box3' ,{ x : 400 , duration : 1 }, 1 ) On that box 3 there is "1" outside the {} which means that   start exactly at a time of 1 It do...
Read more

Special Property: Stagger

Special Property: Stagger The stagger property allows you to offset the start time of multiple targets in a single tween.  In GSAP3 you no longer need the staggerTo(), staggerFrom(), and staggerFromTo() methods of GSAP2. gsap . to ( '.box1' , {     y : - 400 ,     stagger : 0.1 }) there will be 0.1 timing difference between 1st and 2nd box, and 0.1 timing difference between 2nd and 3rd, I mean  each box will start 0.1 seconds after the previous one starts. lesser the value of stagger lesser will be duration and timing get overlapped, the greater the value greater the timing difference between elements A stagger object gives you greater control over where the staggers start from and how the timing is dispersed. gsap . to ( '.box1' , {     y : - 400 ,     stagger :{         each : 0.2 ,         from : 'end'     } }) each:0.2  means there will be 0.2 seconds  be...
Read more