You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
Вставка
- Опубліковано 22 лис 2024
- 🚨🚨🚨 COURSES - slayingthedrag... 🚨🚨🚨
Join the discord - / discord
Finished result - codepen.io/ram...
Two rows result - codepen.io/ram...
Inspiration - www.smashingma...
Examples from beginning of video:
logo-marquee-d...
marquee-effect...
infinite-marqu...
flowspark-comp...
css-marquees.w...
wb-infinite-ma...
www.react-fast...
Over the span of your entire online history, you’ve probably visited websites with this cool looking animation. These animation are called a marquee, and all it is, is elements laid out horizontally and that scroll infinitely. On the surface this seems like a pretty simple animation, however if you’ve ever tried to build this yourself, than you know that it’s deceptively difficult, or at least, difficult enough that you felt the need to use JavaScript. And actually, most tutorials you’ll find on UA-cam and on the web in general about this animation has you using JavaScript. However in this video, we’re going to be building it with CSS only. So no JavaScript, only CSS.
I could be wrong, but an interesting way to think about negative delay is that a negative delay is actually a head-start (i.e. the opposite of delay). So a delay of -10s means the item will have a 10s head-start into its animation. And that is why the item would start in a different position, because it is starting where it would've been after 10s have passed into its animation
get undelayed
Brilliant solution! I have looked for this and not seen this solution as you mentioned. You can make it a lot cleaner using CSS variables. On each item, instead of .itemn class in the HTML, put a style attribute:
style="--n: 1"
For each value 1, 2, 3... Then there is no need for all those CSS classes on .item just put
animation-delay: calc(30s / 8 * (8 - var(--n)) * -1);
Thanks for this!
Thank you! I agree with using variables, not using them was only for the purposes of keeping this video simple and easy
I love your suggestion, except I don't fully understand it as I'm still a CSS beginner. I'm working on a logo marquee with over 24 logos and would love to implement your soultion if you could explain how it works, thanks!
@@ZakariaTEKNIS-gg4xfI think they mean making a local variable for each item ex .item8{ --n: 8; } and move the animation-delay to the main .item class & change the minus part to be (8 - var(--n)), but for super dynamic way you cnn make a dynamic css variable declaration using the following 2 lines in js → document.querySelectorAll('.item').forEach((item, i) => { item.style.setProperty('--n', i + 1); });
@@ahnor001 Thank you for your explanation, I implemented your solution using CSS only and it WORKS, Except now I've ran into another problem, the marquee contains 24 logos, is there a way for it to display only 8 at a time? I did solve it using :
@keyframes slide {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
But I had to write all 24 logos 3 times for it to be smooth, I was wondering if I could implement this solution but only displaying 8 at a time, thanks again for your time.
@@ZakariaTEKNIS-gg4xf → 2ways → let me summarize to you how code work regard the video 1st, this code make all the items on the same screen even if we don't see it but they all there (1hidden-6visible-1hidden), & when an item reachs it's ending it restart from the beginning with no delay, as delay only applied once at the start of animation, & keyframe is how animation moves, that means when increase the items numbers you should increase the left property [what?!] Yep, actually the left value here create the row of our rectangles & you remember that this animation make all rectangles here at once so you need to make super huge row that contain all the 24 items, so the answer is changing left to max(calc(200px * 24) , 100%) & then you increase the duration as now the items move on super sonic speed moving 800px in 1s, so change duration to 90s [reserve the ratio 8items/30s], then change the delay to work with what we made so far calc(90s / 24 * (24 - var(--n)) * -1) again the delay here means a starter position so every item on the page exist in different place at the animation start, then moves according to the keyframes left & loop
Solution-1:
left: (calc(200px * 24) , 100%);
animation-duration: 90s;
animation-delay: calc(90s / 24 * (24 - var(--n)) * -1);
But this solution have a problem that all the items moves at the same time making animation of 24 items , this may cause a some problems with small devices or any device with low gpu [create lag]
2nd way: [Make a still phase]
If you noticed the above solution the items actually not visible until they reach the wrapper width due to overflow hidden, & wrapper only 33% of there road so for our 90s only visible 30s so you can make a keyframe for that
Solution-2:
left: (calc(200px * 8) , 100%); /* 8 instead of 24 */
animation-duration: 90s; /* same 1st */
animation-delay: calc(90s / 24 * (24 - var(--n)) * -1); /* same 1st */
@keyframe slide {
0%, 66%{
left: max(calc(200px * 8) , 100%);
}
100% {
left: -200px;
}
}
Would suggest this solution over the another & the math is simple active duration is 30s & loop duration is 90s so the active period should be 33.3% or about 34% this is more ergonomic to the gpu, & give a smoother website if you have another animations & a good concept for you to know.
Review:
left: space between items, overlap, gaps
duration: speed
delay: you are making a time jump, hey item2 jump to the 6/8 portion of our timeline[keyframes] so you vanish after 2 boxs & return to our start keyframe, & that's the equation clac inside animation-delay, calc((itemN - index) / itemsN * sec * -1), means the portion so in our example (8 - 2) / 8 = 6/8 portion, then we multiply it by our timeline which is our duration to make time jump, then we multiply by -1 to make it premove instead of delay
For advance lvl recommend using variable for items[rectangles] count inside :root that be declared by js, & rectangle width variable :root, and duration variable :root
Never thought I'd see "marquee" and "HTML" in the same sentence again
You can add this to stop the whole animation 😊:
/*Select all the .items inside the wrapper when it's hovered /*
.wrapper:hover .item{
animation-play-state:paused;
}
to think after 2 years of working with CSS i only just discovered negative delay. The way you explain too is just perfect. Even a beginner will understand. Thanks bro
This is a great solution. That said, as it stands now with absolute positioning, the browser is working a little more when it comes to rendering and the constant repaints. For optimal performance, I suggest approaching this with transforms. This will eliminate the constant repaints.
I tried re-working this through transform, but translateX(100%) seems to only move the object 100% of its own width, not the width of the parent. I tried 100vw, but that didn't work either and if the marquee parent wasn't the full width of the screen that wouldn't be good anyway. Do you have an any ideas?
@@BrodySmalley Kevin Powell has a video utilizing transforms. This would give you a better idea as well as a clearer explanation that I could give you. Search "Kevin Powell marquee"
I swear yesterday I was wondering how to add those fade in and fade out effect in this type of animation. And today you uploaded a video and explained how to do this. 🙏
Me too
so much like your explanation, very concise, your goal is to teach, not like most people who make video just for the view.
not covering a topic of 1 hour for 5 minute.
thanks so much...
Thank you for the excellent tutorial! As a motion designer familiar with After Effects and CSS, I really appreciate the breakdowns on how you constructed your project. The negative delay is genius. Well done!
Good video as always Slayer. For sass lovers, u can use this:
$item-width: 200px;
$item-height: 100px;
$item-duration: 30s;
.item {
width: $item-width;
height: $item-height;
background-color: purple;
border-radius: 6px;
position: absolute;
left: max(calc(200px * 8), 100%);
@keyframes scrollLeft {
to {
left: -200px;
}
}
animation-name: scrollLeft;
animation-duration: $item-duration;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@for $i from 1 to 8 {
.item-#{$i} {
animation-delay: calc(#{$item-duration} / 8 * (8 - #{$i}) * -1);
}
}
Thank you for adding that, was thinking as Slayer was going through the content, how to refactor
@@kollabor8 Glad it helped.
im using sass but i used root is it ok?
@@arvingardon root? elaborate
Just when you think you understood it all... something new comes up. That's both the most beautiful and frustrating part about programming. You truly can't know it all in this field.
Mind blown. That is absolutely amazing how it all works mathematically to produce the marquee effect. It's very simple to add in custom properties for the marquee timing and number of items. Fantastic.
a tip for all the new programmers out there( like me ) that are trying to replicate this code, but the animation delay doesn't work: DON'T FORGET TO PUT SPACES BETWEEN EVERY ARITHMETIC OPERATOR IN THE CALC() FUNCTION. I wasted hours to figure out what was wrong T_T
Hours in the age of AI? Surely not!
thanks man i was also stuck on thiss , aloota help
Dude , .... Thanks 🤒👍🏻 I too wasted my hours
@@bardhan.abhirup 😂😂
@@bardhan.abhirup believe me, first thing i tried was to ask ChatGPT... it couldn't get this error...
Just discovered this video and you won't believe it but I needed this without knowing I'll need it in the future. Amazing explanation love the calm way you explain and thanks for explaining everything, i.e the max function i had never heard of it and you explained. Really happy to found and I really appreciate you for this content.
Dude u are a gem teacher.
I never seen such a brilliant explanation of the the marquee effect.
I always thought of js when dealing with this things which inturn requires dom manipulation hence effected performance. Thanks and subbed.
Thank you, this is amazing! Now I am going to use this and implement this to work with Webflow's CMS collection :)
The first time I got into website development the first group project I did I was given this. I cried at some point. It looks easy but it's not.
just bought the CSS cource. Waiting for cource on React. I've been looking for good explanations of flex and grid for last 2 weeks and all explanations were realy clunky and complex. And then YT sugested me your wideos on the topic. And it's suddenly SO MUCH easier!
Nice video! you could add style="--i:0" , style="--i:1" and so on to every html box item, and then add a delay property with the multiplier var(--i) to avoid polluting the css with a lot of items
Instead of adding delays for each item, you should add style="--pos: 1", style="--pos: 2", etc on them and use it in only one calc in .item itself 😉 (You could assume the number of items is dynamic, si instead of a hard coded 8, you could add style="--count: 8" on the list and also use it in your calc)
I feel so dumb right now. I had to do this same effect in my portfolio, I search a lot for it, everyone was saying make it with intersection observer, then i read it in detail, implement it in few places, the implemented in my portfolio, and the infinite scroll was janky, so i did some tricks to make it smooth, but then the performance of page was heavily affected, and all that work took me a lotttttttttttt of time. I wish I was not dumb enough to just think this way one, but thank you master 🙏🙏
Great walkthrough and thanks for the feature at 00:06!
This effect is very useful, especially for banner announcements below the navigation bar, for events, announcements, and notifications.❤🎉
For that, there is also a non-void html element named marquee, mostly used for text
CMMIW. I believe you can alternatively switch from multiplying by (8-x) * -1 to just multiplying it by (x-8) instead. The two have equal values by the distributive rule of (a-b) = -(b-a)
So (8-x) = -(x-8)
This was so informative and cool. Crazy how people's mind works. I wish I could come up with stuff like this.
At 12:00 there is no need to to copy paste a couple times that. Just add nth-child() and so on so no need to create the classes to the divs just make it wrapper:nth-child(1) and so on
I think i get the general idea? however its still confusing how you'd do this for "dynamic divs", when you don't know how many divs youd have (showing icons based on how many u get back from the server for example)
Really well explained, slowly, clearly, good job.
thanks man another way of doing this infinite scroll really made me think CSS have more potential too other than javascript.
15:00 Basically, the reason for using -1 is to make the calculation negative without changing the value of the calculation itself. Using -1 is the best option to achieve this because it ensures that the calculation remains the same while the negative value causes the animation to start instantly.
wait till you hear that (b - a) is the same as (a - b) * (-1)
You are actually a good educator bro keep it up! ✨🥂
Hey, it's a nice tutorial. Very similar to an approach I've seen on Kevin Powell's channel. Can't say what is different, but your version works as fine as his.
I love you bro. You are the best! I've always wanted to learn html, css, javascript and you are helping a lot! I'm 7-th grade now and when school ends I am gonna buy your course. Love your work, keep it up!
stunning and simple AF
Hey, the videos you create are really awesome! ❤
This is great... I don't actually want a marquee... but there's a lot of useful information in here for what I do want.
I love the way you teach, please post a video where you create an interesting landing page with grid flex layouts and animations, esp scroll animation.
Who would’ve imagined we’d live long enough to see a overcomplicated
My brother, let me just say that you are not just an expert but in my opinion, you are the best in the world. From Durban, South Africa. All the best man...
finally found the right video! thx ramzi
Simply Awesome...❤
A very useful video, lots of use-cases for this, thanks STD, you slayed it 🐉
it was so cool simple clear and smooth that was awesome u made some painful things easy for me thanks for upload👍
Awesome video. Congrats.
Negative animation delay would have been clearer if the divs were uniquely identifiable eg if they had number labels. Otherwise great video.
Excellent video..!!!, thank you for your knowledge and ideas
Thanks, this is exactly what I need! I hope more videos like this I leave like and sub
I remember when the element tag Marquee would work everyone would use that instead in the 90s
why don't we use the role=marquee they supposingly have it
Simply amazing! You must be a genious!
Keep it up bro new subscriber👍
kinda funny because growing up marquee was a html option that worked very simply.
amazing, thank you
You are a excellent teacher. Can you please make a Video about dom manipulation on javascript please 🙏 please 🙏. And if possible create complete javascript series. Your teaching style is tremendous 😊
thanks so much! 🤩
Perfetto, I love the approach!
Thank you so much
the master of CSS
Well done
This is a good solution if you know how many divs will be present. I can't imagine having to write css for 20 divs
I really like your videos , simple to understand and really good .
Also got a question , do you only use css for styling or use Tailwind or bootstrap ect ... if yes i would love some tailwind tutorials 😅 ❤
You’re fucking great brother, thank you for sharing this
Nice approach. Be better if it worked with dynamic items. Rather than a fixed amount. Also adding animation pause on hover.
Great! Thank you
You should also consider device screen width in the calc function because in mobile this will go veeerryy slowly
Great video as always, but what if you had multiple elemnts and only wanted to show a few of them at a time?
Great video! Just wondering if there are any amendments that can be made to evenly space each item in the marquee when they have differing lengths since I need to use text rather than a box and it looks janky.
instant subscribe
Nice video bro 👍
Hi slaying,
How are you?
How about the Full Css course? Any release date?
I am waiting for that!
Thank you,
From Brazil ❤
Hey man! I just want to say I love you tutorials. On your website, I can see you are working on a course on JavaScript. When do you think that will be made ready?
Thanks! Aiming for Autumn
To people who have come to the comments section see what others are saying, DONT CONFUSE THIS WITH THE INFINITE SCROLLING IN WEB APPS LIKE ON TIMELINE AND HOMEPAGE of many web apps.
THIS is an endless scroll with a fixed set of elements.
Plz upload javascript content also..as your content is too gud to understand...
It's really amazing.
Is there any solution of having same amount of gap between slides?
When you make it full screen, the gap between divs increases
adjust the wrapper's max-width
I subscribe you because of this video. The explanation is cleaner than a bald man's head
❤just awesome. Thank you
This is great idea, i want to adapt this to dynamic number of logos from my database. i changed all the math element to be variables but the problem is the need to adjust the "left" property in the keyframes so logos won't be on each other. do you have any idea to overcome this?
Bro, please make a detailed tutorial on semantic HTML elements and explain when and how to use them correctly😠😭
but will it repeat the same element infinitely ? which is the real requirement
RESPECT BRUV
🙏
may you do a CSS tutorial
Is there a way to stop scrolling on hover?
.wrapper:hover > .item{
animation-play-state: paused;
}
Thanks.
will you do you JAVASCRIPT course? i swear if you js course have this same quality of teaching i will buy your js course
ty
Do anyone remember the tag from the 90s?
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?
godly
Hey can u suggest me how much time should we give on front js❓❓❓❓
is the same solution possible with variabled widths?
Thnaks
I have this slight problem when the list ends theres always a gap before it goes back to the starting list
please create a video on javascript crousel
could you have started with right:0; and do the same?
Hello, i got a question,
It's like the gap is predefined, when it gets on the large breakpoint (>1980px), the gap is wider, but when it gets on smaller breakpoint (mobile) the gap is smalller. I want to change the gap for each item, anybody know?
And how to make it moving from right to left? Tried here but: mess 😅
Cool
is there a way to make an infinite scroll that functions on the mousewheel? a manually controlled infinite scroll
Yeah
But you can do it usind gsap Library of js
A l'heure ou l'on conçoit tout en responsives (sans parler de dynamisme des éléments) ce code est tout simplement impossible à mettre en production.
Ne perdez pas votre temps et utiliser du JS pour des "marquee" responsives et dynamiques 😋
animation-delay is not working for me ...then what can i do
Look good, but it now works for dynamic content