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!!!
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
Any time I am working on a project and I realize I need to add a js library to the project. I feel some type of way. Especially libs that does these kind of stuff.
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!
7 месяцев назад+1
The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍
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
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
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 ;)
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!
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 🙏🏻
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.
If anyone is having a problem where you have a lot of logos to cycle through and the width of each of the "logos-slide" divs are much larger than the viewport and overlapping on each other, adding a "width: max-content;" on the "logos-slide" class solved the problem for me.
A couple of issues to mention, my carousel dos not run as smoothly as yours, e.g., 1 - it jumps after it completes the loop, 2 - the fade in and out works when the position is relative but fade in from right disappears when I change position to fixed or absolute to re-position the carousel to the bottom of the page. Any feedback is appreciated.
hey i know exactly the issue you are having, what you can do is this, you have duplicated the inner scroller, good, now mess around with the @keyframes slide from transform: translateX(%); }, mess adjust the percentage so that it starts exactly from where your second innerscroll will be, i hope that makes sense , instead of 0%, you can adjust it to 20% or whatever until its seamless
@@herlocksholmes-uv5qw in your html, there is parent container and there is the child, the child is the one that translates right, so what i mean is duplicate the child, and mess with the( @keyframe from % ), until the first child is looping exactly from where the second child will be ,
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*
![[DRAGON BALL LEGENDS REVEALS ＆ STUFF] LEGENDS FESTIVAL 2024 Special Edition Part 1](http://i.ytimg.com/vi/mV5bGIswTtQ/mqdefault.jpg)
Exactly what I was looking for simple and clean, I never get tired of seeing this slide. Great tutorial Robby!
moi aussi
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.
Damn, I spent 1 hour and didn't find the solution until found your comment. Thanks!
Thank you, saved my life, I was literally about to bang my head on the keyboard
Lol I was actually trying to fix this for like 3 hrs
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!!!
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
Any time I am working on a project and I realize I need to add a js library to the project. I feel some type of way. Especially libs that does these kind of stuff.
for months? why, is that a huge neccesity for you
It was a requirement from work, when i did it on my own it always has bugs and glitches and layout shifts.
@@crim-son ok buddy good luck may god be with you and ease your work🙏
Straight to the point. You made it so easy to understand, thanks!
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
After all the hassel of reading different blog posts, this is just the solution I was looking for, simple and straight forward. Thanks!
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!
The best short css trutorial I've ever seen 😊. Well explainded. Great. Looking forward to next one.👍
This channel is underrated Why you only have 9k subs? You deserve more sir. Thank you for this.
hhghjgjh
been struggling for days to find an exact tutorial, u are a life savior !!
This guy is so much sorted in terms of web development.......truly majestic
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
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
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 ;)
The second div overlay made my day. Slight skip on wide screens, but great improvement, thank you.
Crystal clear! Loved it!
I wasn't expecting it to be this easy. Thanks man ❤
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!
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.
Damn thats what i was trying for past 3 days chat gpt failed to to ths mannn love itttt you got a subscriber man
It's really cool. I have been searching this for several days.
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 🙏🏻
You made it look super simple. Thank you!
Wow! This tutorial is so awesome! The concept is explained precisely and clearly. Thanks!
Thank you Robby. You are truly the man!
Amazing Robby! In one video you teach a lot of things
thanks Buddy, for the easy explanation....much love From KENYA🌎
That was exactly what I was looking for and you explained it so well. Thanks a lot!
In this video I got eveything , what i looking for few days. ThankYou 😁😁😁😁😍😍😍😍
Damn, you're a great programmer lol. You made that look so easy. Great teacher too.
what a clean and clear explanation
Thank you so much for the video, I didnt find that well explained tutorial or video anywhere else.
thank you very much sir. didn't know it could've been this easy lol
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.
Great work man, glad i got this on my recommended.
Really great and simple, works like a charm! Thanks so much!!
Precisely what I was looking for. Thank you!
Nice! Pretty straight forward CSS. Thank you. I’ll likely use that!
Thank you. the video help me to solve the problem
AWESOME work, man!
Great video! Thanks for this, just what I was looking for.
Thank you so much man! It took me two days, not animating but finding this tutorial 😅❤
Robby thank you very mach very very very very very very help me
This is great, thanks. To do another, underneath, to the right, just set to translateX(100%) and make .logos direction: rtl.
Thank you man simple and perfect
Exactly what I'm looking for , tqsm robby 🎉
The easiest great tutorial for begginers like me, thanks! 😄
You're the best and my life saver!
If anyone is having a problem where you have a lot of logos to cycle through and the width of each of the "logos-slide" divs are much larger than the viewport and overlapping on each other, adding a "width: max-content;" on the "logos-slide" class solved the problem for me.
I Love this. And thank you for the detailed explanation 👍
thx so much for this video... its magnific, send a hug for devs on Brasil!😁
Thanks for the kind words!
Спасибо большое за помощь! ваше видео спасло мой дизайн:)
absolutely amazing :) saved so much time for me. many thanks!! :)
Brilliant! Thank you!
You made it super easy! Thanks man
loved the video. thanks for such crisp info
Exactly what I needed!
THANKS!, really what i ve been looking for :D
This was very useful for my project. Thanks
Thanks a lot man, exactly what i was looking for!! cheers!
thank u sir you helped me with my deadline today! great video!
my gosh what a code... this is an inspiring job... Super chingon!! Saludos desde Mx Mty
That was amazing and super easy! Thank you!!!
Nice logo scrolling..........Great
A couple of issues to mention, my carousel dos not run as smoothly as yours, e.g., 1 - it jumps after it completes the loop, 2 - the fade in and out works when the position is relative but fade in from right disappears when I change position to fixed or absolute to re-position the carousel to the bottom of the page. Any feedback is appreciated.
If you delete the script and duplicate the "logo-slide" div you solve the problem
hey i know exactly the issue you are having, what you can do is this, you have duplicated the inner scroller, good, now mess around with the @keyframes slide from transform: translateX(%);
}, mess adjust the percentage so that it starts exactly from where your second innerscroll will be, i hope that makes sense , instead of 0%, you can adjust it to 20% or whatever until its seamless
@@firemasterleo I really don't understand what you mean by duplicating the inner scroller, what is it?
@@alvarbuenfil7557 It worked for me, thanks for the idea! 😊
@@herlocksholmes-uv5qw in your html, there is parent container and there is the child, the child is the one that translates right, so what i mean is duplicate the child, and mess with the( @keyframe from % ), until the first child is looping exactly from where the second child will be ,
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*
You're a gem!
my last logo BuzzFeed collides with the 3m of the second div, why is that so ? I put in the code in elementor
You are great my friend, thank you very much!!! 🤯
this is great! im going to try these so i can use it for my GHL landing page projects, i hope it is responsive when it comes to mobile view.
thank you so much for this great explanation!
You just earned my subscription.
Helpful. Thanks for this video.
Thanks for this superb content.Have you made a video where content scroll vertically and that to with dynamic data?
Great content, thank you Robby!
Thank you very much, just what I needed.
Exactly what I needed!!! thanks
amazing bruh keep up the good work
Great video! I wonder if its possible to do it vertically.
Very awesome tutorial, Thanks !!
Thanks man, really helpful!
Thank you! Great video!
This is really helpful! Thanks for your work :)
Great, video! Does this work with different viewport widths?
Robby, thank you very much!. I am Sergio from Argentina 👍😊🇦🇷🇦🇷
Thanks for this useful tutorial!
thanks man i copied the resources you had provided and everything came out clean on my page
Great video bro!
Thank you Robby 👍
Thank you very much. Great Video
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
thank you very much Robby
Thank you, sir!
You helped me a lot, thanks!
Excellent!
Thank you very much. This was very helpful.💯
Awesome!
Thank Robby
Nice presentation, appreciate it. i just want to know what code about single logo scaled down while slide left while scrolling down?