Animate on Scroll With Intersection observer

hi guys welcome back so today i've got another tutorial for you where we're going to be looking at using the intersection observer which is uh built into javascript and we're going to be using it to create this kind of animate on scroll effect okay as you can see as we scroll down the page we get our images reveal and you'll see that they're zoomed in at first and they zoom out as the image is revealed okay so just to refresh that okay so when the images come into the viewport we get the animation applied so this intersection observer is a really good way to implement this kind of animate on scroll uh functionality for your websites it's um a lot better performing than listen up for the scroll event for example which can be very cpu intensive so yeah i hope you enjoyed this video guys and let's get going thanks okay guys so to get started with this project uh you can see i've got the free usual files we have the index.html style.cssnap.js files you'll also see that i've got this images folder containing five images uh labeled one to five um in that format that's very important naming convention we use for this project and you'll see they're just all images of kind of random mercedes images i found on unsplash.com use whatever images you want for this project okay so let's just start by going to our index.html file get a boilerplate up and running um in the document title i'm just going to say mercedes hyphen benz like so and then in the head section we'll just link to our style.css and then in our body we use the script source to our app.js file like so okay now coming in to the body next we want to do here is i'm just going to create a section okay and then within this section we're going to have a h2 and it's just going to have a title of mercedes-benz like so and then underneath this we're going to have a d for the class of image hyphen wrap okay and then within this div we're going to have another div of class of image okay and this image wrap is going to be used to kind of at first conceal the image and then we're going to add some kind of animations to it just to reveal the image that is um there contains okay so i'm just going to copy this section down four more times it's got five images i'm just going to change the headings we use as well so for the second one we'll just say amg power use whatever you want any kind of cheesy advertising line um next thing we can do here just say modern luxury underneath this we'll say pioneering innovation and then underneath this finally we'll just say uh superior performance like so and we don't need that last section so i'll just delete that okay and that's pretty much it for html guys so let me just open this in live server one thing i do want to do actually because i don't want to get a uh pop-ins font okay so let's just do that now say pop-ins go to google fonts i'll get the light version here just copy that link tag come to our header save that and then we'll also just get the css selector like so come back to our next one i do is just go into our css okay so let's just do that now start on css i'm going to get my global selector here and we'll just say margin 0 padding 0 box sizing order box and i'm just going to paste that font in there as well now you can see we've got we've removed all our default margins and paddings and you can see we've got that nice pop-ins font applied okay so next we want to do here um is i'm just going to say um i'm going to set the text color to white as well okay it's going to have a dark background on this so i'll just say so that's why and then i'm going to come here and say body i'm going to set the background to background to color so that's that nice dark gray color okay and then i'm also just going to say height 100 width okay and then width of 100 as well underneath this actually that's it for our body for now um yeah that's it for now that's all good okay so now next we want to do here is i'm going to select each of our sections so we just say section like so and we're going to say position relative and then we'll also say a height of 100 viewport heights that'll space out each of our sections now and then we'll also say again a width from 100 and then i want to just set the overflow there's nothing to say that's fine okay so underneath this next we want to do here is select our image wraps okay so dot image hyphen wrap and then here we're just going to say a width of um first thing we'll do is actually set the position to relative and then we'll say a top of 40 percent okay and that will be a 40 from the relevant section the parent section element and then we'll also say a height of 40 as well okay and then underneath this we're going to give it an initial width of one pixel okay so when we're going to perform the animation which makes it fade out from the left so it makes it makes it wider revealing the inner image okay so we start off a very narrow one pixel and then i'm also just going to set the overflow's hidden this is very important because i don't want to see the image it contains and then until we expand it sorry and then we're going to set the opacity at zero for before we perform any animations just so we can't see on the screen okay and then underneath this we're going to say dot image hyphen wrap dot active so this is when we apply the active class to this image wrap element and then we're going to set the width after that to 40 viewport whips and then we'll set the opacity to one and then we're just going to play our transition settings here say transition and for our opacity okay we wanted to just um there'd not be no kind of delay there so straight away zero seconds and for our width when we make the adjustments from one pixel to 40 pixels we want that to take a total of two seconds okay so a nice kind of slow reveal effect okay and that's it for our uh dot image wrap active class uh next we want to do here is just say so we say dot image wrap dot active and so we're going to say when uh oh what's going on here okay i'm gonna nightmare okay that's it and then we'll say when our image wrap is active and then we're going to select the image that it contains and then here we're just going to say transform and then we'll say scale of one and then underneath this we'll say transition and then here we're just going to say one second ease out okay so what this does when we apply the active when our image wrap is active the image it contains we're going to transform it to scale it with one okay and that's just the original original size of the image okay we're going to start it off quite larger like 1.6 1.6 uh in size which is quite large and then we as we apply this active class it will just bring it down to size the original size and that transition is going to take one second and we're also applying this kind of animation setting of ease out to make it a bit more smoother okay now underneath this let's just select our image next so we'll say dot image here position absolute uh top zero left zero width i'm going to give this a width for full tv pull whips okay and then we're going to give it a height of 100 of the parent which is the image wrap and then what we're going to do underneath this is we're just going to say background size i'm going to say cover and then we're also going to say background position and we're going to make that center this background cover will just fill the image to the um actual image div okay and it will uh apply the correct kind of aspect ratio so but you might get kind of like um some cropping on your image okay because it obviously if it's not the right size if it's not if it's not um if it doesn't fit the image on a div perfectly you're obviously going to lose some elements of the image okay and that's why i'm kind of positioning the center to the div so we get the the important parts of the image in view and then i'm just going to say here um transform and we're going to set the scale when it's 1.6 that will make the image slight slightly larger when we're going when we apply the active class it will make it the original size and then i'm just going to apply one more filter on here i'm going to say grayscale 100 just to give the webpage that kind of monochromatic kind of look okay and then finally all you want to do here is i'm just going to say h2 we'll set the um position to absolute um the opacity to zero um top of seventy percent like so and then we'll also say a z index of two to bring it in front of the images and then we'll say a transition of 0.2 seconds and then underneath this we're just going to say h2.active so when we apply the active class again we'll set the opacity to one and then we'll just say transition um and i'm just going to say three seconds here okay to give that a nice slow fading effect okay and that's it for our css guys let's move to the javascript now the first we want to do with our javascript is select all of our image wrap items so i'm just going to say here let image items equal and we're going to make that an array and we're going to use a spread operator we'll say document dot query selector all and then here we can just say dot image hyphen wrap laksa okay and then underneath this let's just console.log the image items just to make sure they are they are listed as an array come to our console see we have our array of image wraps there okay that's great so next what i do here is um select our titles next to our h2 element so i'll just say let's titles again we're going to use the array spread operator document.queryselectorall and here we can just pass in the h2 tag name okay and then underneath this let's just change that like so okay so next thing what we're going to be using for this guys we're going to be using something called the intersection observer okay so this is going to it's a basically um it's a fairly new um tool which is built into javascript where we can basically create an observer instance and have it observe multiple elements on our page and when they come into the viewport we can then um you know perform functions on those elements such as apply an active class that kind of things performer css animations do whatever you want really so let's just get something going now the first we need to do for our observer is create an options object so we'll just say let's options equal and here this is going to take in two settings so we'll say root margin i'm going to set that to zero pixels and then also a threshold i'm going to set that to 0.2 so 20 and what this root margin does so the root for the default root for our observer is the viewport or the body okay and what we're doing here we're setting the the actual margin of when we want it for how we want to apply our thresholds okay so we're sending zero pixels because we only want to affect the changes when the elements come into the viewport okay if we set for example the root margin to 100 pixels um it would take the 100 pixels below the viewport into consideration as well when performing the calculations okay and this threshold here this 20 this is applied to elements that we are we are observing okay so if 20 of the element comes into the viewport uh past the root margin then or possibly imagine rather then it will perform the um the function okay but as we've applied a zero root margin here when the element comes twenty percent of its higher into the viewport it will trigger a callback function which we're going to create now let's create that now we'll say um i'm going to say let set item active so this is the callback function which is going to be triggered when our item comes into the viewport that's just going to equal i'm going to pass in just the entries that we're observing okay and then for now i'm just going to say console.log entries okay i don't want to pull anything i just want to show you what this does and then underneath this we're just going to say we're going to create our observer instance so we'll just say let observer equal new intersection observer like so and then this first argument it takes in is the callback function we want to apply so we're going to just use that set item active callback and then we also pass in the options as well which we set up here okay and then underneath this next one i want to do here is i'm just going to say image items dot four each and here everyone's passing the item and the index okay and then here we're just going to say item and then we want to select remember each of our items is the image wrap in each image wrap contains a child div which houses our image so here we can say dot children zero for the first child which is our image and i'm just gonna say dot style dot background dot background image then that's going to equal and we're going to pass in some backticks here i'm just going to say url we're going to then point this to our images folder we'll do a template literal here passing the index plus one as you remember we started our images with one two three then started zero that's why i added a one there and i could just say jpeg like so and then underneath this i'm just going to say if the index okay mod 2 equals 0 that means the number of the index is even then we're just going to say let's do a question mark there we'll say item dot style dot left and then we're going to make that equal 55 otherwise we'll say item dot style dot left that's going to equal five percent okay and then finally what i want to do here is we're just going to next call our observer so we'll say observer dot observe and then we can just pass in the item okay so you'll see now we have our five intersection observers here for each of our image wraps you'll see the target here um and you'll also see we have these uh kind of um methods here so you can see we have this is intersecting and that's equal to true as this element is currently on our screen you'll notice with the others so this is down this is not on the screen you'll see is in section is equal to false is visible is false okay so when he's coming to view that will change the is insecting will change to true when they're on the screen okay and you can see as we um we console.log in the entries it gets console logged okay and then you can see so if we scroll down to the bottom now for instance if we next open up you see we get the um we get each entry listed and we can then see if they're you know insected or not okay so next we want to do here is i'm just going to do the same thing for our titles so we'll say titles dot 4h title and then we can say here actually i want to pass in the index as well so say title index and then here we can say i'm just going to copy this actually okay and then i'm just going to say obviously change item to title and here i'm just going to say if it's an even number we'll put the text to 45 from the left otherwise we'll say 35 okay and then i'm just going to get our observer to observe the title as well okay and then i think what we need to do now is just change our callback function to actually do something so remember we had this active class so we're going to apply these to our image and our title so to do that let's come in here i'm just going to say entries dot 4h entry and then here we can simply say if entry dot is intersecting that means it's on the viewport secting then we can say entry um dot remember we had for each entry if we click in we have the target okay so we can set the target which is the actual element so we'll say entry dot target dot class list dots add and here we just say active okay so it doesn't look like i supplied for our image items yet let me just see what's going on there hmm we get our text coming you can see when we scroll down the page the text is fading in but why is our images not coming out let's just see what's going on if we go looks like we're getting some errors okay it's not finding our images so let's just make sure that's where our path um images okay forward slash and now you can see we get our images okay so for our refresh this now let's make this bigger you can see now we get that nice transition effect you can see we get that the images go the images go from large to small when we when we scroll down okay so see it's nice and large we get a kind of zoom out effect i couldn't find any matches in your sorry about that um okay so yeah that's pretty much it for this effect guys um that's how you kind of get this um effect guy in this animate on scroll effect obviously this is a lot more um better for performance you know just as opposed to listen up for the scroll event to perform these kind of functions so yeah i hope you got something out this video guys thanks for watching and i'll see you next tutorial cheers

Channel: Conor Bailey

Views: 2,505

Rating: 4.9636364 out of 5

Keywords:

Id: FRALpfypSBs

Length: 21min 16sec (1276 seconds)

Published: Tue Feb 16 2021