I think you just saved my sanity while creating my bootcamp project! Trying to go from zero to proficient in code the past 6 weeks has been stressful. So Thank you!
I paused the video, titled my Page as "Smooth Scroll Landing Page", played the video and Brad did the same. Watching brad for a year now, our minds now work similar to brad's standards. LOL.
This video made my day. Such a nice video. I spend my whole day for searching this types of video and thank God, finally I get it and fulfill my speciation. Thank you so much for nice describing. Take love from Bangladesh.
You really are one of the best in the game man, I'm currently studying a degree in internet design and it has nothing on what you put out. Appreciate the content!
This looks amazing! I have just been into web dev for like three months now. This was easy to understand and was something that I wanted to implement, gonna try it out. Thanks a lot.
This was fun! I was able to successfully get option 2 & 3 working. I had issues with Option 1. I’m sure I messed up my code some where along the way. Thanks again for the great videos!
I have a question if i may ask, if i want the scroll to go down to the next section as soon as i scroll like in minute 15:20 but i don't want it go back if i didn't scroll much i hope you understand my question and help me with this...
Good morning Brad. Just watched this video and I enjoyed it. I was wondering if it would be possible for you to do a follow up for horizontal scrolling of the pages.
I think it was me who told you about the scroll-behavior in CSS in the comment sections in your HTML & CSS Udemy course. Glad to see you use it! Then a question, I want to ask you: If we look away from the browsers that only support some of the behaviors, which one will you say is the best? The light script one, the jQuery one or the pure CSS one?
Traversy, alright! Thanks! Then another thing: Everytime I have tried to get e.g. Sass up and running in my text editor (VS Code) by following your guides down to the smallest detail, it hasn’t worked. Not even a single time. Can you help me personally getting it up and running? Thanks in advance!
I have a landing page with a header(including logo and nav bar) and then a background image and content beneath following a footer. Would I use a clearfix for the section so that it won't interfere with the landing page content, because that's what I'm getting. The first section is landing right in the middle of my landing page.
Thanks for the video, Brad. But with these types of Landing Pages, I always had one problem. How can I create an underline effect in the navbar on the current section where the user is looking? For instance if the section he was looking was "About", in the navbar I would see an underline on About, even when he is scrolling. I'd appreciate a comment since I've been looking for a solution to this, but couldn't find.
Pitis Radu I would use a library called Waypoints. When u hit a section (scrollpoint), it would add an active class to the menu item. It’s in addition to this tutorial.
You can do that with plain JavaScript, example with explanation here: codepen.io/dbilanoski/pen/LabpzG, just adjust CSS to get underline effect. Like the commenter before me said, idea is to dynamically add active class to current menu item while scrolling so it can change style (get highlighted).
Awesome. Thank you! Would it be possible to bind arrow keys too using CSS? I like the snap functionality, but I only know how to pick up keyboard input using JS/jQuery.
Hey Brad I know you get a ton of requests! So I’m just gonna put one out there among the many, I would love to see React with D3 and maybe Redux if you could. Otherwise many thanks for all your help we really appreciate it!
hello i have a question i cant use ANY image i import myself. not url not from out of the folder and i dont understand why section#home { background-image: url("Scroll html\Home.jpg") no-repeat center center/cover;; }
Amazing tutorial! Well done as always, Brad. Can someone explain why the background images show up in Chrome, but not when I run the app in Firefox? I'm trying to learn more about the front-end but ugh this is why I'm a backend guy.
@Travesy Media Hi it doesn't work for me not a single option js. that is what I can't sort it out for some time ,my sections are in wrapper and from top 10vh and 80vh height ,nav is on right , all the options what I found are just standard web window from top to bottom 100vh, im rookie in js. and that's my pain in ass . I could go simple way and done but...
Thanks Brad that was an awesome tutorial, just one question how do you get the links highlighted to the hover color that you put when one clicks on the nav items
Hey quick question: I am trying to implement smooth scroll and am following your tutorial quite closely. But after the main container with smooth scroll functionality I want to add additioanl HTML, but can't seem to do so. When I try to render it I can only scroll to the last section of the smooth scroll, but can't go any further. Using inspect I can see the extra HTML elements exist but are off the page. Any help?
Hey brad, this seems to be broken if all the sections are not 100vh, I have 60vh sections and when I use the smooth scroll there's a part of the body that is floating(Like its a fixed part of the body floating I dunno how to explain it). But I tried to set all to 100vh and it's gone but I don't want them all to be 100vh :
Hey this was a great tutorial which I have done for a website that I am developing but I'm having problems with making the Navbar Responsive...can anyone please help me?
Hope you like the video :) If anyone has any other methods they use to get this effect, please leave a comment...Have a great weekend!
I was looking for this for a while but there were no good examples. Thanks a lot sir.
I'm using the CSS property "scroll-behavior: smooth;". It is not as widely supported as I would like, but I assume that it will sometime.
@@galihindra5901 you want him to be your "daddy" right?
Traversy can you please do a video on how to create an embeddedable widget with react js for other website to use??
Thanks for this tutorial! How would you write it in vanilla JavaScript instead of using JQuery? :O
13:20 implement scroll effect with CSS
15:38 implement scroll effect with Jquery
19:50 implement scroll effect with smooth scroll
Hard to keep up with the amount of good content this man puts out. Jeez.
University gets me a degree, Brad gives me the knowledge! This channel is the best!
I think you just saved my sanity while creating my bootcamp project! Trying to go from zero to proficient in code the past 6 weeks has been stressful. So Thank you!
What is best and consistent about your videois that you always start from scratch. I cannot express how much I appreciate it.
Holy crap, you do in 20 minutes what 3 books couldn't tell me.
this is not the career for you guys
It took you 3 books to scroll?
@@kwii22789 dude that is rude. You are watching Brad Traversy and yet you don't know that he hates people like you
@Badimo dude you must watch videos of Brad saying he hates negative person and he stays away from them as much as possible. You got my point dude?
you can look w3school instead, and it has same code
I paused the video, titled my Page as "Smooth Scroll Landing Page", played the video and Brad did the same. Watching brad for a year now, our minds now work similar to brad's standards. LOL.
This video made my day. Such a nice video. I spend my whole day for searching this types of video and thank God, finally I get it and fulfill my speciation. Thank you so much for nice describing. Take love from Bangladesh.
i really appreciate front end content in this channel ,please give more and keep going ,good job
You really are one of the best in the game man, I'm currently studying a degree in internet design and it has nothing on what you put out. Appreciate the content!
This is awesome man. Congrats. Wish more professors were like you.
I concur!
Whenever I am looking for something code-related, you always have the answer!
This looks amazing! I have just been into web dev for like three months now. This was easy to understand and was something that I wanted to implement, gonna try it out. Thanks a lot.
Brad I'm so glad you did this, the z-index: 1 is what i have been looking for, for a week lol. THANK YOU for the small details
Amazing. I'm. Trying to make my personal site and the resources I've found on this channel have been exceedingly useful. Wow.
This man is pure awesomeness. I'm getting so excited everytime the notification hits
I got mine working with jQuery, awesome cross platform. Took a while to find somebody that taught it.
This was great! The last method worked like a charm in my site. Thanks!
This was fun! I was able to successfully get option 2 & 3 working. I had issues with Option 1. I’m sure I messed up my code some where along the way. Thanks again for the great videos!
This is amazing, thank you! Been driving me nuts for days
I really love your videos like this one, everything is made from scratch and explained well.
Your tutorials are easy to learn than other youtubers.
Such a great video! Thank you so much for making this. Simple, straight to the point, great explaining!
You know what sir, you are wow in explaining!
Couldn't get the javascript working, so I am gonna stick with CSS.
Thanks for this nice and easy tutorial.
Amazing as usual. Of course always easy to follow as well ! Thanks Brad !
Thanks for this video, Brad! Top quality as always :)
Thanks for giving us the code in description I appreciate that 😊
love you man, that tutorial is 10/10
Typical Brad like always, straight to the point !!! Good Job !!!
CSS surprising me everyday. Cool tutorial, Brad!
I always check my notification just for you Brad!! Great job keep 'em coming
Cool! I didn't know you could smooth scroll with CSS. Hope it catches on with other browsers.
i have waited for this for along time, thanks Traversy Media
Downloaded all your videos from this Playlist 🙂. Thanks Brad❤️
I did it for my page only in 5mins)).Thank you broo, respect
Needed this for SO LONG. THANK YOU AGAIN, BRAD
Thanks Brad it was very helpful for me. I wish you the best.
Thanks bro, now i can add smooth scrool to my project 🙏
Hi Brad, please do some videos like microservices.
thanks for the video man!! Just a minor correction .navbar{
width: 99%;
}
to avoid it overflowing on the scroll bar!
hey man i love your videos. I am creating my portfolio just like John Doe. Keep it going
Nicely Explained! I subbed!
Amazing.. btw, your voice signifies wise man.. thanks very much
It's tooooooo easy to understand you ....
Your explanation method is awesome...
for the video.
I have a question if i may ask,
if i want the scroll to go down to the next section as soon as i scroll like in minute 15:20 but i don't want it go back if i didn't scroll much
i hope you understand my question and help me with this...
THANK YOU FOR MAKING IT SO SIMPLE!
This is unique and exciting. Thanks Brad!
I love your front end development videos
Thanks for the tutorial. Helped me a lot
If you need to make active links on scroll, instead of using window.scrollY you have to use document.querySelector(‘.container’).scrollTop
thanks a lot dude!!!
Wow, this is a great video. Cool new CSS features.
first option is the way to go! thank you!
all your site designs are nice! do you design it first and then code it out? or are you just designing as you go?
You are the man, Brad!
Great content as always loved it! ❤
What is the definition of passion for you?
Neat! You're such an inspiration. Thank you.
Good morning Brad. Just watched this video and I enjoyed it. I was wondering if it would be possible for you to do a follow up for horizontal scrolling of the pages.
I like the sentence you said: I want you to learn something else~ one more sub
As usual.....awesome. Thank you again.
I think it was me who told you about the scroll-behavior in CSS in the comment sections in your HTML & CSS Udemy course. Glad to see you use it!
Then a question, I want to ask you:
If we look away from the browsers that only support some of the behaviors, which one will you say is the best? The light script one, the jQuery one or the pure CSS one?
I remember :) If we are not taking browser compatibility into question, my opinion is using pure CSS.
Traversy, alright! Thanks! Then another thing:
Everytime I have tried to get e.g. Sass up and running in my text editor (VS Code) by following your guides down to the smallest detail, it hasn’t worked. Not even a single time. Can you help me personally getting it up and running?
Thanks in advance!
Bro you are a life saver. +1 sub
Thank you Sir! Great stuff as always!
dude thank you so much that is so helpful ♥
Sir, thank you so much. This is so helpful and practical.
You're awesome man! Can you do a flutter crash course?
Wow, I'm learning so much. Greetings and Thanks :)
thank you very much. i found it finally.
Those background images were pretty dope. Are they free? If yes, can you provide a link if possible? Video was great as always btw. Thank you!
Really helpful, thanks man 👍
Thanks!!! For giving code..
Excellent work ✔️👦
As always, you're the best.
Thank you so much, Brad!!
I have a landing page with a header(including logo and nav bar) and then a background image and content beneath following a footer. Would I use a clearfix for the section so that it won't interfere with the landing page content, because that's what I'm getting. The first section is landing right in the middle of my landing page.
Awesome
Thank you Brad for the vid!
Brad please do a video on user registration with image upload please please please using node , express and mongoose
Will see what I can do
thank you we are waiting
Take this hint and try to do it on your own "multer" because the best way to learn is to try yourself ;)
You can use express with multer to upload image
imagine begging for a tutorial instead of just googling the problem... LOL
Thanks for the video, Brad. But with these types of Landing Pages, I always had one problem. How can I create an underline effect in the navbar on the current section where the user is looking? For instance if the section he was looking was "About", in the navbar I would see an underline on About, even when he is scrolling. I'd appreciate a comment since I've been looking for a solution to this, but couldn't find.
Pitis Radu I would use a library called Waypoints. When u hit a section (scrollpoint), it would add an active class to the menu item. It’s in addition to this tutorial.
You can do that with plain JavaScript, example with explanation here: codepen.io/dbilanoski/pen/LabpzG, just adjust CSS to get underline effect. Like the commenter before me said, idea is to dynamically add active class to current menu item while scrolling so it can change style (get highlighted).
@@lexsemenenko Thank you very much, you are a life saver, I've been searching for this for months :)
Awesome. Thank you! Would it be possible to bind arrow keys too using CSS? I like the snap functionality, but I only know how to pick up keyboard input using JS/jQuery.
Hey Brad can you do a course on Django and react , oh wait you already did it thanks ♥️
Hey Brad I know you get a ton of requests! So I’m just gonna put one out there among the many, I would love to see React with D3 and maybe Redux if you could. Otherwise many thanks for all your help we really appreciate it!
Brialliant tutorial, great thanks !!!
Nice!!! Thanks Brad
hello i have a question i cant use ANY image i import myself. not url not from out of the folder and i dont understand why
section#home {
background-image: url("Scroll html\Home.jpg") no-repeat center center/cover;;
}
Thanks Brad!
Amazing tutorial! Well done as always, Brad.
Can someone explain why the background images show up in Chrome, but not when I run the app in Firefox? I'm trying to learn more about the front-end but ugh this is why I'm a backend guy.
Just for me
13:24 : css version
15:40 : using jquery
19:51 : using smooth scroll
Me too
Hi there I just wanted to ask you how do you add social media buttons on your website as I'm struggling to add them.
Love your content
Thank you so much ❤️
@Travesy Media Hi it doesn't work for me not a single option js. that is what I can't sort it out for some time ,my sections are in wrapper and from top 10vh and 80vh height ,nav is on right , all the options what I found are just standard web window from top to bottom 100vh, im rookie in js. and that's my pain in ass . I could go simple way and done but...
you are the best keep doing it
Learned something new .
Great information ℹ.
as always amazing contentt
Thanks Brad that was an awesome tutorial, just one question how do you get the links highlighted to the hover color that you put when one clicks on the nav items
Hey quick question: I am trying to implement smooth scroll and am following your tutorial quite closely. But after the main container with smooth scroll functionality I want to add additioanl HTML, but can't seem to do so. When I try to render it I can only scroll to the last section of the smooth scroll, but can't go any further. Using inspect I can see the extra HTML elements exist but are off the page. Any help?
Hey brad, this seems to be broken if all the sections are
not 100vh, I have 60vh sections and when I use the smooth scroll there's a part of the body that is floating(Like its a fixed part of the body floating I dunno how to explain it). But I tried to set all to 100vh and it's gone but I don't want them all to be 100vh :
Thank you Brad
Hey this was a great tutorial which I have done for a website that I am developing but I'm having problems with making the Navbar Responsive...can anyone please help me?