Тёмный

Creating an infinite logo carousel with pure CSS 

Coding with Robby
Подписаться 17 тыс.
Просмотров 105 тыс.
50% 1

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

Наука

Опубликовано:

 

6 мар 2023

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 221   
@firstbloodfangy6933
@firstbloodfangy6933 6 месяцев назад
Exactly what I was looking for simple and clean, I never get tired of seeing this slide. Great tutorial Robby!
@florentgironde7279
@florentgironde7279 2 месяца назад
moi aussi
@vaztechs
@vaztechs Год назад
Straight to the point. You made it so easy to understand, thanks!
@nunolopes8263
@nunolopes8263 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!!!
@kosceeanason5910
@kosceeanason5910 6 дней назад
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 6 месяцев назад
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!
@crim-son
@crim-son 4 месяца назад
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
@willianbraz1987
@willianbraz1987 7 месяцев назад
That was exactly what I was looking for and you explained it so well. Thanks a lot!
Месяц назад
The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍
@olaotitoheeb3068
@olaotitoheeb3068 10 месяцев назад
You made it look super simple. Thank you!
@Jpugas
@Jpugas 7 месяцев назад
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!
@MarianoFrias
@MarianoFrias Месяц назад
Wow! This tutorial is so awesome! The concept is explained precisely and clearly. Thanks!
@gabrielorofino3527
@gabrielorofino3527 9 месяцев назад
Precisely what I was looking for. Thank you!
@MelanyPalacioFonnegra
@MelanyPalacioFonnegra Месяц назад
For you keeping my job one more day, thank you
@bedtimehorrorstoryyoutube
@bedtimehorrorstoryyoutube 9 месяцев назад
Crystal clear! Loved it!
@janemig
@janemig 7 месяцев назад
Really great and simple, works like a charm! Thanks so much!!
@dominicdavistv
@dominicdavistv 9 месяцев назад
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.
@thehariskhan
@thehariskhan Год назад
Amazing Robby! In one video you teach a lot of things
@thegreatkeljb
@thegreatkeljb 9 месяцев назад
This channel is underrated Why you only have 9k subs? You deserve more sir. Thank you for this.
@happyprod
@happyprod 29 дней назад
hhghjgjh
@anirudh.s8518
@anirudh.s8518 Год назад
Great work man, glad i got this on my recommended.
@patricksweet4104
@patricksweet4104 8 месяцев назад
Thank you Robby. You are truly the man!
@7guitarlover
@7guitarlover Год назад
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
@abdullahfurkanozbek7558
@abdullahfurkanozbek7558 3 месяца назад
Thank you so much for the video, I didnt find that well explained tutorial or video anywhere else.
@timnooteboom7752
@timnooteboom7752 2 месяца назад
Great video! Thanks for this, just what I was looking for.
@balaganeshsk4340
@balaganeshsk4340 4 месяца назад
Exactly what I'm looking for , tqsm robby 🎉
@PilatesinSacramento
@PilatesinSacramento 7 месяцев назад
Nice! Pretty straight forward CSS. Thank you. I’ll likely use that!
@KevinGonzalez-fo6jt
@KevinGonzalez-fo6jt 4 месяца назад
I Love this. And thank you for the detailed explanation 👍
@iamuzzalhossen
@iamuzzalhossen 7 дней назад
You made it super easy! Thanks man
@gibbardwebdesign
@gibbardwebdesign 8 дней назад
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 ;)
@Alchemist_dream
@Alchemist_dream 9 месяцев назад
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
@yaregobrozek3725
@yaregobrozek3725 8 месяцев назад
AWESOME work, man!
@udorblessing
@udorblessing Месяц назад
This was very useful for my project. Thanks
@Ericpricing
@Ericpricing 9 месяцев назад
thanks Buddy, for the easy explanation....much love From KENYA🌎
@ASPatel-ds9jt
@ASPatel-ds9jt 7 месяцев назад
This guy is so much sorted in terms of web development.......truly majestic
@gtry1966
@gtry1966 11 месяцев назад
thank u sir you helped me with my deadline today! great video!
@travellingpakistan2348
@travellingpakistan2348 5 месяцев назад
Thank you so much man! It took me two days, not animating but finding this tutorial 😅❤
@TheJokzer
@TheJokzer 5 месяцев назад
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
@vincenzocristiano135
@vincenzocristiano135 4 месяца назад
Thanks a lot man, exactly what i was looking for!! cheers!
@cathylim2113
@cathylim2113 6 месяцев назад
This is really helpful! Thanks for your work :)
@abhinandanagrawal1294
@abhinandanagrawal1294 4 месяца назад
loved the video. thanks for such crisp info
@briandawdev
@briandawdev 4 месяца назад
THANKS!, really what i ve been looking for :D
@davemiller302
@davemiller302 6 месяцев назад
The second div overlay made my day. Slight skip on wide screens, but great improvement, thank you.
@lovindigital
@lovindigital Месяц назад
You're the best and my life saver!
@dragnoedits6721
@dragnoedits6721 10 месяцев назад
Damn thats what i was trying for past 3 days chat gpt failed to to ths mannn love itttt you got a subscriber man
@user-sd8iy7rq4k
@user-sd8iy7rq4k 11 месяцев назад
Thank you very much, just what I needed.
@samuelhuang4324
@samuelhuang4324 9 месяцев назад
Great content, thank you Robby!
@user-kb9jw2lk6n
@user-kb9jw2lk6n 11 месяцев назад
amazing bruh keep up the good work
@WencelausMaina
@WencelausMaina 9 месяцев назад
Thank you very much. This was very helpful.💯
@quandiqkalbaev6198
@quandiqkalbaev6198 Месяц назад
You helped me a lot, thanks!
@ekomukanga893
@ekomukanga893 Год назад
You just earned my subscription.
@dhruvminimal
@dhruvminimal 25 дней назад
Helpful. Thanks for this video.
@quangminhtran9968
@quangminhtran9968 6 месяцев назад
Very awesome tutorial, Thanks !!
@t.j.5574
@t.j.5574 24 дня назад
Damn, you're a great programmer lol. You made that look so easy. Great teacher too.
@victoriapanidi1419
@victoriapanidi1419 2 месяца назад
thank you so much for this great explanation!
@user-in4ce8il8e
@user-in4ce8il8e 2 месяца назад
The easiest great tutorial for begginers like me, thanks! 😄
@user-ds4ym3hs4e
@user-ds4ym3hs4e 2 месяца назад
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
@xyz-xc1qu
@xyz-xc1qu 7 месяцев назад
Thanks for this useful tutorial!
@imdharmeesh.29
@imdharmeesh.29 4 месяца назад
Great video bro!
@MisterSteele
@MisterSteele 2 месяца назад
Exactly what I needed!!! thanks
@ThronusGuild
@ThronusGuild Год назад
thx so much for this video... its magnific, send a hug for devs on Brasil!😁
@codingwithrobby
@codingwithrobby Год назад
Thanks for the kind words!
@grabthisinfo1799
@grabthisinfo1799 5 месяцев назад
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 3 месяца назад
Damn, I spent 1 hour and didn't find the solution until found your comment. Thanks!
@ZakariaTEKNIS-gg4xf
@ZakariaTEKNIS-gg4xf 14 дней назад
Thank you, saved my life, I was literally about to bang my head on the keyboard
@mikesalinas6245
@mikesalinas6245 25 дней назад
my gosh what a code... this is an inspiring job... Super chingon!! Saludos desde Mx Mty
@benjaminnkem
@benjaminnkem 5 месяцев назад
Exactly what I needed!
@streetsofafrica8445
@streetsofafrica8445 28 дней назад
You're a gem!
@damianpineda2868
@damianpineda2868 3 месяца назад
thank you, it helped me a lot
@johnmiltonlupatu5698
@johnmiltonlupatu5698 2 месяца назад
So is a good video tutorial, I like it so much. Thanks to you
@72nishantwadhawan5
@72nishantwadhawan5 Месяц назад
Thank you! Helped
@Exponat87
@Exponat87 Год назад
Thanks, Robby! How is Google page speed react on that slider? It's better than jQuery plugin? And how it lock and work on mobile, CPU usage?
@marouanebr409
@marouanebr409 3 месяца назад
thanks a lot, that was really helpful !
@GHSB7462
@GHSB7462 3 месяца назад
Thank you very much. Great Video
@Lucas.Cepeda
@Lucas.Cepeda Месяц назад
Muchas gracias!!! Sencillo y rapido. Gracias!
@evandro_fs
@evandro_fs 3 месяца назад
Ótima didática, ótimo vídeo, obrigado!
@kenbee85
@kenbee85 Год назад
thanks for this. Is it also possible to use mouse to like move it to right or left in case user wanted to that? I think i've seen somewhere that it can do that.
@yalepaweee9064
@yalepaweee9064 Месяц назад
Thank you, sir!
@Lykkos29
@Lykkos29 Месяц назад
Excellent!!
@MeltonECartes
@MeltonECartes Месяц назад
Excellent!
@faustinomera582
@faustinomera582 Год назад
Muchas gracias desde Galicia!
@jssecrets
@jssecrets 6 месяцев назад
Thank you Robby 👍
@user-kv3oz4tu3t
@user-kv3oz4tu3t 3 месяца назад
Thanks you sir for this tutorial!
@roysaucedo
@roysaucedo Год назад
Great tutorial!
@captainsaleh3444
@captainsaleh3444 8 месяцев назад
thank you very much Robby
@christycasey2469
@christycasey2469 Месяц назад
I'm loving the look of my new logo scroll on my site! Me and a few others who have looked at my site are feeling the urge to have control by swiping instead of just pausing. Would you be able to make a demo adding a swipe feature, ideally that works with a click on desktop and touch on mobile? *fingers crossed*
@taiem8123
@taiem8123 2 месяца назад
Thank you for your dedicated
@BrentHouston-le4yl
@BrentHouston-le4yl Месяц назад
Great, video! Does this work with different viewport widths?
@seifhossam559
@seifhossam559 9 месяцев назад
thank you so much may God bless you ❤
@RajatKumarJain-yb8fo
@RajatKumarJain-yb8fo 4 месяца назад
Thanks for this superb content.Have you made a video where content scroll vertically and that to with dynamic data?
@michael_nwo
@michael_nwo 5 месяцев назад
very helpful video thank you very much
@TK-wp3iw
@TK-wp3iw 3 месяца назад
Thank you 😊
@fexrihesenov8045
@fexrihesenov8045 3 месяца назад
Thanks really helped !
@abhisheksingh3601
@abhisheksingh3601 11 месяцев назад
it was helpful thank you.
@cabmoitv4323
@cabmoitv4323 8 месяцев назад
Nice presentation, appreciate it. i just want to know what code about single logo scaled down while slide left while scrolling down?
@inshine9826
@inshine9826 2 месяца назад
Best tutor ❤❤❤❤❤
@dark.6985
@dark.6985 7 месяцев назад
me ajudou muito usar as mesmas ideias para a página que estou desenvolvendo para o meu projeto final do ensino médio!
@abdelmadjidhocine4213
@abdelmadjidhocine4213 5 месяцев назад
Amazing thank you.
@andrew_mandrichuk
@andrew_mandrichuk 8 месяцев назад
Thank you so much!
@user-yz8cd6im1y
@user-yz8cd6im1y 2 месяца назад
really too good for me I get to know this
@shreyaschavan7976
@shreyaschavan7976 11 месяцев назад
great explaination 😁😁😊😊
@pasdes6091
@pasdes6091 8 месяцев назад
thank you so much for this video
@PawanYadav-mz7fv
@PawanYadav-mz7fv 7 месяцев назад
well done. thank you 🙂
@robertwattner
@robertwattner 2 месяца назад
This is great, thanks. To do another, underneath, to the right, just set to translateX(100%) and make .logos direction: rtl.
@guy84eilon
@guy84eilon Год назад
love it!
Далее
Create an infinite horizontal scroll animation
32:01
Просмотров 173 тыс.
Build a React Image Slider with Tailwind CSS
18:29
Просмотров 101 тыс.
CSS Only Scroll Animations Are AMAZING!
8:40
Просмотров 6 тыс.
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,6 млн
How to make Card Slider in React JS | React Slick
9:03
Avoid these 5 beginner CSS mistakes
21:38
Просмотров 59 тыс.
Scrolling Logo Animation with HTML and Tailwind CSS
3:50
Неразбиваемый экран!
0:23
Просмотров 43 тыс.
Лучший худший экран - PowKiddy RGB30
12:56
Mi primera placa con dios
0:12
Просмотров 602 тыс.