Portfolio Pure CSS Scroll Snapping Tutorial
HTML-код
- Опубликовано: 26 сен 2024
- If you want to see more tutorial like this, make sure to SUBSCRIBE!
Here is a first of many tutorials for you guys on creating fancy and fun stuff for your personal portfolios // personal websites. All of these tutorials using plain CSS or a combination of CSS and JavaScript should make your websites be top of their game, professional, with great user experience!
JOIN MY DISCORD SERVER ► / discord
FOLLOW ME ON INSTAGRAM ► / developerfi. .
CHECK ME OUT ON GITHUB ► github.com/Fil...
INQUIRIES AND COLLABORATIONS ► grebowskifilip@gmail.com
WATCH MORE OF MY VIDEOS ►
►Web Developer Reacts LATEST • Web Developer Reacts t...
► Perfect your Resume/CV • How to CREATE the PERF...
► I Built my DESK! • Building my Minimalist...
► Get Hired as a Software Developer • HOW TO get $100,000+ S...
► 6 Developer Life Hacks in 90 Seconds: • 6 SOFTWARE DEVELOPER L...
► Best Chrome Extensions for Developers: • BEST Chrome Extensions...
► Reacting to Incredible Personal Websites: • Web Developer Reacts t...
► FUN day in the life of a Developer: • FUN day in the life of...
MUSIC BY ► @epidemicsound
#developer #tutorial #webdev
![Pure CSS Snap Scrolling Tutorial [Better User Experience!]](/img/1.gif)
For anyone having trouble to make the SCSS work, and you are using Visual Studio Code, you need the "Live SASS Compiler" Plugin installed and turned on :) Have fun!
Also make sure the version is 5.x since the most downloaded one is outdated (3.x)
@@Creedoo thanks for that info
👍
Thanks
Make Scss tutorial playlist plzz.
Can you please make this a series?This is really helpful!
Yup will do!
Thank you I'm an 11-year-old developer I'll probably be using this
Oh, that's cool. I'm a 14 year old devloper, found this really helpful
No, ur doge
@@pranav1615 dogecoin to the MOON!
@@sillicon8227 same
also watched the live stream
Apparently, the scrollbar adds some px to the section's width (in some browsers), so the total width of each section becomes vw+scrollbar>vw resulting in an overflow x when you have a scrollbar y
I usually set the width of each section to 100% instead of 100vw
I meet the same problem here, and I used React and tailwind-styled-components.
Another issue that troubled me all these days is,
when I set the horizontal overflow view, I got an X scrollbar instead of scrolling down to the left pages.
I used useEffect to add an event listener to solve it.
HOWEVER, I am wondering if there is any method easier?
Because I don't wanna listen to the whole wheel event all the time...
@@styxshy5704 how did you do that can u tell me?
Awesome tutorial! *Definetly* will be using this!
Bro why didn’t this channel blow up yet
I’m waiting! Lol
Idk why, But I'm receiving this video multiple times in recommendation.
Woohoo! 🤪🤪
Just 15:16 min of content have tons of knowledge,how is it even possible....
Today I was just trying to find how to make my website horizontally scroll and booooom...... RUclips algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥
Glad it was helpful! :D
If anyone want to know how justify-content works, is depend of the flex direction, if the flex direction is row (which is by default) will be horizontal, if it is colum, will be vertical and align-items will be the one to center the things horizontal.In a nutshell, justify-content works in flex direction value.
Thank you so much for this. Googled so much and didn't find what I wanted much less explained in such a simple way.
This is what I have needed for my current project. I was using JS for this, uffff..... Thank You
I just wanted to say I love your videos they are very entertaining and educational 👍
I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.
Been looking for a scroll snapping tutorial as good as this for a while now (just wasn't understanding it). You're a God send Filip!
Glad I was able to help you!!!!
So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!
did not know that you can ignore flexbox shrinking the children width by setting the child's flex to none. Learned something new from this video! +1 from me (y)
you are awesome!! I was looking for that for so long time
I used to use smooth-scroll but this is way more fancier
This would be a sick series. Maybe something along the lines of teaching common/cool CSS tricks like this, or parallax scrolling, or animations.
That is the idea! It will be a series!
@@developerfilip great!
can we have more small tutorials like this plz
Yes!
I'm from Vietnam, I appreciate your video, it's quite good and useful
Just started learning some html and css. I had a rly basic tutorial, but i swear this video made me understand so much so quick(i di have some java experience). 10/10 thank you
This is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!
please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨
Cheers!
Will do!!!
Yoooooo this is awesome
Your explanation is so good. Would love to see you make more tutorials like this.
amazing bro just no words you did it with css !!!!
Great work man 🔥
got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻
great tutorial, just revamping my site, and this pops up, nice timing
Hey filip, i want to thank you for making this video
I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot
Amazing tutorial, thanks!
Thank you Filip 😊
Really nice tutorial and I’ve not touched scss but your tutorial just blew my mind and I’ll be usin it
Great vid! Thanks for sharing!
Brilliant! Thank you!
Thanks man, will try it out for sure :)
Really cool I will use it tomorrow on my project. Thank you.
Great video Filip. I definitely will be using this
Fantastic. This was so easy to understand as you elaborated to simply.👍
Thank you bro!! That's what I wanted🙌🏻
This was such an amazing video 😍
One of the best I have ever seen ❤❤.
Please continue with more such cool vedios 🦚
5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)
amazing tutorial and great explanation dude! please make this a series..
For the record: this does not work nicely with a computer mouse. it works great and looks amazing with a trackpad, but looks very bad if you try to use a mouse wheel on it. Therefore, I would actually recommend using JS for this instead, especially if this is something you're going to use on a professional portfolio :)
Just tried coding it, I was really disappointed when I found out that it will snap only if the next section is taking 50% of the page
please can you tell me how to do that on mouse?
Awesome tutorial, thanks and please keep continue & make this a serie.
thanks bro this video really helped me for my projects
I'm so gonna use this! This is fun.
very helpful, thank you !♥ good luck 👍for next one!
Hey Filip. This is beautiful. Thankyou for sharing
AWESOME! Thank You!!!
Damn that was so cool. Thanks
Super cool bro, congrats!!
Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!
Simple and aesthetically appealing
easy and clear thank you Filip
Hello...
Your tutorials are awesome!!!!
Any possible way you can make the whole tutorial on scroll animations?
How to change the background for differeent section please?
Thank you so much Filip for this helpfull video, amazing! Lots of love
Aaah... such a nice small css tut😁❣️
Great Tutorial, thanks from Brazil
Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)
Thanks for this!
This is a really good explaination. Thank you!
It was nice ! Do more of these !
wow this was cool!!
love this
Thank you Filip for tutorial
If you're having problems with an extra scroll bar, add "overflow: hidden;" into body class.
Amazing… love it. Surely gonna give a try 🤙🤙
Very simple but informative video!
I needed this! Thanks!
Really nice one!! thanks for sharing!
Omg so cool, thanks 😁 regards from Perú
output doesn't work what do all are same way
4:48 these moment burned my eyes... XD
SUPERB!!!!!!
Thanks bro! ♥
Please do this tutorials more ❤️
Nice video dude!
Hi Filip… you are a really a Great teacher, I‘ve just a Little Problem with css. Might be possible That the Sass Compiler makes trouble ..
The Child is Not recognized as section Child …
Cheers steff
Hi, Ive used codepen to code what you did, and there was no animation or anything like scroll snapping. Can you please tell me why?
a shorthand : You can use shift+alt+down arrow instead of copy paste in vscode
tf, why are you flipping my nose at the start, what did I do to you?!
Crazy simple
That was Very useful ...appreciate it
THANK YOU SO MUCH
Sir we will love to know how to move 3d objects in js.
Love ur videos❣
Amazing I going to try it now.
9:32 start of relevant code if parent and child are made
want a video of horizontal animation of different pages on website that moves like a carousel but they are pages and not images ( with a timer of course)
Fabulous explanation ✨
Thank you! ;)
hi, great video.
from brazil🇧🇷🇧🇷
great tuts
It was very useful
HEY! I used this method but for AGES I couldn't align anything absolute in each 'section' or DIV once I'd done it. Found you must add "contain: content" to the section to stop the display properties cascading into every DIV. It doesn't demonstrate a real world use with just the one bit on text in each section.
Thank you mate 😊
thank you so much