2 Ways To Make an Awwwards Sticky Footer

Поділитися
Вставка
  • Опубліковано 22 січ 2025

КОМЕНТАРІ • 42

  • @Mati123562
    @Mati123562 6 місяців тому

    Thank you Oliver, your job is a big inspiration ❤

  • @MyGeorge1964
    @MyGeorge1964 8 місяців тому

    Nice Demo website - love it! Thanks.

  • @AdityaRaj-lj5wf
    @AdityaRaj-lj5wf 8 місяців тому

    Thanks Oliver. Love your videos. Good Luck.

  • @HenryBabbage
    @HenryBabbage 8 місяців тому +2

    Nice practical vid thanks!

  • @Way_Of_The_Light
    @Way_Of_The_Light 8 місяців тому

    Thank you for such type of tutorials 🙏

  • @celinenguyen4958
    @celinenguyen4958 7 місяців тому

    I lovee your tuts, thank you a lot 🤩

  • @nonstopper
    @nonstopper 8 місяців тому

    Whenever I tried this a few months back we were constantly getting flashes of the footer while scrolling content heavy pages. It just wasnt work it for us imo.

  • @jshy6847
    @jshy6847 8 місяців тому +9

    man i'm so happy when you use tailwindcss 😭

    • @BegalInsaf
      @BegalInsaf 3 місяці тому

      i actually learn vanilla css with tailwind 🤣

    • @theBarracuda_
      @theBarracuda_ 3 місяці тому

      true

  • @danielnk2024
    @danielnk2024 8 місяців тому +4

    I have a question: for the first method the fixed position can't we use z-index for the page to resolve that too? I mean if we use z-index for the main page when we scroll and the footer is fixed can't that do the same animation?

  • @davidrose-i7n
    @davidrose-i7n 16 днів тому

    the method 2 breaks on firefox, it makes the page scrollable after the footer, as it does NOT collapse the extra space created by -top-[100vh], so you will need to add -mb-[100vh] to that same line to fix that on firefox.

  • @aliventurous
    @aliventurous 4 місяці тому +2

    Instead of clip path you can set the footer to z-index -1

  • @Ivan-Shyriaiev
    @Ivan-Shyriaiev 8 місяців тому

    Cool 🎉 thanks for the tutorial ❤❤❤

  • @soyelchicodelanus8471
    @soyelchicodelanus8471 8 місяців тому +1

    you are the best!

  • @unbeatablesachin
    @unbeatablesachin 8 місяців тому +1

    Thanks for teaching that.

  • @iamahtic
    @iamahtic 8 місяців тому +1

    Looks good

  • @SunnyArbiv
    @SunnyArbiv 7 місяців тому

    you are the best man

  • @ThugLifeModafocah
    @ThugLifeModafocah 8 місяців тому

    awesome tips... thank you.

  • @jiayizhan967
    @jiayizhan967 8 місяців тому

    perfect timing

  • @yovizn24
    @yovizn24 8 місяців тому

    I tought it only works with animation library😂 love ur vids btw🔥🔥

  • @bkashkumar1981
    @bkashkumar1981 8 місяців тому

    man, I was going to implement this animation on my portfolio footer too ☺

  • @nellymotion
    @nellymotion 8 місяців тому

    Nice!

  • @shahnwazhusain9967
    @shahnwazhusain9967 8 місяців тому

    Hi, could you please make a tutorial on locomotive scroll? how can I stop scroll when a modal is open, I'm not able to achieve this. Searched everywhere and tried everything but I couldn't achieve this.

    • @olivierlarose1
      @olivierlarose1  8 місяців тому +1

      There would be multiple ways of doing this, you could toggle an overflow hidden on the main parent when a modal is open. You could also check the library called focus-trap, it’s very nice to manage modals

  • @ritamsantra2372
    @ritamsantra2372 5 місяців тому

    It's not working property, at first I was following the video but it didn't work properly, so i copy the repo then run it, it's still the same. If anyone got the results as shown in the video can you please share your repo

  • @samuelreichor3156
    @samuelreichor3156 5 місяців тому

    Hi Oliver, i use gsap scrolltrigger to trigger an animation when the section is revealed. How would you do something like that?

  • @fiqkyakbar115
    @fiqkyakbar115 7 місяців тому

    hi olivier, thanks for the nice content. but when i check the second method using firefox, it gives different behavior (im not sure it was a browser compatibility or else)

  • @HuyNguyen-my5bi
    @HuyNguyen-my5bi 6 місяців тому

    hey Olivier!, You are always great, but I have a question, can I use this method for sticky section, like mulltiple sticky sections, and how can I do this for height more than 100vh?

  • @Faaiqa-Abbas
    @Faaiqa-Abbas 7 місяців тому

    Hey Olivier!❤ Thank you so much for making things so easy and simple❤. Keep growing.❤
    When I apply Locomotive it does not work. But with Lenis it works with only position Fixed.
    It would be really helpful if you could explain the reason.

  • @mega_play1237
    @mega_play1237 8 місяців тому

    on the demo on your website the footer have cind of animation. how to do it ?

    • @olivierlarose1
      @olivierlarose1  8 місяців тому

      Not sure which animation you’re referring here

  • @wahibaakram5072
    @wahibaakram5072 8 місяців тому

    I was looking for same

  • @abdelkarimelmanssouri9392
    @abdelkarimelmanssouri9392 8 місяців тому

    great work loves it ❤, may you please show us how you added the font to the project because I tried to add so many fonts to my project and it won't work for me, and what is the name of the font you used because it's so good and thank you.

    • @olivierlarose1
      @olivierlarose1  8 місяців тому +1

      Font is Pangram Pangram Neue World

  • @joaomaia9140
    @joaomaia9140 8 місяців тому

    Any news regarding the course?

  • @Sorkstryparen
    @Sorkstryparen 8 місяців тому

    Tailwind ❤!

  • @blyatMail
    @blyatMail 8 місяців тому

    you should make a videos in udemy bro.. surely waiting

  • @vertas.y
    @vertas.y 8 місяців тому +25

    bro quit programming and become a model.

    • @kH-ul4hk
      @kH-ul4hk 8 місяців тому

      Right?? His skin is crazy as well