Portfolio Pure CSS Scroll Snapping Tutorial

Поділитися
Вставка
  • Опубліковано 26 лис 2024

КОМЕНТАРІ • 317

  • @developerfilip
    @developerfilip  3 роки тому +108

    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!

  • @saranyaghosh2003
    @saranyaghosh2003 3 роки тому +161

    Can you please make this a series?This is really helpful!

  • @erin1569
    @erin1569 2 роки тому +11

    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

    • @styxshy5704
      @styxshy5704 2 роки тому +2

      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...

    • @eggrat3381
      @eggrat3381 Рік тому

      @@styxshy5704 how did you do that can u tell me?

  • @InWardHayden
    @InWardHayden 3 роки тому +2

    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.

  • @stevenerixon33
    @stevenerixon33 3 роки тому +14

    5 minutes in and I really like your style of teaching. Very easy to understand and code along! Subbed for sure! =)

  • @goytu5493
    @goytu5493 3 роки тому +14

    Awesome tutorial! *Definetly* will be using this!

  • @markasgrazhulis9081
    @markasgrazhulis9081 3 роки тому +26

    Thank you I'm an 11-year-old developer I'll probably be using this

  • @amandeepchauhan6091
    @amandeepchauhan6091 3 роки тому

    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...... UA-cam algo showed me your video and now I'm proud to be your new sub 🔥🔥🔥

  • @domizianoscarcelli1936
    @domizianoscarcelli1936 3 роки тому +1

    Bro why didn’t this channel blow up yet

  • @juanmartinaliaga6368
    @juanmartinaliaga6368 3 роки тому

    Sr. You gained my trust. I am in shock, right now i felt like a damn pro thanks to this video. Cheers from Argentina.

  • @nikkiivanov7995
    @nikkiivanov7995 3 роки тому +4

    I just wanted to say I love your videos they are very entertaining and educational 👍

  • @nyoreachoja2068
    @nyoreachoja2068 Рік тому

    Thank you so much for this. Googled so much and didn't find what I wanted much less explained in such a simple way.

  • @CalvinBonner
    @CalvinBonner 3 роки тому +1

    So sick. I'm really tired of doing this with JS& jQuery so this makes my life 100× easier!

  • @ConorBailey
    @ConorBailey 3 роки тому +2

    Awesome video mate! I just implemented this with JavaScript and this way is so much easier! Thanks for sharing!

  • @isableye7164
    @isableye7164 3 роки тому +1

    I just found out your channel today and being enjoying it so much. Thank you for the great content and please never stop uploading.

  • @VIKASH1870
    @VIKASH1870 3 роки тому +1

    This is what I have needed for my current project. I was using JS for this, uffff..... Thank You

  • @benjaminlevinson5205
    @benjaminlevinson5205 2 роки тому

    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!

  • @jaypratap3888
    @jaypratap3888 3 роки тому +1

    Great work man 🔥

  • @TECHNOLOGYENABLED
    @TECHNOLOGYENABLED 3 роки тому +13

    can we have more small tutorials like this plz

  • @ezramengesha8165
    @ezramengesha8165 3 роки тому +2

    This would be a sick series. Maybe something along the lines of teaching common/cool CSS tricks like this, or parallax scrolling, or animations.

  • @markasgrazhulis9081
    @markasgrazhulis9081 3 роки тому +2

    I used to use smooth-scroll but this is way more fancier

  • @user-bi3xn8dj7y
    @user-bi3xn8dj7y 3 роки тому

    got a google reccomend for your video and wow so good ! good luck with future vids, will definitely subscribe 👍🏻

  • @niclienquan8703
    @niclienquan8703 3 роки тому

    I'm from Vietnam, I appreciate your video, it's quite good and useful

  • @soni801
    @soni801 3 роки тому +8

    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 :)

    • @filipjelic8806
      @filipjelic8806 3 роки тому +3

      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

    • @crazydevil3090
      @crazydevil3090 2 роки тому

      please can you tell me how to do that on mouse?

  • @arogueotaku
    @arogueotaku 3 роки тому

    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)

  • @adrianjuarez4423
    @adrianjuarez4423 3 роки тому +2

    This is truly amazing content, would like to see more of this "tips and tricks" or a css series. Great video!

  • @gabrielreliquias5253
    @gabrielreliquias5253 Рік тому

    you are awesome!! I was looking for that for so long time

  • @newjio4334
    @newjio4334 3 роки тому

    amazing bro just no words you did it with css !!!!

  • @mirchm
    @mirchm 3 роки тому

    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

  • @tusharsaha321
    @tusharsaha321 3 роки тому +1

    Your explanation is so good. Would love to see you make more tutorials like this.

  • @adrielschmitz
    @adrielschmitz 3 роки тому

    Super cool bro, congrats!!

  • @NitinKankarwal
    @NitinKankarwal 3 роки тому

    Great video Filip. I definitely will be using this

  • @iDeviceSlash
    @iDeviceSlash 3 роки тому +3

    please make this a series and i'd be nice if you bring more fancy yet simple stuff ✨
    Cheers!

  • @Awe88Some
    @Awe88Some 2 роки тому

    i saw you before, anyway i will subscribe just now, because of this video, the way of teaching and css simple but amazing tricks are cool! i own you that one!)))))

  • @himanshukamal1
    @himanshukamal1 3 роки тому

    Hey Filip. This is beautiful. Thankyou for sharing

  • @darshandev1754
    @darshandev1754 3 роки тому +1

    great tutorial, just revamping my site, and this pops up, nice timing

  • @ayoubibourkelidrissi1231
    @ayoubibourkelidrissi1231 3 роки тому +1

    Hey filip, i want to thank you for making this video

  • @IshanKesharwani
    @IshanKesharwani 3 роки тому +1

    This was such an amazing video 😍

  • @rye013
    @rye013 3 роки тому

    I was thinking of using this snap for my website now I finally have tutorial. Thanks a lot

  • @iuhere
    @iuhere 2 роки тому

    very helpful, thank you !♥ good luck 👍for next one!

  • @subhasrini2706
    @subhasrini2706 3 роки тому

    Really nice tutorial and I’ve not touched scss but your tutorial just blew my mind and I’ll be usin it

  • @piyushs8176
    @piyushs8176 3 роки тому +3

    Thanks man, will try it out for sure :)

  • @omkarp9943
    @omkarp9943 2 роки тому

    Thank you bro!! That's what I wanted🙌🏻

  • @MsMelanie117
    @MsMelanie117 2 роки тому

    Really cool I will use it tomorrow on my project. Thank you.

  • @dankcommenter5889
    @dankcommenter5889 2 роки тому

    Fantastic. This was so easy to understand as you elaborated to simply.👍

  • @kreten780
    @kreten780 2 роки тому

    If you're having problems with an extra scroll bar, add "overflow: hidden;" into body class.

  • @dexter2374
    @dexter2374 3 роки тому

    Kurcze, nie dość że przy oglądaniu poradników, szlifuje angielski to na dodatek uczę się programować. Proszę o wiecej takich małych tutoriali :) Pozdrawiam

  • @mohammedjuzer9748
    @mohammedjuzer9748 2 роки тому +1

    Hello...
    Your tutorials are awesome!!!!
    Any possible way you can make the whole tutorial on scroll animations?

  • @mstfsgdc
    @mstfsgdc 3 роки тому

    Awesome tutorial, thanks and please keep continue & make this a serie.

  • @kylek3534
    @kylek3534 3 роки тому +1

    What IDE is that? You should do a video on your setup from the software side (what IDE, computer, project management software, etc) that you use. And maybe some go to resources for color selections or anything else you use day to day.

  • @manjeetdhayal2595
    @manjeetdhayal2595 3 роки тому

    One of the best I have ever seen ❤❤.
    Please continue with more such cool vedios 🦚

  • @nobody-bt7mu
    @nobody-bt7mu 3 роки тому

    I'm so gonna use this! This is fun.

  • @bissu21
    @bissu21 3 роки тому

    Aaah... such a nice small css tut😁❣️

  • @mouradbousba5215
    @mouradbousba5215 2 роки тому

    easy and clear thank you Filip

  • @kuzmicheff
    @kuzmicheff Рік тому

    Great vid! Thanks for sharing!

  • @momakplayz7985
    @momakplayz7985 3 роки тому +2

    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?

  • @cesarduarte9313
    @cesarduarte9313 3 роки тому

    Love this video!! Super easy to understand and very clear.. Thanks man! keep it going! love it!

  • @aryantnigam2246
    @aryantnigam2246 3 роки тому

    Simple and aesthetically appealing

  • @michelefernandoloureiroros4366

    Amazing tutorial, thanks!

  • @holymacaroni3319
    @holymacaroni3319 3 роки тому

    amazing tutorial and great explanation dude! please make this a series..

  • @Adhithya2003
    @Adhithya2003 3 роки тому +1

    Damn that was so cool. Thanks

  • @mateopetruccelli3156
    @mateopetruccelli3156 3 роки тому

    Nice video dude!

  • @cyrusthapa4149
    @cyrusthapa4149 3 роки тому

    It was nice ! Do more of these !

  • @dell4559
    @dell4559 3 роки тому

    thanks bro this video really helped me for my projects

  • @itaispector6040
    @itaispector6040 3 роки тому

    Really nice one!! thanks for sharing!

  • @kvncnls
    @kvncnls 2 роки тому

    Hey Filip! What's your favourite way to implement a 'momentum' scroll feature? Can you recommend any free libraries that integrate well with GSAP? 😁

  • @shin5302
    @shin5302 2 роки тому

    This is a really good explaination. Thank you!

  • @requenz_
    @requenz_ 3 роки тому

    Very simple but informative video!

  • @crlntravels
    @crlntravels 3 роки тому

    Thank you so much Filip for this helpfull video, amazing! Lots of love

  • @sheerasai5948
    @sheerasai5948 2 роки тому

    Thank you Filip 😊

  • @victorcandiani
    @victorcandiani 3 роки тому

    Great Tutorial, thanks from Brazil

  • @jakobo5521
    @jakobo5521 2 роки тому +1

    Zajebista sprawa, dzięki piękne za taki CSSowy smaczek. Pozdro! :)

  • @box90s13
    @box90s13 3 роки тому

    Thank you Filip for tutorial

  • @patapizza3382
    @patapizza3382 3 роки тому

    I needed this! Thanks!

  • @juillotine
    @juillotine 2 роки тому +1

    Yoooooo this is awesome

  • @abhayli3958
    @abhayli3958 2 роки тому +1

    hello Filip. Can you make a video on some micro animations using html and css?

  • @bictorino2012
    @bictorino2012 3 роки тому

    wonderfull! other thing ...can u add a menu ....then pages pass for down scrolling and menu bar slide to the right side?

  • @NeverestGaming
    @NeverestGaming 3 роки тому +3

    Bro, what a content! Thanks so much for sharing this! I got one question, my VSCode keep compiling the .scss file into .scss file instead of into .css file, and when I reference the scss on html, it doesn't show any styling effect on the page, what should I do to make that styling effect shows on the page? Cheers.

    • @mayankagarwal5071
      @mayankagarwal5071 3 роки тому

      I hope this will solve your issue
      - download live scss compiler ext
      - write in your scss
      -it should compile into main.css and main.map.css
      -include your main.css file in your html file

    • @NeverestGaming
      @NeverestGaming 3 роки тому

      @@mayankagarwal5071 thank you sir, it works now

  • @hitarthagogoi2829
    @hitarthagogoi2829 3 роки тому

    Idk why, But I'm receiving this video multiple times in recommendation.

  • @RaxtersVlog
    @RaxtersVlog 3 роки тому

    Amazing… love it. Surely gonna give a try 🤙🤙

  • @angelomancilla7153
    @angelomancilla7153 3 роки тому

    Omg so cool, thanks 😁 regards from Perú

  • @IgnitedIce81
    @IgnitedIce81 3 роки тому +1

    Why does it give me a vertical scrollbar? I have to manually scroll horizontally because the mouse wheel scrolls vertically by default.

    • @developerfilip
      @developerfilip  3 роки тому +1

      You can hide scrollbars with css!

    • @IgnitedIce81
      @IgnitedIce81 3 роки тому

      @@developerfilip I'm kinda new to web development, how do I hide scrollbars?

    • @developerfilip
      @developerfilip  3 роки тому +2

      @@IgnitedIce81 .example::-webkit-scrollbar { display: none; }

  • @mattbaro909
    @mattbaro909 2 роки тому

    Fantastic, thank you!

  • @mrbhaskarn
    @mrbhaskarn 3 роки тому

    This is just awesome video tutorial
    Btw your accent is cool.

  • @divyashreesoni663
    @divyashreesoni663 3 роки тому

    Fabulous explanation ✨

  • @SweetPeachannel
    @SweetPeachannel 3 роки тому +1

    How to change the background for differeent section please?

  • @HaraldEngels
    @HaraldEngels Рік тому

    How do you prevent double scrollbars when the element has already created a vertical scrollbar? That could happen when the parent container is accompanied with a header and footer container (whose height get added to the height of 100% what triggers a vertical scrollbar). Any idea?

  • @1GhostRed
    @1GhostRed 3 роки тому

    Thanks for share, but I got an issue, i revised everything if I'm missing something, but I can't scroll using my mouss's scroller, but I can do it using my keyboard arrow as well as my laptop pad, how can I handle this issue.
    thanks for the good content and your good explanation

  • @kasraghasemipoo7991
    @kasraghasemipoo7991 3 роки тому

    That was Very useful ...appreciate it

  • @m4rmedia4rent90
    @m4rmedia4rent90 2 роки тому

    Hi, at first I love your Videos, they are very helpful. A little Question: how kann i convert the scroll direction horizontal wenn I scroll vertical with the mouse well. In Mac it doesn't make a Problem but in Windows.
    Tank you four your help

  • @reallygoodstuff4441
    @reallygoodstuff4441 3 роки тому

    Great work❤️

  • @srikarkandula5313
    @srikarkandula5313 3 роки тому

    Love your videos

  • @freshpootube
    @freshpootube Рік тому

    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.

  • @rishabhsharma3357
    @rishabhsharma3357 3 роки тому

    You deserve a subscribe

  • @hoff_mann
    @hoff_mann 3 роки тому

    hi, great video.
    from brazil🇧🇷🇧🇷

  • @himanshusahu6960
    @himanshusahu6960 3 роки тому

    Amazing I going to try it now.

  • @pranavyeole102
    @pranavyeole102 2 роки тому

    wow this was cool!!

  • @dominiklasek4511
    @dominiklasek4511 3 роки тому

    4:48 these moment burned my eyes... XD

  • @mrspaxxi5970
    @mrspaxxi5970 3 роки тому

    Hey Fillip this video was so helpfull, But what should I do if I want to scroll vertical and the website still scrolls horizontally.

  • @parnikagupta4241
    @parnikagupta4241 3 роки тому

    Heyy Filip, Can you make a video on how much information of Html, Javascript, Css etc is enough for front end. Like how much information is enough information to get started in the field. And I am talking about starter roadmap that would help us create projects with that basic information because actually front end is vast! And as a beginner it is tough to grab all of it. Esp with all the buzzwords we keep listening. I am planning for a job change from network to front end and would really appreciate if this is a video that aligns with your channel asthetic while still helping us.

    • @developerfilip
      @developerfilip  3 роки тому +1

      I will definitely consider your request 😎