Your videos never seem to amaze me. CZcams is full of videos on the basics of CSS but your videos focus on the more advanced things that people might not even have heard of. Thank you for that!
Thank you so much! I thought I knew CSS and JS but then I started seeing these sites with fancy transitions and didn't know how they were achieving that look. This video is so helpful thank you!
I dunno if you read the comments much, or if there are just too many comments to sift through, but i just wanna say your channel is absolutely fantastic. It's specifically your channel and DevEd that I come to all the time to learn new css tricks. im still relatively new to web development and am finishing up my first fullstack site. but the thing that has lacked in all my education is styling. you guys have helped me to make my site and other demo stuff I've done recently look so much better than my earlier stuff. honestly if I land a job because of my portfolio, you guys are to thank. As a matter of fact, once I get my portfolio site going, i'm going to credit you guys in my about me section.
Had some problems with Gulp CLI on my Windows machine. If you're running into an issue with 'gulp watch' not working, you can make the scss file a css file, delete the package.json, node_modules, package-lock.json, and just remove all "&" (&:after becomes .nav__link::after) in the css and replace it with the parent css class and use Live Server extension to get auto page reload in the browser. Clean up your curly brackets in the CSS and everything works. Thanks for making this Kevin, love your teaching style.
seriously the 1st vid of theory is difficult for me to understand maybe because i'm a newbie but after this part i see it clearly that we are talking about the observe() native function all along hahahahahaha THANK YOU REALLY SO MUCH you deserve more subs.
Thank you for a great video! As a beginner, I was struggling to change text color of anchor links. Had to look at Kevin's code on github for the solution. It turned our than css 'color: inherit;' on each anchor link (there is a class for each like) solves it.
Now we need to offset anchor links to accommodate the sticky header height. Not the margin-top: -100px: padding-top: 100px; to every anchor Awesome video btw! Your videos are the best!
Are you only using CSS variables for demonstration purposes, or is there another reason you're choosing CSS variables over SASS variables when you're already using SASS? Still learning, just trying to wrap my head around it all 😅
Every time I start a new project I find myself having to go back through your library of videos, gradually what I am learning is starting to stick, although I still struggle to remember even the most simple instructions! - one thing from this video, is how are you changing the background image in the big hero section, I swear every time I look at the video it's a different Unsplash image but I can't find how you're doing it within the CSS. Thanks as always for sharing
Are you a mind reader or what 😅 I was stuck on this topic today and wanted to find a solution. I open CZcams and bam ! There is your video to fix my problem 😍 This happened thrice till now 👍🏻
Got a question for you. This works great, but it only works for one section. Let's say I have a bunch of sections with a class called "black-section" and I wanted the navigation to change every time it intersected with one of those sections, what code would I have to change?
Kevin Powell you great really like you videos it's very informative and technical and easy to understand for us. can we use intersection observer API in Reactjs?
Can you please make a video on responsive Mega menu with really nice animation. This series has been absulutly amazing. I am Learning so much. Thank you for your hard work.
They've been around for a little bit (not that long), but browser support has only recently really come around (Safari just started supporting it in their latest release). IE doesn't obviously, but there is a polyfill, which I'll do a short video on to wrap up the series.
Does anyone else get this error for the last line of JS " sectionOneObserver.observe(sectionOne) " ? TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Just found your channel. Thank you for these! Would be interested to see intersection observer used for a table of contents say for a wiki or one-pager. I'm trying to assemble one myself with IO but struggling.
That's cool, thanks for sharing! Apparently, it is not supported by ie11, so my question to you is: would you go for listening to scroll event if you had to support ie11 or would you do it in some other way?
In connection to this great exercise, is it possible to a parallax effect with this technique (i.e. as you scroll down the page the background image scrolls slower)?
What would the "const sectionOne = document.querySelector(".home-intro");" be if I wanted to target and trigger off of section ID (services) rather than CLASS (bg-dark)? As in example (). Would it use ("#services")?
Probably a silly question but how is that border on the nav elements made? Where it starts from the middle and stretches out to the end points. I'm looking through the repo but I can't seem to get my head around it
Weird, for me it adds the class but the new CSS properties don't apply to it. Also, I when I exit the section again, the class isn't being removed. Any ideas?
Hi Kevin, how would the intersection observer work with position sticky of CSS. Instead of the elements in the viewport, I need to observe the element which currently is stick on the top. Amazing series though!
Hi! I was wondering where do u put transition on when u scroll back up? I put transition on the .nav-scrolled only so when i scroll down the transition works but when i scroll back up it just removes instant
Please don't stop this series, it is amazing and it really helps alot !
Your videos never seem to amaze me. CZcams is full of videos on the basics of CSS but your videos focus on the more advanced things that people might not even have heard of.
Thank you for that!
Thank you so much! I thought I knew CSS and JS but then I started seeing these sites with fancy transitions and didn't know how they were achieving that look. This video is so helpful thank you!
You're the best instructor I have ever see, you deserve more than the best and I have learned a lot form you.
I dunno if you read the comments much, or if there are just too many comments to sift through, but i just wanna say your channel is absolutely fantastic. It's specifically your channel and DevEd that I come to all the time to learn new css tricks. im still relatively new to web development and am finishing up my first fullstack site. but the thing that has lacked in all my education is styling. you guys have helped me to make my site and other demo stuff I've done recently look so much better than my earlier stuff. honestly if I land a job because of my portfolio, you guys are to thank. As a matter of fact, once I get my portfolio site going, i'm going to credit you guys in my about me section.
I do my best to read them all :)
Glad that you enjoy my content, and thanks for taking the time to let me know :D
Lovely, thanks, finally finished my product landing page with a few JS tweaks so it looks nicer :)
Had some problems with Gulp CLI on my Windows machine. If you're running into an issue with 'gulp watch' not working, you can make the scss file a css file, delete the package.json, node_modules, package-lock.json, and just remove all "&" (&:after becomes .nav__link::after) in the css and replace it with the parent css class and use Live Server extension to get auto page reload in the browser. Clean up your curly brackets in the CSS and everything works. Thanks for making this Kevin, love your teaching style.
I just spent 3 hours trying to wrap my head around this with no results. Then I found your video and it all makes sense now! Thanks a ton!!!
Been battling on this for days now and just came across your channel... It's really helpful, thank you.
This saved the last hair I have after trying to fix a previous "successful attempt" of background switching. Thank you.
Ever wondered How this comes true and your video Help a lot!
Also wondered how sites did that, figured it would be much more than that! Will definitely try this out.
Fantastic video! Really clean way to manage scroll events. Definitely my go to method now. Thanks a ton for this!
Finally figured it out, thanks 'The King of CSS' ❤️
You're a lifesaver, outstanding channel, I can't stop watching and liking your videos!!
seriously the 1st vid of theory is difficult for me to understand maybe because i'm a newbie but after this part i see it clearly that we are talking about the observe() native function all along hahahahahaha THANK YOU REALLY SO MUCH you deserve more subs.
Thanks you help me to learn Javascripts from scratch knowledge 😀
Thank you for a great video! As a beginner, I was struggling to change text color of anchor links. Had to look at Kevin's code on github for the solution. It turned our than css 'color: inherit;' on each anchor link (there is a class for each like) solves it.
This is awesome! You’ve got everything that I looked for.
Thanks for this series
Awesome! This is really practical and something I can use - credit to Kevin Powell.
You are a good teacher.
Thanks Kevin. Great tutorial!
Ohhhhh!!!! This trick solved so many problems for me! Thank you, Kevin!
Perfect just was i was looking for, ill sleep and apply it to my site
Thanks a lot! I didnt even need to watch the intro video and I fully understood!
Now we need to offset anchor links to accommodate the sticky header height. Not the margin-top: -100px: padding-top: 100px; to every anchor
Awesome video btw! Your videos are the best!
Thank you so much. Great. Root margin concept was very sexy!
Thanks Kevin! Been looking for this for quite sometime!
These videos are so helpful! Thank you for making them!
I'm in love with Intersection Observer.. Just amazing 👍👍👌
Thanks for sharing this Kevin! Much appreciated :)
Didnt think of this idea until you made a video about it. Thanks for thinking ahead haha
Are you only using CSS variables for demonstration purposes, or is there another reason you're choosing CSS variables over SASS variables when you're already using SASS? Still learning, just trying to wrap my head around it all 😅
Great tutorial! Thanks!
Just amazing! I'm going to copy those JS codes 😁
:D :D :D
Every time I start a new project I find myself having to go back through your library of videos, gradually what I am learning is starting to stick, although I still struggle to remember even the most simple instructions! - one thing from this video, is how are you changing the background image in the big hero section, I swear every time I look at the video it's a different Unsplash image but I can't find how you're doing it within the CSS. Thanks as always for sharing
thank you for this great tutorial!
I just did a menu shrink effect on scroll and its super buggy! This definitely fixes those issues! Thanks!
Are you a mind reader or what 😅 I was stuck on this topic today and wanted to find a solution. I open CZcams and bam ! There is your video to fix my problem 😍 This happened thrice till now 👍🏻
Haha, always nice to time things perfectly :D
Same for me!
Epic! I was trying to do it the old way with offsetTop. This is so much easier
Fantastic series and a great video, Kevin!
beautifully done
This was really helpful!
Thanks for your tutorial
Yess ! have been waiting for this. Thank you
amigo eres mi héroe muchas gracias, pude cambiar totalmente el estilo del nav y hacer un super efecto, buen tuto!!
Ya it cuming after three years, but you have helped me a lot, so thank you ;)
That was a lot of fun
Thank u for this awesome video
Great Video! really really useful
Helped me a lot, thanks man!
Tnx from Russia!) Great and simple
Awesome! You could get the header's offsetHeight to set the options.
Take a drink every time he says "I've a got another video for that subject already" and you'll be as drunk as i afgbnq
Got a question for you. This works great, but it only works for one section. Let's say I have a bunch of sections with a class called "black-section" and I wanted the navigation to change every time it intersected with one of those sections, what code would I have to change?
Thank you ☺️
Kevin Powell you great really like you videos it's very informative and technical and easy to understand for us. can we use intersection observer API in Reactjs?
Your videos are always amazing！Thank you，sir ❤️❤️❤️
This is awesome, thank you!
Thank you good sir :D
can't wait to implement this in my projects!
Great work, Thank you.
Thanx! You helped me a lot!
wow, you save my life!
Can you please make a video on responsive Mega menu with really nice animation. This series has been absulutly amazing. I am Learning so much. Thank you for your hard work.
Why CSS Variables and not SCSS Variables? Another awesome video.
These Intersection Observers are really handy. Have they been around forever and no one knew, or are they something new or newly supported?
They've been around for a little bit (not that long), but browser support has only recently really come around (Safari just started supporting it in their latest release). IE doesn't obviously, but there is a polyfill, which I'll do a short video on to wrap up the series.
smashing series. am literally deleting massive of legacy code from projects :)
Very good!!!
Does anyone else get this error for the last line of JS " sectionOneObserver.observe(sectionOne) " ?
TypeError: Failed to execute 'observe' on 'IntersectionObserver': parameter 1 is not of type 'Element'.
Yes I did, still trying to get the solution.
@@festusribiro6018 Mybe you have no element with the class 'home-intro' or you had a typo on the second line.
Did you find that solution?? I m stuck in that
@@tejasjoshi1907 me too :(
Thanks Man 🤍
Great videos kevin
Just found your channel. Thank you for these! Would be interested to see intersection observer used for a table of contents say for a wiki or one-pager. I'm trying to assemble one myself with IO but struggling.
Any luck on this front @noahScott ? I am trying the same, so if you have any insights I would very much be interested to know.
Thanks
That's cool, thanks for sharing! Apparently, it is not supported by ie11, so my question to you is: would you go for listening to scroll event if you had to support ie11 or would you do it in some other way?
great video
Im late for this video but also a beginner in programming, i didnt understant 1 thing, is this code vanilla javascript or is it another framework?
You're awesome dude
Nice sass
perfect!
I would have used classList toggle, and passed in entry isintersecting bool to to keep code clean and tidy
At time-index 7:17 the "sectionOneObserver" is put as an argument in its instance. What does this exactly do?
do you have any video on how to hide horizontal scrollbars that appear when vertical scrollbar appear. i don't know what i'm doing wrong
hey ! thanks for the video! i want to know if its possible to do without sass? thanks
thanks
I'm trying to find the video about how to highlight the menu element of the current section. Help please.
I love it!
Imagine if this became a CSS feature.
@intersection observer (*element to look for if is on screen*) {
CSS code
}
In connection to this great exercise, is it possible to a parallax effect with this technique (i.e. as you scroll down the page the background image scrolls slower)?
Great ! Thanx Kevin ;-)
Nice one. Works great, but what when there's not intro section in DOM?
What would the "const sectionOne = document.querySelector(".home-intro");" be if I wanted to target and trigger off of section ID (services) rather than CLASS (bg-dark)? As in example (). Would it use ("#services")?
But Kevin et al, if I need to differentiate between scrolling down and scrolling up - is there an alternative to a JS scroll watcher in that case?
so the advantage of intersection observer instead of event-listeners is that it is faster at loading?
Probably a silly question but how is that border on the nav elements made? Where it starts from the middle and stretches out to the end points. I'm looking through the repo but I can't seem to get my head around it
Weird, for me it adds the class but the new CSS properties don't apply to it.
Also, I when I exit the section again, the class isn't being removed. Any ideas?
Hi Kevin, how would the intersection observer work with position sticky of CSS. Instead of the elements in the viewport, I need to observe the element which currently is stick on the top. Amazing series though!
What a fantastic tutorial!!!!! But what about browser compatibility is it working with all of them????
Newer ones yup, I think so
Hi! I was wondering where do u put transition on when u scroll back up? I put transition on the .nav-scrolled only so when i scroll down the transition works but when i scroll back up it just removes instant