Simple Pure CSS Parallax Scroll Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 26 ส.ค. 2024

ความคิดเห็น • 96

  • @developerfilip
    @developerfilip  3 ปีที่แล้ว +5

    👍🏼2000 likes for a MASTER parallax debug trick! Can we do it? 🔥

    • @mohenbagio9967
      @mohenbagio9967 ปีที่แล้ว +3

      Hello Filip it's reach 2000 likes.. I really happy to see your promise awesome trick.. thank you so much indeed

    • @SK-vg3mw
      @SK-vg3mw ปีที่แล้ว +2

      Is this debugging video out ?

  • @danielk.7285
    @danielk.7285 2 ปีที่แล้ว +21

    Well bro,
    i've spent the whole day watching multiple videos of how to create a parallanx effect while using pure css. But right now i finally understand it. Your explanation of the transformation and the coherences between the single layers helped me a lot and now I can continue coding my own effects. Dude, Thank you! :) I guess it's the best parallax video online.

    • @developerfilip
      @developerfilip  2 ปีที่แล้ว +3

      This really makes me happy !! I’m glad that I was able to provide a clear explanation!! Thanks for watching!!!

  • @shakivali3835
    @shakivali3835 3 ปีที่แล้ว +10

    25:20
    thnx man, recording video during mid night for us
    Appreciation👏👏👏
    BTW love your content and with you since you posted your first video

    • @developerfilip
      @developerfilip  3 ปีที่แล้ว +5

      Haha yes you are very observant! Thanks for the support!

  • @awekeningbro1207
    @awekeningbro1207 3 ปีที่แล้ว +15

    You can use calc() function to calculate the scale value dynamically.

    • @ChrisMcCrowe
      @ChrisMcCrowe 2 ปีที่แล้ว +2

      Hi Awekening Bro can you explain more about this? How can we use calc() function? I'm a total noob Thanks in advance if any anyone responds ;)

    • @mattiasraiani6984
      @mattiasraiani6984 2 ปีที่แล้ว

      ​@@ChrisMcCrowe simple.
      calc(1 + ($translateZ * -1) / $perspective);
      in pure css u have to change the variables with your values.
      that's it

    • @lovesowl2259
      @lovesowl2259 ปีที่แล้ว

      @@mattiasraiani6984 bro for such concepts does i need to learn all js...
      i finds it hard what i should learn.. there is react node.. blah blah.. very confused😢

  • @seppe8846
    @seppe8846 2 ปีที่แล้ว +3

    Amazing tutorial. Learned what i needed to know about parallax and even a bit about sass.

  • @tnczm
    @tnczm 2 ปีที่แล้ว +4

    This was a fantastic tutorial Filip, thank you so much for making it seem so easy! :D

  • @williamiiifarquhar4345
    @williamiiifarquhar4345 2 ปีที่แล้ว +6

    Thank you for this video. This was definitely the best for parallax that I could find!

  • @DMmaster335
    @DMmaster335 2 ปีที่แล้ว

    I had soo much trouble finding a library that can do that and work with ssr. You've helped a ton.

  • @spondoolie6450
    @spondoolie6450 2 ปีที่แล้ว

    This is the best video on parallaxing with CSS only

  • @mohamedlabarre166
    @mohamedlabarre166 11 หลายเดือนก่อน

    I was using fixed background before but this way is awesome

  • @M2rsh
    @M2rsh 5 หลายเดือนก่อน

    21:10 the formula can be simplified to 1-(Z translation / Perspective)

  • @franciscomontesgomez2067
    @franciscomontesgomez2067 ปีที่แล้ว

    Thanks for your clear explanation! The concepts and processes involved are clear to me for the first time. Well done -regardless of the typos, LOL-. Kindly mention at the beginning that you are using SASS. Not all of us are yet familiar.

  • @GetMihir
    @GetMihir 3 ปีที่แล้ว +1

    Excited!!!!

  • @InvestWithGirish
    @InvestWithGirish 2 ปีที่แล้ว +2

    May I use it in wordpress?

  • @Jairinoclipsandmore
    @Jairinoclipsandmore ปีที่แล้ว

    Thank you very much for sharing this video to us sir, I am so happy I found this tutorial because I am now in the stage of development of my own project in making it also as a baseline reference of my future projects. God bless

  • @mohamedlabarre166
    @mohamedlabarre166 11 หลายเดือนก่อน

    Hi guy
    just discover your channel great work.

  • @hakankaraahmetoglu490
    @hakankaraahmetoglu490 2 ปีที่แล้ว

    Great tutorial. it helps me so much during a case. Thank you

  • @priyanzhu
    @priyanzhu 2 ปีที่แล้ว

    Filip is genius at maths!

  • @FedoraRose
    @FedoraRose 3 ปีที่แล้ว +2

    Its a Good Tutorial thank you😁😁👍

  • @aman4uas
    @aman4uas ปีที่แล้ว

    Please create a tutorial on "How to debug parallax effetcs"

  • @boheeatelier6681
    @boheeatelier6681 7 หลายเดือนก่อน

    great tutorial, dzieki! is there a way to slow the top layer down?

  • @rikm.harrison3991
    @rikm.harrison3991 2 ปีที่แล้ว

    Best explanation of all things thanks a lot brother..

  • @hakamnabhani3382
    @hakamnabhani3382 2 ปีที่แล้ว +1

    Thanks for that Tutorial it was pretty simple yet well informative.
    but you wrote CSS in the title and i saw you doing bunch of stuff that did not work at all for me like (@mixin . @include).
    then realized you're using scss too so i decided to go solo on bunch of stuff cause im still newbie and didnt yet go thro scss or javascript

  • @vanshikaparikh2806
    @vanshikaparikh2806 ปีที่แล้ว

    Love your tutorials

  • @juanpablovelasquez996
    @juanpablovelasquez996 ปีที่แล้ว

    Thank You!!!!

  • @nicatquliyev9692
    @nicatquliyev9692 3 ปีที่แล้ว +1

    It is really good touch for websites. I’ve recently used parallax effect in one of my projects. Great tutorial thank you 🙏

  • @are223
    @are223 2 ปีที่แล้ว +2

    Please provide the source code, thanks

  • @2radix774
    @2radix774 2 ปีที่แล้ว +1

    how do I achieve some kind of intuition for css?
    do you guys know any good free online sources to learn that?

  • @martanxmen
    @martanxmen 3 ปีที่แล้ว +1

    I don't really know what it is but for me the whole overlay will not show up after writing the css code. the only thing I see is the normal text. Like the css isn't linked up. Wich it is. Could anyone help me?

  • @hookahthetravellingmonk
    @hookahthetravellingmonk ปีที่แล้ว

    Great explanation

  • @TheEphonix
    @TheEphonix 3 ปีที่แล้ว

    Nice tutorial!!!! Love this videos

  • @legen_dary42
    @legen_dary42 2 ปีที่แล้ว +1

    Thanks for the tutorial. Really made parallax a lot more understandable. But... just sayin'... SCSS is not pure CSS. Might want to change the title. Keep it coming, though. 2000 likes!

  • @brianpk7206
    @brianpk7206 ปีที่แล้ว +1

    Everyone make sure you don't use a 1px perspective value like many tutorials online say! It gives messed-up results if you zoom out.
    Good thing this video doesn't do that though 😁

  • @gamertag8721
    @gamertag8721 3 ปีที่แล้ว +1

    preserve3d :P oh! wait - let me look at the video before I comment ;) - [edit]: I was right, but you did solve the issue of scale - so cheers, and take your thumbs up

  • @ujjwalsingh5188
    @ujjwalsingh5188 11 หลายเดือนก่อน

    thankyou

  • @waitforit838
    @waitforit838 3 ปีที่แล้ว

    Very informative video on the internet 😍👌🏼

  • @dhruvkedar5824
    @dhruvkedar5824 3 ปีที่แล้ว +1

    2000 likes done broo, now show the secret

  • @momakplayz7985
    @momakplayz7985 3 ปีที่แล้ว

    Please release the especial secret effect, i really want to see it.

  • @MohamadAtout-qo9ce
    @MohamadAtout-qo9ce ปีที่แล้ว

    really awesome. hope you included a code source

  • @user-re4uw4ui2y
    @user-re4uw4ui2y 5 หลายเดือนก่อน

    @developerfilip can you please share its source code because i followed the step but the css is not working as required

  • @danielosthues5229
    @danielosthues5229 2 ปีที่แล้ว

    Hey Filip! I absolutely love your tutorials. But would you agree that especially the preserve3d - property seems to be a massive performance killer? Using Chrome's Frame Rate Watcher the Framerate instantly drops from 59 FPS to 30 FPS and below when activating this. Would you maybe be able to share a video on optimization techniques especially when building Pure-CSS-Parallax like these? Or would you even recommend, using a combination of Javascript and translateX / translateY for better performance, as these do not need the 3D features? It would be very cool if you could share your opinion and findings on this.

  • @muhammedsaadi
    @muhammedsaadi 3 ปีที่แล้ว +1

    Very First, 😍

  • @romain4582
    @romain4582 2 ปีที่แล้ว

    Good tuto !
    I was thinking : does it work on mobile device ?

  • @martinheywang4962
    @martinheywang4962 3 ปีที่แล้ว

    Don't you use Emmet? I'm sure you've already heard of it.
    Also, really good tutorial! 👍

  • @malingsiaanjing2904
    @malingsiaanjing2904 3 ปีที่แล้ว

    TERIMA KASIH mr. Filip

  • @snap-n-shoot
    @snap-n-shoot 2 ปีที่แล้ว

    I used Dreamweaver as a test and it does not recognise the @mixin rule or the @include rule."Unknown @ rule"

  • @enmattk
    @enmattk 3 ปีที่แล้ว

    Very Nice!

  • @AlThePal78
    @AlThePal78 3 ปีที่แล้ว

    it would be easier if you made a div like this, .container*2 the astrick 2 means replicate it twice :)

  • @alvaro-pintado
    @alvaro-pintado 3 ปีที่แล้ว

    Does anyone know why the background-attachment: fixed is not working on IOS ??

  • @Sneha-zc7wo
    @Sneha-zc7wo 7 หลายเดือนก่อน

    @mixin align-center property is not working. please tell how to fix it !!

    • @dmytro_ryzhykh
      @dmytro_ryzhykh 2 หลายเดือนก่อน

      Think you figured it out by now, but in case you are still struggling - note that default CSS doesn't cover this and since Filipp's is using SCSS it might get confusing. So what you need to do to get it working in case you are using simple CSS, you should explicitly set properties for the specific clasess wherever Filipp's using @mixin.
      E.g. .intro_screen {
      height: 100vh;
      background-color: tomato;
      display: flex;
      justify-content: center;
      align-items: center;
      }
      hope this makes sense

  • @reminosouci
    @reminosouci ปีที่แล้ว

    Hi great tutorial, thanks so much. I try to write the code, am I the only one having to add .base_layer=left:-6px;

  • @ericliss9600
    @ericliss9600 ปีที่แล้ว

    Arggggg! I followed the steps and for some reason I get no parallax but the layers are moving back and forth in Z direction. Still scrolls flat! I have preserve-3d on each of the layers. I'm missing one little thing. Darn it.

    • @developerfilip
      @developerfilip  ปีที่แล้ว

      Message me ur code on twitter, I’ll try and help ☺️

  • @shokzlion332
    @shokzlion332 3 ปีที่แล้ว +1

    Hi Filip do we need any other package or nodejs in order to run this sass code as my code doesnt display as it should be ?

    • @developerfilip
      @developerfilip  3 ปีที่แล้ว +1

      Sass is just a way of writing the code with indentation. You will need a sass compiler for the machine to understand!

    • @shokzlion332
      @shokzlion332 3 ปีที่แล้ว

      @@developerfilip do i install it from extensions in vscode or is that something to download separately?

    • @matthewwilson8008
      @matthewwilson8008 2 ปีที่แล้ว

      @@shokzlion332 If you are using visual studio you can use live sass compiler from the extensions. just hit the little "watch Sass" button on bottom right and boom, your sass is compiled my friend.

  • @jozsefszabados1183
    @jozsefszabados1183 3 ปีที่แล้ว

    Not All Heroes Wear Capes!🔥🧠🥇

  • @michelt1807
    @michelt1807 2 ปีที่แล้ว

    Did someone happen to achieve a good responsive result using this idea? I am ok when using large width, but really struggle with smaller size... I am not good at math btw :)

  • @eo333
    @eo333 ปีที่แล้ว

    no need to use external calculator. Type in the math ex. 3+1-1, select the math, ctr + shift + p, select the Emmet evaluate math. DONE!

  • @rithesh9150
    @rithesh9150 3 ปีที่แล้ว

    #Love to Learn new things

  • @KociBond
    @KociBond 2 ปีที่แล้ว

    11:54 to 12:04 Luxembourg flag xD

  • @seemaakter
    @seemaakter 2 ปีที่แล้ว

    Can anyone give me this code?

  • @AlThePal78
    @AlThePal78 3 ปีที่แล้ว

    why did you put your body{otherclass} inside the body ?

    • @developerfilip
      @developerfilip  3 ปีที่แล้ว +1

      Scss

    • @AlThePal78
      @AlThePal78 3 ปีที่แล้ว

      @@developerfilip so in scss that is how you do it I never knew, thanks for an awesome video :)

    • @developerfilip
      @developerfilip  3 ปีที่แล้ว +1

      @@AlThePal78 glad you learned something new!

    • @AlThePal78
      @AlThePal78 3 ปีที่แล้ว

      @@developerfilip working on my portfolio now trying to implement parrolox a different way

  • @MRV2302
    @MRV2302 2 ปีที่แล้ว

    Where is the debug Video? :)

  • @karthik4519
    @karthik4519 3 ปีที่แล้ว

    What exactly is sass??

  • @slendi9623
    @slendi9623 3 ปีที่แล้ว

    Hello :D

  • @georgegeorgio70
    @georgegeorgio70 2 ปีที่แล้ว

    Siema mordko jakiej czcionki uzywasz w vs code?

    • @developerfilip
      @developerfilip  2 ปีที่แล้ว +1

      Siemka, Menlo :)

    • @georgegeorgio70
      @georgegeorgio70 2 ปีที่แล้ว

      @@developerfilip u mnie jakoś inaczej wyglada :D

    • @developerfilip
      @developerfilip  2 ปีที่แล้ว +1

      @@georgegeorgio70To mam w ustawieniach: "Menlo, Monaco, 'Courier New', monospace"

  • @genosthegreat7870
    @genosthegreat7870 3 ปีที่แล้ว

    Thank you filip
    Voice crack 7:27 😅

  • @kailaskhade
    @kailaskhade 3 ปีที่แล้ว +2

    I know this

  • @MehrasIrani
    @MehrasIrani 2 ปีที่แล้ว

    man your content is good, but damn you're too slow. waaaaay too slow, I almost wanted to quit. teaching people perspective is not your problem, teaching the code functionality is. this could easily be 15 minutes.

    • @developerfilip
      @developerfilip  2 ปีที่แล้ว

      Not everyone learns fast, use x2 speed next time :-)

    • @MehrasIrani
      @MehrasIrani 2 ปีที่แล้ว

      @@developerfilip 😁 I kind of had to do that and skip some part, I already know my way around, I just wanted to learn the pure css style. But good tutorial for the beginners. Nice one

  • @sahilaujla
    @sahilaujla 3 ปีที่แล้ว +1

    Pro Tip: Don't make dull pages like this -- they are just boring -- even if you teach the underlying concept of Parallax effect but very less people would watch it because it's not visually appealing

  • @AjitKumar-mm9zq
    @AjitKumar-mm9zq 3 ปีที่แล้ว

    Excited!!!!