Landing Page With Smooth Scroll - 3 Options
ฝัง
- เผยแพร่เมื่อ 7 ก.ย. 2024
- In this video we will create a simple landing page with smooth scrolling. I will show you 3 options including pure CSS (scroll-behavior), jQuery and a lightweight JS script.
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelo...
Code:
codepen.io/bra...
Smoothscroll Script:
github.com/cfe...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
![[Live] : ONE 168 วันนี้!! "โจนาธาน vs ซุปเปอร์เล็ก"](http://i.ytimg.com/vi/0jIN65KgJsI/mqdefault.jpg)
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.
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
University gets me a degree, Brad gives me the knowledge! This channel is the best!
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 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.
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 is awesome man. Congrats. Wish more professors were like you.
I concur!
Couldn't get the javascript working, so I am gonna stick with CSS.
Thanks for this nice and easy tutorial.
I got mine working with jQuery, awesome cross platform. Took a while to find somebody that taught it.
Whenever I am looking for something code-related, you always have the answer!
Amazing. I'm. Trying to make my personal site and the resources I've found on this channel have been exceedingly useful. Wow.
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!
i really appreciate front end content in this channel ,please give more and keep going ,good job
You know what sir, you are wow in explaining!
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!!!
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
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!
Such a great video! Thank you so much for making this. Simple, straight to the point, great explaining!
Hi Brad, please do some videos like microservices.
This is amazing, thank you! Been driving me nuts for days
Cool! I didn't know you could smooth scroll with CSS. Hope it catches on with other browsers.
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.
This was great! The last method worked like a charm in my site. Thanks!
Amazing as usual. Of course always easy to follow as well ! Thanks Brad !
Thanks for giving us the code in description I appreciate that 😊
This man is pure awesomeness. I'm getting so excited everytime the notification hits
Typical Brad like always, straight to the point !!! Good Job !!!
Thanks bro, now i can add smooth scrool to my project 🙏
love you man, that tutorial is 10/10
thanks for the video man!! Just a minor correction .navbar{
width: 99%;
}
to avoid it overflowing on the scroll bar!
I did it for my page only in 5mins)).Thank you broo, respect
Downloaded all your videos from this Playlist 🙂. Thanks Brad❤️
Thanks for this video, Brad! Top quality as always :)
CSS surprising me everyday. Cool tutorial, Brad!
Thanks Brad it was very helpful for me. I wish you the best.
thank you very much. i found it finally.
Needed this for SO LONG. THANK YOU AGAIN, BRAD
THANK YOU FOR MAKING IT SO SIMPLE!
Nicely Explained! I subbed!
Thanks for the tutorial. Helped me a lot
first option is the way to go! thank you!
i have waited for this for along time, thanks Traversy Media
It's tooooooo easy to understand you ....
Your explanation method is awesome...
for the video.
Amazing.. btw, your voice signifies wise man.. thanks very much
hey man i love your videos. I am creating my portfolio just like John Doe. Keep it going
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
I always check my notification just for you Brad!! Great job keep 'em coming
I love your front end development videos
Awesome
This is unique and exciting. Thanks Brad!
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.
Bro you are a life saver. +1 sub
Wow, this is a great video. Cool new CSS features.
Great content as always loved it! ❤
What is the definition of passion for you?
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!
Sir, thank you so much. This is so helpful and practical.
I like the sentence you said: I want you to learn something else~ one more sub
Neat! You're such an inspiration. Thank you.
Thank you Brad
Thanks Brad!
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!
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 :)
Thank you so much, Brad!!
As usual.....awesome. Thank you again.
You are the man, Brad!
Brialliant tutorial, great thanks !!!
Thank you Sir! Great stuff as always!
Thank you so much ❤️
Hey Brad can you do a course on Django and react , oh wait you already did it thanks ♥️
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.
Wow, I'm learning so much. Greetings and Thanks :)
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!
all your site designs are nice! do you design it first and then code it out? or are you just designing as you go?
dude thank you so much that is so helpful ♥
Very like Sir tocking voice thanks support
You're awesome man! Can you do a flutter crash course?
Thanks!!! For giving code..
Excellent work ✔️👦
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.
Learned something new .
Really helpful, thanks man 👍
Thank you Brad for the vid!
Love your content
Thanks a lot!!
Good day boss. I have been watching you tutorial for some days now and i must say, you are so fucking amazing, you are modern and up to date. Nice work. I have a request though. Please can you make a video on how this theme was made, that would be very helpful and nice. Thank you. Preview
Thanks king
Great video.
Hi Brad, can you do something on test driven development using javascript
As always, you're the best.
Hey Brad this is a great video, the scroll snap feature is really convenient to use for my site! However for some reason when I linked the script for options 2 & 3 as well as the main.js it doesn't work for Safari :/
great video!
great job! unfortunately, I wasn't able to force js option work.
amaziiiiiiiiiiiiiiiing Sir nice very nice
an UnrealC++ tutorial bradstyle would be amazing. not sure if the market is big enough
thank you
Plz make a video on locomotive scroll effect
Nice!!! Thanks Brad