An interesting idea with just CSS, this video will also help everyone know how to code simpler, cleaner and more optimal. Please subscribe to watch many interesting videos every day
@@leoleo-nf3zu I know its late and you may have probably learned this , but , anything given with a preceding -- is declared as a variable. which means u can give any name , so that "width" , is just a name . For example if you initialise a variable --newvariable = 200px , and you give that value for width= var(--newvariable ) ; height =var(--newvariable ) ; the element will have a width and height of 200px .
Idk but man this guy teach css way better than anyone. He explains the concept, mathematical understanding of that implementation and basic thing too. Hats off man
can you make a part two for this video where on hover it doesn't only pause the animation, but also allows the user to scroll the list? Then, on unhover, the animation continues. Similar to how Perplexity's mobile app works.
May you explain how to implement scroll drawing in a landing page? it's an interesting effect you can achieve drawing a svg image with the completion percentaje
@lundevloper you are amazing. I was working with CSS last from 3 years but I never saw type of CSS work. Now I learn CSS again with you. I am so glad, I got your videos on YT. a big big big thanks ! Keep it up. Thanku Very Much
I FREAKING LOVE THIS CHANNEL! Great solutions, easy to implement and understand and they're reusable to top it off. Also, CSS is amazing! I had no I idea it could do all of this, they should call it JavaCSS with all the logic it handles. LOL!
Using offset properties like 'left' is not optimal as it forces the browser to repaint the elements which is a demanding task, low-end devices might make the animation look choppy. Conder using translate property.
And also there is 0 control over the gap between the items. I have version with translate instead of left, and with customizable gap. I can't paste link on here, but if anyone is interested you can find me on codepen, username: EntropyReversed Pen name: Infinite CSS Scroll
bro you got in my recommendation from couple of weeks and I was watching and learning from your random videos mostly of 'CSS Only' stuff and yeah I subed today , I can say that you explain CSS way better then anyone including basics , math behind , and logic and code structure soo well , I would love a proper video by you on topic of explaination of code , like you doo....
Best explained infinite slider on UA-cam. I've seen a lot of them, so I can truly say that. If I had to give you a star rating where 5 is max., then you would get only a 4 because you missed out using a speed variable to adjust speed in the style-attribute. This is helpful to adjust speed accordingly to your item count. For instance, 10s for 100 items will look way different from 10 items. Keep up this good and high quality work, you will make your way. chúc may mắn
Just too good!!! I really hope you make a full stack project series or something like that ....your AI explanations are better than many youtubers or courses....just subscribed!!!!
Wow... I just tried recreating this project. It became clear that I really don't know much about CSS. I'm going back to learn. Especially on working calculations within CSS.
Awesome approach. A few thoughts: - It can be handy to put the speed into an optional variable as well - Was wondering if the reverse could be solved with a direction variable with a bit of math without duplicating the animations - Would feel more complete if we can get rid of the white space when starting... though I guess this is a bit tricky because of the animation delay
Regarding the white space, my solution was to subtract the number of items in the animation-delay line, instead of just 1, so mine looks like this: animation-delay: calc((10s / var(--quantity)) * (var(--position) - var(--quantity))); I don't know if it works on all cases but even if it doesn't, it might help
Very nice tutorial and explanations! Your videos are excellent. I was wondering: wouldn't "animation-direction: reverse;" work and be enough in the reverse situation? 🤔
Amazing tutorials so far bro, but I'm really interested in that title changing fill and color depending on the image under it. I'd love at least a short about how you can recreate that
@@lundeveloper Actually, you could stretch it to your usual vid length by just making a general video on interesting masks like this one. It's a great website feature, and I am sure that not only I will really appreciate it.
Very novel approach to creating an infinite slider or marque effect. Thanks for sharing. A couple of questions: (1) how can one incorporate a variable to easily set the speed of the slider? and (2) how can automatically scale the size of the images (perhaps using the calc() function) to accommodate changing viewport sizes?
1. If you need to change the speed with a variable, you just need to create an additional --time variable like I did with quantity, then in the css, replace 10s with var(--time). 2. This slider, when you change the wifth for each different screen, will shrink itself without you needing to edit anything further.
The video is sensational, you could make a video of this with React and styled-components, to see how it would look... What would it be like if the person used the cell phone and did the manual interaction at some point?
Bro, you're awesome. But I want to know how do make the animation start from the left:0; I mean when the animation starts there is big blank space. It doesn't look good to me.
Hey i was working on a Marquee which is controlled by scroll event.Now the marquee will move to peft slide if the srcoll deltaY is +ve and vice versa,the only problem is that if the user scroll from +ve to -ve is changing the animation but i don't want the animation to stsrt again from the beginning rather i want the animation to start from where it ended.Please do you have any solution?
Why not just define only the animation-name for the reverse slider? I am also wondering if just setting the animation-direction to reverse wouldn't do the job. Anyway, great content!
I really like your contents but please change the AI voice to someone else Mr. Beast's voice is for kids and entertainment most of your viewers are working-class
good tutorial ! I have a few question regarding these infinite animations - how much of such can we use in a site and where in js engine or browser are these run ? where do theh get memory allocated etc I want to know details what to look ?
How does this work if the images have different widths? Say displaying a carousel of mobile screens and desktop screens, they can have the same heights but how would it work with width?
i have a task assigned similar to this, but in that the animation is from top to bottom, it is actually in a dashboard and the other thing is the dynamic and coming from an API, so how will i position it?
can you please teach me how to create a background shifting effect when we hover over a particular image of a slider? when we hover over a particular image , the hero section must change its background , which is the same background as in the slider. I just got this idea while watching this video, and tried but... not working. please help me.
hay @lundeveloper man your tutorial is good .but i wanted to add text instead of jpg , i try to do it but sometimes text goes to new line as its length is long i try to ply with other properties but nothing happens, can you tell me what should i change so that i can use text instead of image
An interesting idea with just CSS, this video will also help everyone know how to code simpler, cleaner and more optimal.
Please subscribe to watch many interesting videos every day
I’m new to coding so can anyone tell me why use - - width etc instead of just width?
@@leoleo-nf3zu I know its late and you may have probably learned this , but , anything given with a preceding -- is declared as a variable. which means u can give any name , so that "width" , is just a name . For example if you initialise a variable --newvariable = 200px , and you give that value for width= var(--newvariable ) ; height =var(--newvariable ) ; the element will have a width and height of 200px .
broh how can i controll the gaps in img?
Idk but man this guy teach css way better than anyone. He explains the concept, mathematical understanding of that implementation and basic thing too. Hats off man
Thank you very much, looking forward to your support of the channel in the future 😍
Your css skill is unmatched. I'm impressed.
Bro's channel is a treasure for developers
Thank you very much, I hope my videos are useful
Please give your suggestions for the topic in the next video 😍❤❤
We need more unique hero section designs
Reddit comment section
can you make a part two for this video where on hover it doesn't only pause the animation, but also allows the user to scroll the list? Then, on unhover, the animation continues. Similar to how Perplexity's mobile app works.
Is there any possibility to see all the images when you load?
May you explain how to implement scroll drawing in a landing page? it's an interesting effect you can achieve drawing a svg image with the completion percentaje
I'm a beginner and still learning. I find this really useful and it's really good. Keep up the content!
Your coding style is always straightforward. I have gained knowledge from your tutorials. Continue the great work bro!!😅❤️🔥
Yeah, thank you so much bro 😍😍
your knowledge just deep dive about css, and simply explain everything, that awesome
@lundevloper you are amazing. I was working with CSS last from 3 years but I never saw type of CSS work. Now I learn CSS again with you. I am so glad, I got your videos on YT. a big big big thanks ! Keep it up. Thanku Very Much
I FREAKING LOVE THIS CHANNEL! Great solutions, easy to implement and understand and they're reusable to top it off. Also, CSS is amazing! I had no I idea it could do all of this, they should call it JavaCSS with all the logic it handles. LOL!
bro no one here like you in you tube (Your content is mind blowing )
for me, that's one of the best tutorial channels about web dev on youtube...love it... keep doing what you do
Thank you so much bro 🥹🥹
This is the first time I’ve commented on a UA-cam video. You are incredibly brilliant. 🚀🤯
Using offset properties like 'left' is not optimal as it forces the browser to repaint the elements which is a demanding task, low-end devices might make the animation look choppy. Conder using translate property.
And also there is 0 control over the gap between the items. I have version with translate instead of left, and with customizable gap. I can't paste link on here, but if anyone is interested you can find me on codepen, username: EntropyReversed
Pen name: Infinite CSS Scroll
Bro, you are true master of css
you are completely awesome... first time i am saying this to any developer
It’s 2am, I should be going to bed but your content is so good. Thank you for sharing your knowledge!
Wao. Thank you so much 😍😍😍
bro you got in my recommendation from couple of weeks and I was watching and learning from your random videos mostly of 'CSS Only' stuff and yeah I subed today , I can say that you explain CSS way better then anyone including basics , math behind , and logic and code structure soo well , I would love a proper video by you on topic of explaination of code , like you doo....
I understood the video without translation. Your English is beautiful.
It's ai
@@swaztik4972wait what????
Best explained infinite slider on UA-cam. I've seen a lot of them, so I can truly say that. If I had to give you a star rating where 5 is max., then you would get only a 4 because you missed out using a speed variable to adjust speed in the style-attribute. This is helpful to adjust speed accordingly to your item count. For instance, 10s for 100 items will look way different from 10 items. Keep up this good and high quality work, you will make your way. chúc may mắn
Using mask-image to fade-in fade-out items is amazing!
Just too good!!! I really hope you make a full stack project series or something like that ....your AI explanations are better than many youtubers or courses....just subscribed!!!!
Wow... I just tried recreating this project.
It became clear that I really don't know much about CSS. I'm going back to learn. Especially on working calculations within CSS.
You are amazing at this! Never stop, this is true value🙌🏽 The Mr. Beat voice is a nice touch too! It makes everything feel easy to absorb
O M G!! amazing css master I just found!
You earned a new subscriber! AI voice or not your CSS explanation is 🔥, so glad I found this channel! Thank you!
Your video are so awesome.easily understandable.the animation always works.
best channel explaining css, exited to see more content from u
and thanks for posting the codes
Sick!! So glad I discovered your channel 🙌
Thank you so much ^^
slider with CSS only is insane, keep up the good work 😍
Mind-blowing stuff! 🎉🎉 Thank you for taking time to create beautiful designs and share your wisdom! ☺️
I am impressed with this mathematical trick with CSS.
Keep going, keep making videos like this. 😅👌❤🙌
This guy is a gem💎
Protect him at any cost.
Thank you so much 😍😍
this content is another level 🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩
Your stuff is awesome. Been sharing it with other dev friends of mine.
Damnnnn man! That was an amazing one. Love the way you explained it ❤ (and u got urself one more subscriber hehe)
Thank you,I'm glad it was helpful ❤
very useful thank you for making these css only videos please make more!
You are an amazing teacher!
Your css skill is amazing!!!
Recommand translate than left
Love your coding style, want a video on making a infinite scrolling marquee {text and icon, image only}
we have got Mr. Beast of Dev world
You have the most impressive and useful css skills
Thank you bro 😍
Awesome approach. A few thoughts:
- It can be handy to put the speed into an optional variable as well
- Was wondering if the reverse could be solved with a direction variable with a bit of math without duplicating the animations
- Would feel more complete if we can get rid of the white space when starting... though I guess this is a bit tricky because of the animation delay
Of course, Everything can be solved with mathematics
Regarding the white space, my solution was to subtract the number of items in the animation-delay line, instead of just 1, so mine looks like this:
animation-delay: calc((10s / var(--quantity)) * (var(--position) - var(--quantity)));
I don't know if it works on all cases but even if it doesn't, it might help
@@lulufv It worked ty bro !
@@lulufv I just knew i will find this in comments, thanks
Very nice tutorial and explanations! Your videos are excellent.
I was wondering: wouldn't "animation-direction: reverse;" work and be enough in the reverse situation? 🤔
Amazing tutorials so far bro, but I'm really interested in that title changing fill and color depending on the image under it. I'd love at least a short about how you can recreate that
Thank you so much, I will guide about it in the next video
@@lundeveloper Actually, you could stretch it to your usual vid length by just making a general video on interesting masks like this one. It's a great website feature, and I am sure that not only I will really appreciate it.
Same idea but with a carousel that have checkboxes right and left to slide the content and minimized view with magnifying hover effect(not necessary)❤
you r the great bro. Start a CSS course man.
awesome work brother
very good in explaining your code 🤩
Thank you 😍😍
Very novel approach to creating an infinite slider or marque effect. Thanks for sharing. A couple of questions: (1) how can one incorporate a variable to easily set the speed of the slider? and (2) how can automatically scale the size of the images (perhaps using the calc() function) to accommodate changing viewport sizes?
1. If you need to change the speed with a variable, you just need to create an additional --time variable like I did with quantity, then in the css, replace 10s with var(--time). 2. This slider, when you change the wifth for each different screen, will shrink itself without you needing to edit anything further.
Thank you so much for the lesson❤
Thank for watching 😊😊
Great technique! Thank you for the great content❤What you think about making a video to show the responsiveness side?
The video is sensational, you could make a video of this with React and styled-components, to see how it would look... What would it be like if the person used the cell phone and did the manual interaction at some point?
I want a complete course on CSS animations and design as like you do in your videos. Can you please provide it?
Man you are just amazing, how do you learn all this stuff
Declaring reverse and adding var sounds like JS to me. But what do i know i aint no expert. Still learning. Learned something new today for CSS
blown 🤯🤯🤯 I'd also appreciate if you can share your VS Code extensions with us.
Bro, you're awesome. But I want to know how do make the animation start from the left:0; I mean when the animation starts there is big blank space. It doesn't look good to me.
That is what i am wondering too!
Hey i was working on a Marquee which is controlled by scroll event.Now the marquee will move to peft slide if the srcoll deltaY is +ve and vice versa,the only problem is that if the user scroll from +ve to -ve is changing the animation but i don't want the animation to stsrt again from the beginning rather i want the animation to start from where it ended.Please do you have any solution?
Its like finding a formula to cure cancer.
Great work and explanation🥰🥰
Gracias por compartir tus conocimientos Lun
Muchas gracias
Hello !! What a tutorial, realy cool !!
Where do you find all your nice images?
Superb content
Please also share how you get your design resources. Do you design it yourself? If so please do make tutorials on that as well.
Very helpful!
I loved this idea
Thank you bro 😍
Best video bro , just wanna know some card animation if you can taught us❤
Great work
this was really good
thanks Mr. Beast for this tutorial
Ho can I have all items of the slider be visible immediately on page load, instead of them first animating in from the left and then repeating?
at 12:11, same thing i'm trying with the right instead of left, but unfortunately it didn't work. why?
please help! 😶🌫
Yohoho Puzzle pirates sounds lol
you are pro player of Css😅😅
Thank brother 🤭🤭🤭
Thank You Lun DEV.
Thank you 😍
Impressive 😊
Thank you 😍
DUDEEEE PLS MAKE A COURSE
Great 👍🏼😃
I never understood css that easy
How to control the gap between each items, I want to make the gap smaller
Why not just define only the animation-name for the reverse slider?
I am also wondering if just setting the animation-direction to reverse wouldn't do the job.
Anyway, great content!
can you make a video mastering css grid and flex box?
Yes, I Will
The fact that you don't put a space between your selectors/property declarations and your opening curly brace { absolutely kills me. 😵
Amazing bro!
How you do that hero with the letters in transparency with the image?
or its only a complete image?
Hello everyone, please watch the latest video I posted recently. I guided everyone to create it
Ủa cái này là a nói đó hả, xịn thật sự
thanks for the lecture, but is difficult to comprehend
nice video thanks
I really like your contents but please change the AI voice to someone else Mr. Beast's voice is for kids and entertainment most of your viewers are working-class
good tutorial ! I have a few question regarding these infinite animations - how much of such can we use in a site and where in js engine or browser are these run ? where do theh get memory allocated etc I want to know details what to look ?
How does this work if the images have different widths? Say displaying a carousel of mobile screens and desktop screens, they can have the same heights but how would it work with width?
i have a task assigned similar to this, but in that the animation is from top to bottom, it is actually in a dashboard and the other thing is the dynamic and coming from an API, so how will i position it?
can you please teach me how to create a background shifting effect when we hover over a particular image of a slider? when we hover over a particular image , the hero section must change its background , which is the same background as in the slider. I just got this idea while watching this video, and tried but... not working. please help me.
quality: 1000%
You should not do so, because it will cause the distance of the items to be very far apart.
@@lundeveloper ooh,,, was rating your tutorial...
شكرا لقد كان رائعا
how did you do that ? the text and image in backdround only the face part text is lighten and only showing text border
text border
I created two identical texts, the black text is behind the image, and the border-only text is in front of the image.
@@lundeveloper do you have any tutorial for that
Great approach!
BUT: What if the list-items do not have the same width? 🤔
I guess in that case I need to put all items in a flex-box and animate that one which should automaticly reduce the mathematical effort. Right?
What if you wanted to have all items visible on first load, and not moving in from the right the first time?
hay @lundeveloper man your tutorial is good .but i wanted to add text instead of jpg , i try to do it but sometimes text goes to new line as its length is long i try to ply with other properties but nothing happens, can you tell me what should i change so that i can use text instead of image
Please. Could you make it so the slider is not empty at the page refresh? I think it would be better if the photos were visible at start