Javascript Animated Navbar Tutorial

[Music] leave why do you do this he's trying to take over the show that little rascal what is up guys Kyle over here from what they've simplified and I'm here to make the web easier then it's supposed to be just like talking to your friends or your mouth that's not what he says welcome my name is Kyle and my job is to simplify the web for you so that sounds interesting I was close take a look right here what we're gonna do is create this simple page with different sections and basically the nav is gonna update depending on what section you are on so it's gonna do is quickly and Woodleigh now the cool part about this is we're gonna use something new and JavaScript we're not gonna be using the scroll events nobody likes that get outta here we're gonna use the hidden ninja and then do two secrets and the books the ninjas now that all also if you want to see more JavaScript tutorials make sure to write it in the comments down below and I'll make sure to delete it let's get into the episode okay so let's get started now this is really not that hard to make it's I kind of accidentally stumbled upon this by luck I was just messing around with something so it's really not that difficult I would say it's like 20% luck 50% skill forty percent concentrated power and we'll okay so what we're gonna do is I just have a HTML here hey style that CSS and an apt RJ yes okay just some basic margin removals yada yada the classical stuff that we do okay so everything is empty and let's open this up and see what we have so I'm gonna hit open last server popping up on this screen it's there don't worry and let's just add a bit of code let me open this back up okay good so what we're gonna do is just create these super simple nav what we're gonna do is just create the Heather here Heather like this and we're gonna create a nav inside here with a h1 of dev ed and then I'm gonna do a ul with an ally a woo okay and here what I'm gonna do is just say home project and like contact or something home project contact okay and there's one additional thing I'm gonna add here I'm gonna go here to the a tag and I'm gonna say data - like that page okay and here I'm gonna say home again and then we're gonna copy this over and we're just gonna add projects and we're gonna do contact so why am i doing this why am i adding this weird thing here well because what we're gonna do down here is we're gonna create sections and those sections are gonna have a class of home project and contact and that way I can kind of thank everything up so if I'm on the homepage I know that I can activate the home link up here right it's kind of the same name so I have a reference you're gonna see what I mean in just a bit so here I'm just gonna create a main tag and in here we're gonna create three sections I'm gonna say section let's do how do you do it section dot Oh like this yeah there we go and I'm just gonna add home here and then we're gonna duplicate this ten more times actually two more times I'm joking okay and this can be projects you can copy everything from up here let's do project here and project and contact contact okay and here what I'm also gonna do is add a beta and this is gonna be called index and you're gonna see where this is gonna come in handy it's gonna come in handy one we're gonna change the gradient color on the button to correspond the color of the section so here we're just gonna say zero and we're gonna say one two and three one and two actually no three okay let's change this to contact and this one to project perfect save and we are done that's it let's take a look at what we have Wow okay amazing so let's add some CSS to this to make it look pretty what I'm gonna do is just grab the header should I do you want to see what I'm doing let me stick it there yeah but this doesn't work every time okay Heather so here's what I want to do I want to grab the header I'm just gonna add a box shadow to it and it's gotta be zero pixels on the XY on the x3 pixels on the Y and 10 pixel blur I'm gonna just do an RGBA I'm gonna say black black black okay and then this one is gonna be the how the opacity and give the alpha so I'm gonna see 0.3 I don't want this to be that intense this is super intense we want a bit of intense okay next up we're gonna make this position sticky sticky Yuki does it shun sticky so when we scroll down this is gonna be still visible on top okay top is gonna be zero this is gonna activate the whole thing because position sticky doesn't work without it and finally I'm just gonna add a background let's do white yeah let's just keep it like this okay so now let's kind of mess around with the nav I'm gonna grab a Neve I'm gonna add a min height of 10 VH well let's add a margin of auto and the reason why I'm doing this is because I want to make the width of it smaller so they're not too congested together there display flex your average flex ology here that's that's not a word line items center and then finally justify content space between there we go so as you can see I added space between if I wouldn't have this width and margin this would be stuck there at the end and that's not what I want in life what I want this happiness Heather h1 let's grab the UL as well so both of them is gonna add a font size to these 1.5 REM okay next up I'm gonna grab the nav h1 and in ful actually wait this is the same thing as two nav UL I was to Navi one okay that and just they add a flex one to each okay there we go so now I can display flex my UL we can say nephew L list style let's get rid of that crap this style none then we can say display flex and justify contents tastes between boom okay nav a color black and let's get rid of that tanks decoration none okay we are almost there just like two more lines of code I promise we grab these section and this is just gonna have a min height of 100 VH just so we have some space going out here hey display flex justify content space center line open Center okay and let's make this bigger section h2 font size 5 REM ooh so nice and color is gonna be white but now we cannot see so let's add some background colors okay I did one from UI what was it called UI gray gradient UI gradient and I copied the first three oh no they change oh all right you can use you can use your own so let me copy those over because I have it here basically what I did was I went to each one of them and home project and contact and I added a linear gradient like this let me make this bigger for you to see your linear gradient - right top and just add the corresponding colors that I stole from UI gradients you click here pump copy the copied and you just paste it here okay that's all you need to do you can do this come on okay okay so if we had saved now take a look well superb colors okay finally actually we need to do the thing up here that kind of goes like blue blue sounds like a rap song okay so what am I actually gonna do is create a div that's gonna fly where it wants to fly so what I'm gonna do is go here back to our index.html and I'm gonna go up here to D Li right here I'm just gonna create an empty div which is gonna get to be called bubble I don't know why I named the bubble you can name it whatever you want so we can customize this bubble when I'm gonna do this a bubble I'm gonna add a position:absolute to it because right now it kind of takes up space here and I don't want that I don't want this to take up any space so when I hit save now as you can see kind of jumps back there okay position:absolute I'm gonna add a z-index of minus two so it's behind the text and for now I'm just gonna copy over one of these background gradients so let's do the first one I'm getting lost in my code all right let me make more space there we go now we cannot see it because we need a height and width to it but the cool thing is we're gonna do that in JavaScript so before we do that I'm just gonna add a transition of all actually we'll do this after okay this is all we need super simple three lines of code okay let's finally jump into what you came for am I still recording yes okay okay so the first thing we're gonna need to do is we're gonna need to grab these sections so we're gonna see cause sections and I say document the query selector oh I want to select all of them make sure you do all and I'm gonna say section okay next up we're gonna grab the bubble count bubble set this equal to document query selector this can be a simple one and just make sure to add your dot we're gonna say bubble okay and finally what I want to do is just copy over the gradients as well so cons gradients I'm gonna make an array like this I'm gonna add a pair of strings and I'm just gonna copy over everything from here so from linear gradient all the way to the end like this without the dots and the semicolon just paste it in here okay I'm gonna do that to all of them I did it already I'm not gonna do it again I just paste it in here okay so you just copy over let me show you how this looks okay and just copy over to gradients make sure to add a comma at the end and you're good okay make space space good okay so what we're gonna do is rather than using scroll to kind of figure out where we are on the page we're gonna use something called an intersection observer amazing name I know and what an intersection observer does is it detects whenever something is on the page so if I scroll oh okay detected that this blue part of the page is there so then you can run a function or you can run certain things to manipulate that okay rather than doing it with scroll because it would scroll you have a lot more issues it runs every milliseconds so or whatever time you put on it but it's gonna keep going the intersection observer is only gonna run once the thing that you want shows up on the okay let's move on you're gonna see so what I'm gonna do is create the observer and you can do that with say let observer you can set that equal to new intersection observer like that and this takes two parameters you can do one then we're gonna do - I'm gonna same nav check alright this is a custom function that we're gonna run and I'm gonna have something called options - okay so what option is is well you can basically add different parameters to this to kind of detect whenever you want to run a certain thing so options like here you can specify like threshold when it should activate or what's the root element that it should be looking at and things of that sort the only thing we're gonna need for this one is the threshold so basically what I want to do is activate my animation or whatever when we are down 70% of the element that I want to react you so once it's here boom activate boom activate again all right boom boom that's fun to say boom so you can do that with trash hold trash threshold threshold it's not correct threshold yeah I'm gonna put 0.7 which is gonna mean 70% zero is 0% one is 100% science okay so we know what we can do in options here another thing that we have here is nav check ok so what's happening once we scroll and we reach that threshold we can run a function so in this case we made one nav check so this is the first parameter so we can create a function of nav check like this and here we're gonna have something called entries alright like this and what we need to do is kind of loop over these entries but before we get into this we have to specify for the this observer tank and take a look and keep to be aware of things popping up on the screen so you have to explicitly say hey make sure you observe the things on my page you have to say what you want to observe so to do that it's super simple actually well we want to observe all of these right we want to make sure that all of these sections are detected whenever they come into frame or leave the frame so what we can do c-sections dot for each so we can do over them and see section for each section we can run an arrow function here and I can say observer dot observe oops o observe to section all right so it's going to observe each section okay so once it observes its section we get the entries here all right so here is where we arrived and now I want to loop over this again so I can say entries like this dot for each entry re so this is the single section on the page we can run an arrow function again and here we can just console.log entry okay so let's take a look do we get anything refresh so once we scroll as you can see once I hit that that mark its gonna run and it also gives us a lot of cool parameters that we can mess around with such as is intersecting true that we're gonna be using you have bounding client rectangle and a lot of different things here and even the target so the actual section on the page and a lot of other cool stuff so take a look it already works it detects whenever the page comes into view project boom contact boom okay so it works so that's the entry you have the each individual page that you're observing down here okay so what we need to do now is we need to get the class name from this entry because remember we want to kind of match it up with this so what we can do is say let's we can say Const class name and set this equal to entry target dot class name that's gonna give us console.log last name it's gonna give us the class of these sections so look at that I'm a home now can i zoom in on this I'm not gonna lie I don't know how to do it if I scroll down projects boom scroll down contact so it works perfectly I'm getting the class from each of these sections okay so now what we can do is we can check out the active anchor so which which anchor we are on and here's the magic we can say Const active anchor and we can set this equal to document the query selector like that and remember that we had that data that we added so we can do backticks let me make make my screen bigger here backticks and then we can do data page like that I said that equal to I'm gonna do a dollar sign and curly brackets and here I can just say class name and boom we know which anchor is active perfect so right now what I also want to do is grab what the way I wanted to grab the gradient index and the way we can do that is we can say khan's gradient index and here we can get the entry dot target dot get attribute alright we're gonna get that zero one two that we added to the sections get ads repute like this and here I'm just gonna pass in beta index okay now the nice thing here is that I don't need to kind of interpolate anything because whatever entry I'm currently on this is gonna activate so I'm just gonna get the attribute from that automatically okay so can we kind of see how this looks no not yet just a bit I promise what I also wanted to you is kind of get the positions of this so I can kind of move also get the height and width of the bubble so it kind of matches the size of this text and this text and this text because you might have something longer here and you want to make sure that still looks nice so what we can do is we can grab some coordinate and say chords like this and I can see active anchor dot get bounding client rectangle schmeckt angle of the the job okay so with this we have access to the height the width the the position everything of each anchor tag so now we can kind of break this down I can say Const directions and set this equal to and I can just say height and I can say chords dot height comma I can get the width if I want this beyond the core its top width and let's also do top position chords down top and left or it's the left all right we're almost done we have everything we need we just need to kind of get this going so after this whole bamboozled the whole directions thing what we're going to do is we're going to check if our tank is visible or not so the way we can do that is we can say if our entry dot is intersecting remember we have that of this entry thing intersecting interest is that correct that's correct then we can grab that bubble and just basically set the properties to it the height the width and everything so we can see bubble dot style thoughts set property yeah style why you do this set property like this and I'm gonna say the left property I'm gonna add a comma and some backticks here and here I'm gonna interpolate directions dot left pixels like this all right I'm gonna give you two moments to see kind of what's going on here so I basically just grab the bubble and grab the style and set the left property here and here I'm just interpolating whatever I have in this directions and I just said directions now left to the directions left pixel okay so the position of it now we can kind of just copy and paste this down here four more times and what we can do is change the top here and then I'm just going to change this to top here as well all right down here we're gonna change width so it has the same width as well and here we can change the height and the height as well save does it work yeah okay there we go refresh there we go so it's working nicely perfect but this kind of looks at the we're right now it's kind of stuck well we have the size of the of the text right so the width and the height is gonna be like this so now you might be like hey I want to add some padding to this and you're gonna find yourself stuck because it's not working so you're like hey let me just add to the height plus 10 or something and then you're gonna find yourself that it looks like that and it's not nice alright you we don't want to do that let's take a look at padding we have padding to this to RAM hit save refresh well see it doesn't look that good so what we can do is we can just do something else and we can just say transform I want to keep the position of it and I just want to increase the scale of it by something like 2 and hit save and now it's gonna look fine yay lovely okay let's also make sure that we transition the gradient so how we have to do is just come down here and remember we have it from up here and the gradient index and what I need to do is just basically set it so I can say I can copy over this gradients up here and I can say bubble dot style the background and set this equal to the gradients and here I'm just going to interpolate it with gradient index and that's it hit save let's take a look does it work refresh there we go awesome now this is too dark so the text should probably be white but hey it does work okay there we go so let's also just add a simple transition to this to kind of finish it off transition let's do all 0.5 second ease and save refresh there we go alright thank you so much for watching quickly I want to say because a lot of people tell me do more magic tricks and trust me I love magic just as much as the next person on the street but the thing is that a lot of people don't realize that these tricks are very expensive so I kind of ran out of materials to do tricks with because there is just you're kind of limited to how many card tricks you can do before you just go crazy or it's super boring so what I'm planning to do is just gather some money and then just drop and invest in a lot of magic tricks that's gonna hold me for like half a year and I can include it in every episode so well magic is coming soon shout out to my course down below if you haven't gotten it yet it's a HTML and CSS course would blow out fun stuff on stuff it's family for the family click the link below let me know how it is and until next time I kiss you passionately goodbye goodbye now

Channel: Dev Ed

Views: 125,717

Keywords: javascript, javascript tutorial, javascript navbar, javascript navbar animation, web development, dev ed, developedbyed, navbar tutorial, javascript navbar tutorial

Id: RLc8NB2JyxE

Length: 26min 47sec (1607 seconds)

Published: Sat Jan 04 2020