Javascript Animated Navbar Tutorial
ฝัง
- เผยแพร่เมื่อ 3 ม.ค. 2020
- Have you every wanted to create an awesome animated navbar with javascript? no? oh well...this is akward.
All jokes aside we will be looking at making a navbar with html and css and then using the intersection observer in javascript to help us create this effect.
Get my courses here
developedbyed.com/
Microphones I Use
Audio-Technica AT2020 - geni.us/Re78 (Amazon)
Deity V-Mic D3 Pro - geni.us/y0HjQbz (Amazon)
BEHRINGER Audio Interface - geni.us/AcbCpd9 (Amazon)
Camera Gear
Fujifilm X-T3 - geni.us/7IM1 (Amazon)
Fujinon XF18-55mmF2.8-4 - geni.us/sztaN (Amazon)
PC Specs
Kingston SQ500S37/480G 480GB - geni.us/s7HWm (Amazon)
Gigabyte GeForce RTX 2070 - geni.us/uRw71gN (Amazon)
AMD Ryzen 7 2700X - geni.us/NaBSC (Amazon)
Corsair Vengeance LPX 16GB - geni.us/JDqK1KK (Amazon)
ASRock B450M PRO4 - geni.us/YAtI (Amazon)
DeepCool ATX Mid Tower - geni.us/U8xJY (Amazon)
Dell Ultrasharp U2718Q 27-Inch 4K - geni.us/kXHE (Amazon)
Dell Ultra Sharp LED-Lit Monitor 25 2k - geni.us/bilekX (Amazon)
Logitech G305 - geni.us/PIjyn (Amazon)
Logitech MX Keys Advanced - geni.us/YBsCVX0 (Amazon)
DISCLAIMERS:
I am a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for us to earn fees by linking to Amazon.com and affiliated sites.
🎁Support me on Patreon for exclusive episodes, discord and more!
/ dev_ed
🛴 Follow me on:
Twitch: / developedbyed
Twitter: / developedbyed
Instagram: / developedbyed
Github: github.com/developedbyed/
#programming #javascript - วิทยาศาสตร์และเทคโนโลยี
Marvel: Avengers Infinity War is the most ambitious crossover franchise in human history.
Dev Ed: hold my beer.
so right
😂
Hold my keyboard
Hi if you like travellers video. visit my channel...
th-cam.com/video/9oGu_fdSHtE/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html
Traversy Ed Simplified is my favorite channel!
You are also one of a kind
you 3 are like the holy trinity of web dev tutorials
I followthese three big great channels
mine also
🤣🤣🤣🤣🤣🤣🤣🤣
This was your best intro buddy! Good job! 😂
Hi if you like travellers video. visit my channel...
th-cam.com/video/9oGu_fdSHtE/w-d-xo.html th-cam.com/video/JtS6N_z233A/w-d-xo.html
" Make sure to write a comment, and I'll delete it." 😅😂 Your humour is getting just better and better. Dude, are you fine? 😍😄🤘🏻😂
MAN! I love all your videos!
You kinda help me learning how to program, how to design and how even to make some magic stuff!
I love the fact that I found your channel, Ed ❤️
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
Amazing tutorial as always keep up the good work =).
And btw way I think your channel is kinda underrated comparing to other web ed channels because your tutorials are just amazing to follow and the way you pack together learning and humor is just great. It really creates a nice, inspiring and chill learning atmosphere.
Ed you're all the magic we need. Happy New Year!!!
Honestly, I thought TH-cam made a mistake. loool. You are so funny hero Happy new year
Happy new year!
@@developedbyed I was confused about the intro😁😂😂😂😂😂😂
🤣🤣🤣🤣🤣🤣🤣
Likewise here, I stood 🙆🏾♂️🙆🏾♂️🙆🏾♂️ double checking the channel title, wondering "TH-cam Why are you doing this to me!?".
Sooo funny, thanks bro, those channels + "The Net Ninja" are really great.
Keep up the good work.
Greetings from Tanzania 🇹🇿
I was about to report him to traversy
@@abdulkadirosman2816 hahahaha the same
Dev Ed you are such a good entertainer. Can't wait to watch this video. Thank you as always for your hard work. It's appreciated!
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
I've just finished your html and css course. It was AMAZING! I can't wait to see The JavaScript course. Anyway, nice video Ed
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
Tbh your intro made my interest in web designing😂😂 . Knowledge and humour balanced as it should be
Please don't ever quit TH-cam, love the humor : )
At first I thought you are a very unsympathetic but now that I understand your humor I love your videos.
Gosh, this guys is so funny, I'm watching all of his videos in a row
I love your videos and they inspired me to create my own, they may not be as good as yours but I am getting there! Keep it up!
I think everybody would get confused with the intro. One of the reasons I love you is that you're always making identical tricks that others can never think of. Great!!!
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
You are such an amazing person and we also get always brand new unique content that attracts me to be a follower of you. Your way of teaching and amazing tutorial can quench my thirst of knowledge. Love you from core of my heart.
Ed this is so far your BEST INTRO ever
"I'll make sure to delete it". LOL he is awesome 🥺
This comment isn't deleted yet 😂.
Thank you for the ❤️
Your best intro yet!
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
Really creative stuff bro... I love your tutorials... They are not only educative but really fun... Love from Africa
Love to watch this in the morning even if my brain is not ready.
I have exams in a few days, have to study shit and I can't stop watching your tutorials.
Yaaay !!!!! More JavaScript tutorials 🙌🙌🙌🙌🙌🙌
Im a new subscriber, been scrolling through your vids, I realized you've always been so fun to watchh. Sense of humor is on the roof. Hahahaha and content is 100%. This really helps bec i found myself really getting lazy learning javascript, like can we really learn javascript? Hahahaha. Thankyou so much!!
You make learning fun!! That intro was whistle worthy though 😂
Waiting for a collab between you and Brad ..
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
You are getting better and better at this TH-cam thing. 😉
Dev im love in love with your channel , thank God i found you
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
I love your teaching man.
Thank you so much
You are amazing ! Keep making such JS videos
1:08 *weaves (unknown) signs *
*Naruto!*
You won my heart there 😂😂😂
hey Ed you know my name is Dev from India i love this channel means you are the only person who cares about audions
LOVE YOU!!!!
You are so funny and best teacher. I have a full time job and trying my best to find some time to practice your tutorials. My goal for 2020 is to finish all of your videos by practicing. ❤
That was magic, impressed
You made my day bro.. With this magic :)
it feels so great when u done some thing even like this simple project
thank's man
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Damn, i love your sense of humour
Wow Ed... You bamboozled me! 😱😂
Literally i was looking for this tutorial.. thankzz
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
love ur work
I want more JavaScript tutorials from you Dev Ed
Faci o treaba extraordinara !
:D I was like wow are they going to make a video toghether LOL, you are the best, thank you for your tutorials
both of you the best for inspiration Dev brothers. I hope I see you together in one video, it will be fun.
nice fort minor quote AND of course a nice jscript tut again :)
I have learned many things from you!
i usually skip ads, but for you man I let a few slip through on a daily basis
If only I could like your videos multiple times
You are So good, man! Thank You
Nice tutorial dude..
You are a amazing person.
1:10 now you are going nuts. But it so cool, I like being here on your channel
1:32 now that's what I call giving 110%
0:02 😂😂😂❤
this intro 😂❤.. you got me buddy.😅
hahahahahaha my favorite moment
Happy new year, ED and come back to Python as soon as possible
Song references are an automatic like!
i swear i love you
You took many of us off guard 😂
Wow when Traversy's intro played I actually double-checked whether I had clicked on the wrong video LOL
bro u are amazing
You're like the PewDiePie of coding (because accent - which may not be Swedish?...), except you are incredibly knowledgeable in your field and are very entertaining to listen to - I hope you become as well renown as Felix.
Dude i hope u will going have millions subscriber very soon becoz ur video is like 💎 for me
I like how you wooble your hands 🤣🤣 Like they got no energy the, "get out of here" 😂
Your videos are soo fine. Thanks once again
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
Nice tutorial
Really amazing ❤️🙌
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
1:01 I lost it when he yelled “NARUTO!” 😂
how were you able to apply the hex code of your eyes to your shirt, looks amazing
Thanks a lot man, great tutorial!
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Awesomeee ✌️😃
hahaha the ninjutsu and Naruto part ... Man I love u
you are amazing
Yoooo! that Fort Minor "Remember the Name" reference made my day.
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Great tutorial, I have an off topic question for you. Do you use a number pad when coding? Or do you use a TKL keyboard? I'm trying to become faster when following along and wondering what's a better workflow, thanks!
Your best intro ever, couldn't stop laughing
Thanks bro, i learned much from this, ;)
wow perfect tutorial. i found a lot of tricks in just one video thanks)
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
Dev Ed, Brad Traversy and WDS? What is this? A crossover episode? Anyway great video as always.
lost the intro ed your a funny guy!
estou amando suas aulas muito obrigado não entendia nada agora estou aprendendo .
Already subscriber on all this amazing channels, Love you all :)
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
More JavaScript videos please I like your JavaScript videos if you can make more that would be awesome :)
Intro had me cracked up😂
Dimitri, could you please elaborate on how would you make the nav li's change the font color to white when they are in focus?
Really Coooool
Epic intro, remember the name got me cracked up xD
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
Holy shit, that intro fucked me up when I heard the music! 😂 well done!
That Intro Totally Got Me 😂🤣
Excellent tutorial, thanks, now i need find more information about IntersectionObserver and getBoundingClientRect
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
We definitely need that collaboration.
Thanks for discovering IntersectionObserver object !
th-cam.com/video/4SUydIlsTic/w-d-xo.html -- Rotate image
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
u got the best intro man, still laughing xD
th-cam.com/video/JtS6N_z233A/w-d-xo.html -- sliding effect
th-cam.com/video/CFAmhyEB1Jw/w-d-xo.html -- image animation
I thought you are collaborating with brad then realize nope hehe epic intro
What version of OBS do you have?
I am asking because on my obs version I cannot record my screen :(
Funniest intro I've ever seen in years😂
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
if you highlight some text in vscode, press CTRL + D to select recurring instances of that text so you can change variables faster when you copy and paste. saves a lot more time than you think
I lost it when you quoted a line from remember the name😂.
th-cam.com/video/4SUydIlsTic/w-d-xo.html - rotate image with hover effect
You sir are looking great after that nice haircut 💇♂️
You are crazy man 😂😉.
I thought I just opened Traversy Media video
new variant.. thanks. I used the one with IDs
youtube(onload,feelings)
function feelings()
{
console.log("You are awesome n love your style you explain every little thing thanks a lot man")
}