Creating an infinite logo carousel with pure CSS

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 มี.ค. 2023
  • In this video we create an infinite logo carousel in a matter of minutes using only CSS.
    Starter files: github.com/Coding-with-Robby/...
    Finished (css): github.com/Coding-with-Robby/...
    Finished (js) github.com/Coding-with-Robby/...
  • วิทยาศาสตร์และเทคโนโลยี

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

  • @vaztechs
    @vaztechs ปีที่แล้ว +22

    Straight to the point. You made it so easy to understand, thanks!

  • @nunolopes8263
    @nunolopes8263 4 หลายเดือนก่อน +3

    Hey Robby, this is awesome!! Exactly what I was looking for... neat CSS, no Javascript even needed. Pure and simple CSS code. Keep up the great work. Thank you!!!

  • @firstbloodfangy6933
    @firstbloodfangy6933 7 หลายเดือนก่อน +15

    Exactly what I was looking for simple and clean, I never get tired of seeing this slide. Great tutorial Robby!

  • @bedtimehorrorstoryyoutube
    @bedtimehorrorstoryyoutube 10 หลายเดือนก่อน +2

    Crystal clear! Loved it!

  •  3 หลายเดือนก่อน +1

    The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍

  • @olaotitoheeb3068
    @olaotitoheeb3068 11 หลายเดือนก่อน +3

    You made it look super simple. Thank you!

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

    After all the hassel of reading different blog posts, this is just the solution I was looking for, simple and straight forward. Thanks!

  • @AkhilaPemmasani
    @AkhilaPemmasani 8 หลายเดือนก่อน

    Thank you, I spent hours on other tutorials ,and as a beginner this was the simplest and easiest to understand and it WORKED!! Saved me more hours of frustration!

  • @willianbraz1987
    @willianbraz1987 9 หลายเดือนก่อน +1

    That was exactly what I was looking for and you explained it so well. Thanks a lot!

  • @crim-son
    @crim-son 5 หลายเดือนก่อน +1

    Can you just imagine, and ive been battling with swiper js for months on how to create fluid autoplay infinite loop carousel, you solved my problem flawlessly

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

    Amazing Robby! In one video you teach a lot of things

  • @Jpugas
    @Jpugas 8 หลายเดือนก่อน +5

    Looked for a clean and simple solution for a while, very cool way to do it. You can also use CSS Mask in place of the :before:after and a linear gradient. Thanks for sharing this!

  • @thegreatkeljb
    @thegreatkeljb 10 หลายเดือนก่อน +7

    This channel is underrated Why you only have 9k subs? You deserve more sir. Thank you for this.

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

      hhghjgjh

  • @anirudh.s8518
    @anirudh.s8518 ปีที่แล้ว

    Great work man, glad i got this on my recommended.

  • @gabrielorofino3527
    @gabrielorofino3527 10 หลายเดือนก่อน

    Precisely what I was looking for. Thank you!

  • @yaregobrozek3725
    @yaregobrozek3725 9 หลายเดือนก่อน

    AWESOME work, man!

  • @patricksweet4104
    @patricksweet4104 10 หลายเดือนก่อน +1

    Thank you Robby. You are truly the man!

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

    Nice brilliant! Very well explained as well thank you, especially with the basic concepts, as i'm not a full-time coder , so I do tend to forget the basic things at times.

  • @janemig
    @janemig 8 หลายเดือนก่อน +1

    Really great and simple, works like a charm! Thanks so much!!

  • @MarianoFrias
    @MarianoFrias 3 หลายเดือนก่อน

    Wow! This tutorial is so awesome! The concept is explained precisely and clearly. Thanks!

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

    Thank you so much ! This is exactly what i was exactly looking for. I helped me a ton =) Subscribed to show my token of appreciation

  • @PilatesinSacramento
    @PilatesinSacramento 8 หลายเดือนก่อน

    Nice! Pretty straight forward CSS. Thank you. I’ll likely use that!

  • @timnooteboom7752
    @timnooteboom7752 3 หลายเดือนก่อน

    Great video! Thanks for this, just what I was looking for.

  • @abdullahfurkanozbek7558
    @abdullahfurkanozbek7558 4 หลายเดือนก่อน

    Thank you so much for the video, I didnt find that well explained tutorial or video anywhere else.

  • @samuelhuang4324
    @samuelhuang4324 10 หลายเดือนก่อน

    Great content, thank you Robby!

  • @Alchemist_dream
    @Alchemist_dream 10 หลายเดือนก่อน +2

    you made it so easy , thanks , i was doing it with intersection observers and intersection ratio in javascript , after i failed i came here and saw this , thanks

  • @user-kb9jw2lk6n
    @user-kb9jw2lk6n ปีที่แล้ว

    amazing bruh keep up the good work

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

    For you keeping my job one more day, thank you

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

    Exactly what I'm looking for , tqsm robby 🎉

  • @TheJokzer
    @TheJokzer 7 หลายเดือนก่อน +1

    Wow I spent so many hours trying to make this and even did some math calculations to render them. But your solution is so much better and simpler

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

    Damn thats what i was trying for past 3 days chat gpt failed to to ths mannn love itttt you got a subscriber man

  • @KevinGonzalez-fo6jt
    @KevinGonzalez-fo6jt 5 หลายเดือนก่อน

    I Love this. And thank you for the detailed explanation 👍

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

    thank u sir you helped me with my deadline today! great video!

  • @Ericpricing
    @Ericpricing 10 หลายเดือนก่อน

    thanks Buddy, for the easy explanation....much love From KENYA🌎

  • @travellingpakistan2348
    @travellingpakistan2348 6 หลายเดือนก่อน

    Thank you so much man! It took me two days, not animating but finding this tutorial 😅❤

  • @vincenzocristiano135
    @vincenzocristiano135 6 หลายเดือนก่อน

    Thanks a lot man, exactly what i was looking for!! cheers!

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

    loved the video. thanks for such crisp info

  • @ASPatel-ds9jt
    @ASPatel-ds9jt 8 หลายเดือนก่อน

    This guy is so much sorted in terms of web development.......truly majestic

  • @renanvcb
    @renanvcb 15 วันที่ผ่านมา

    That was amazing and super easy! Thank you!!!

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

    This is really helpful! Thanks for your work :)

  • @davemiller302
    @davemiller302 8 หลายเดือนก่อน

    The second div overlay made my day. Slight skip on wide screens, but great improvement, thank you.

  • @imdharmeesh.29
    @imdharmeesh.29 5 หลายเดือนก่อน

    Great video bro!

  • @user-sd8iy7rq4k
    @user-sd8iy7rq4k ปีที่แล้ว

    Thank you very much, just what I needed.

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

    THANKS!, really what i ve been looking for :D

  • @tagore4d
    @tagore4d 19 วันที่ผ่านมา

    THanks so much for the video... You are one of the best TEACHERS, who know's exactly what to explain for a beginner like me! You are awessom SIR.

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

    You just earned my subscription.

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

    You made it super easy! Thanks man

  • @xyz-xc1qu
    @xyz-xc1qu 9 หลายเดือนก่อน

    Thanks for this useful tutorial!

  • @user-ds4ym3hs4e
    @user-ds4ym3hs4e 3 หลายเดือนก่อน

    No words for you sir ,
    I just fascinated by your lecture , hats off to you sir
    You are teaching in next level ,
    Thank you for such a great content sir
    Thank you so much for your efforts and explanation

  • @quangminhtran9968
    @quangminhtran9968 8 หลายเดือนก่อน

    Very awesome tutorial, Thanks !!

  • @oraki3576
    @oraki3576 12 วันที่ผ่านมา

    Thank you! Great video!

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

    Exactly what I needed!

  • @MisterSteele
    @MisterSteele 3 หลายเดือนก่อน

    Exactly what I needed!!! thanks

  • @bigmo23
    @bigmo23 3 วันที่ผ่านมา

    you are a legand man, you just made my day with this simple and efficient explanation, also thank you so so much for sharing the code, im no coder and trying to navigate my way building my website and you made me a massive help with this video and the code, thank you so much man, wish you and your family all the best 🙏🏻

  • @WencelausMaina
    @WencelausMaina 10 หลายเดือนก่อน

    Thank you very much. This was very helpful.💯

  • @grabthisinfo1799
    @grabthisinfo1799 6 หลายเดือนก่อน +2

    So useful... In case if anybody saw a glitch when the width is more and images are less, all we need to do is copy multiple times.

    • @wotok7
      @wotok7 4 หลายเดือนก่อน +1

      Damn, I spent 1 hour and didn't find the solution until found your comment. Thanks!

    • @ZakariaTEKNIS-gg4xf
      @ZakariaTEKNIS-gg4xf หลายเดือนก่อน

      Thank you, saved my life, I was literally about to bang my head on the keyboard

  • @victorjesuscetvantescadena6500
    @victorjesuscetvantescadena6500 28 วันที่ผ่านมา

    You are great my friend, thank you very much!!! 🤯

  • @victoriapanidi1419
    @victoriapanidi1419 3 หลายเดือนก่อน

    thank you so much for this great explanation!

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

    This was very useful for my project. Thanks

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

    You're the best and my life saver!

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

    Helpful. Thanks for this video.

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

    You're a gem!

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

    thx so much for this video... its magnific, send a hug for devs on Brasil!😁

  • @t.j.5574
    @t.j.5574 2 หลายเดือนก่อน

    Damn, you're a great programmer lol. You made that look so easy. Great teacher too.

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

    You helped me a lot, thanks!

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

    Excellent!!

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

    Great tutorial!

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

    Excellent!

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

    Thank you Robby 👍

  • @captainsaleh3444
    @captainsaleh3444 9 หลายเดือนก่อน

    thank you very much Robby

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

    Thank you, sir!

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

    my gosh what a code... this is an inspiring job... Super chingon!! Saludos desde Mx Mty

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

    thanks a lot, that was really helpful !

  • @GHSB7462
    @GHSB7462 4 หลายเดือนก่อน

    Thank you very much. Great Video

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

    Muchas gracias desde Galicia!

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

    Awesome tutorial Robby!
    Instead of adding the :before & :after tags you can also add the following css to the .logos container:
    mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
    );
    * This will fade in from transparent at 20% on each side using the background of the container ;)

  • @72nishantwadhawan5
    @72nishantwadhawan5 3 หลายเดือนก่อน

    Thank you! Helped

  • @Edwardtonnn
    @Edwardtonnn 25 วันที่ผ่านมา

    Awesome!

  • @user-kv3oz4tu3t
    @user-kv3oz4tu3t 4 หลายเดือนก่อน

    Thanks you sir for this tutorial!

  • @PawanYadav-mz7fv
    @PawanYadav-mz7fv 8 หลายเดือนก่อน

    well done. thank you 🙂

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

    Thank you!

  • @abdelmadjidhocine4213
    @abdelmadjidhocine4213 6 หลายเดือนก่อน

    Amazing thank you.

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

    love it!

  • @TK-wp3iw
    @TK-wp3iw 5 หลายเดือนก่อน

    Thank you 😊

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

    Thanks really helped !

  • @damianpineda2868
    @damianpineda2868 4 หลายเดือนก่อน

    thank you, it helped me a lot

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

    thank you , pretty great

  • @andrew_mandrichuk
    @andrew_mandrichuk 9 หลายเดือนก่อน

    Thank you so much!

  • @taiem8123
    @taiem8123 3 หลายเดือนก่อน

    Thank you for your dedicated

  • @mary_unknown
    @mary_unknown 3 หลายเดือนก่อน

    The easiest great tutorial for begginers like me, thanks! 😄

  • @pasdes6091
    @pasdes6091 10 หลายเดือนก่อน

    thank you so much for this video

  • @seifhossam559
    @seifhossam559 10 หลายเดือนก่อน

    thank you so much may God bless you ❤

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

    it was helpful thank you.

  • @evandro_fs
    @evandro_fs 4 หลายเดือนก่อน

    Ótima didática, ótimo vídeo, obrigado!

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

    very helpful video
    thank you very much

  • @user-qo3ud6hr1c
    @user-qo3ud6hr1c ปีที่แล้ว

    Thanks man!

  • @CLIPSDETWITCHESP
    @CLIPSDETWITCHESP 8 หลายเดือนก่อน

    good explanation

  • @Lucas.Cepeda
    @Lucas.Cepeda 3 หลายเดือนก่อน

    Muchas gracias!!! Sencillo y rapido. Gracias!

  • @johnmiltonlupatu5698
    @johnmiltonlupatu5698 4 หลายเดือนก่อน

    So is a good video tutorial, I like it so much. Thanks to you

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

    great explaination 😁😁😊😊