You Don't Need JavaScript For This - CSS ONLY Infinite Scroll
Vložit
- čas přidán 22. 05. 2024
- 🚨🚨🚨 COURSES - slayingthedragon.io 🚨🚨🚨
Join the discord - / discord
Finished result - codepen.io/ramzibach-the-styl...
Two rows result - codepen.io/ramzibach-the-styl...
Inspiration - www.smashingmagazine.com/2024...
Examples from beginning of video:
logo-marquee-dual.webflow.io/
marquee-effects.webflow.io/
infinite-marquee-logos.webflo...
flowspark-components.webflow.io/
css-marquees.webflow.io/
wb-infinite-marquee.webflow.io/
www.react-fast-marquee.com/
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 CZcams 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. - Věda a technologie
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
Never thought I'd see "marquee" and "HTML" in the same sentence again
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
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.
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.
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.
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.
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...
You are actually a good educator bro keep it up! ✨🥂
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)
Really well explained, slowly, clearly, good job.
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.
Thank you, this is amazing! Now I am going to use this and implement this to work with Webflow's CMS collection :)
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
A very useful video, lots of use-cases for this, thanks STD, you slayed it 🐉
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)
Hey, the videos you create are really awesome! ❤
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!
finally found the right video! thx ramzi
Thanks, this is exactly what I need! I hope more videos like this I leave like and sub
Perfetto, I love the approach!
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!
Simply amazing! You must be a genious!
Simply Awesome...❤
it was so cool simple clear and smooth that was awesome u made some painful things easy for me thanks for upload👍
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 😅 ❤
❤just awesome. Thank you
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.
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.
Negative animation delay would have been clearer if the divs were uniquely identifiable eg if they had number labels. Otherwise great video.
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
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
the master of CSS
kinda funny because growing up marquee was a html option that worked very simply.
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 😊
Who would’ve imagined we’d live long enough to see a overcomplicated
Thnaks
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
Nice approach. Be better if it worked with dynamic items. Rather than a fixed amount. Also adding animation pause on hover.
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
Great video as always, but what if you had multiple elemnts and only wanted to show a few of them at a time?
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 earned a sub. Amazing video. I have to ask this, im not a dev but i understand html and css a bit, here at 7:48 why didnt you leave the scrollleft to 'right: 100%' , the same way you did for .item with 'left:100%'? Im just trying to learn :)
changed it in codepen, didnt work :D but im curious to as why, neither 'right: 100%' or 'max(calc(200px * 8), 100%);' worked for '@keyframes scrollLeft'
may you do a CSS tutorial
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...
but will it repeat the same element infinitely ? which is the real requirement
Bro, please make a detailed tutorial on semantic HTML elements and explain when and how to use them correctly😠😭
Hi slaying,
How are you?
How about the Full Css course? Any release date?
I am waiting for that!
Thank you,
From Brazil ❤
Do anyone remember the tag from the 90s?
will you do you JAVASCRIPT course? i swear if you js course have this same quality of teaching i will buy your js course
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
Make more vid about Js
could you have started with right:0; and do the same?
Look good, but it now works for dynamic content
And how to make it moving from right to left? Tried here but: mess 😅
Please talk bro Dom in javascript ❤
Damn bro i already made that like 3 months ago without js ☠️
Me: *uses the deprecated marquee element in html*
nice one make some more quickt
IMHO this is not the useful solution in real life usage. Fixed height/width is often unwanted, also what if customer uses CMS system - dynamic count of the items.
I think that for dynamic items, you might be able to use inline CSS for the animation-delay.
meeh by title i was tihinking top-bottom infinite scroll and lazy load, 0:23 off
Please Make More Videos About JavaScript 🙏 , Thanks!
Code please
The maths doesn't work for larger numbers of divs... say 30.
It does work I just tried it.
Hmm maybe I made a mistake in my code. I did it with images (logos) inside div's.
yeah nice, but it's not infinite scroll. it's just marquee
Just write animation : scrollLeft 3s linear infinite;
Please work on the up-talk. It gets a bit annoying.
Noted! I'll add it to my to-do list, right under 'ignore unsolicited annoying comments'.
@@slayingthedragon It was a honest comment no disrespect intended.
Just will leave it there any content
It's deprecated, no one should use it.
Aside from the responsiveness, I feel cheated. This was all pretty standard. Not easy, really, but also not the least bit confusing.
And you are also missing one important feature, and are brushing over an issue.
- These sliders are very prone to breaking if any other developer comes around and wants to change something. Everything is hardcoded, so the only way you can mostly make sure you are doing it right. I feel like in most situations you don't actually know the number of these items at compile-time. And so your current use of classes like .item1 is also making this almost impossible to use in a real project.
- The leftmost item should be duplicated on the other side if there are not too many elements. Not just have a bigger gap between them. Just like you did manually at 0:07, but without literal duplication. I doubt this is possible without JS.
Your current version would look garbage on a 1920 screen with just 4 elements.
Not to mention that this is not what is typically referred to as "infinite scroll". It's a marquee, or like you said.
Infinite scroll is when elements are loaded dynamically as needed. Like social media timelines.
So this was genuinely a bit clickbaity, and not in a good way.
I disagree with almost almost everything you said..
"This was all pretty standard. Not easy, really, but also not the least bit confusing."
^- That's subjective. I have not seen this implementation of a marquee with CSS only anywhere. Other solutions either require JavaScript, or a bunch of div nesting in the HTML. This solution works without any of the above.
---
"These sliders are very prone to breaking if any other developer comes around and wants to change something."
^- I agree with this, however my job when I make videos about something is to educate. I'm not trying to provide you with production code, that's your responsibility. The code I provide can be extended with CSS variables and you can alter it to make it safer to the extent CSS allows you to.
---
"Everything is hardcoded"
^- Of course everything is hard coded, this is intentionally a CSS only solution.
---
"The leftmost item should be duplicated on the other side if there are not too many elements."
^- I agree, however again, this is purposely a CSS only solution and I can't think of any way of doing this without the use of JavaScript.
---
"Your current version would look garbage on a 1920 screen with just 4 elements."
^- If your marquee repeats the same 4 elements I'd argue you don't have enough elements for a marquee, in which case your marquee would look like garbage regardless.
---
"Not to mention that this is not what is typically referred to as "infinite scroll". It's a marquee, or like you said."
^- It's true that infinite scroll does refer to when elements are dynamically being rendered when needed, however it's also true that a marquee is also referred to as an infinite scrolling component.
---
"So this was genuinely a bit clickbaity, and not in a good way."
^- I literally added the graphics of a marquee in the thumbnail, there's no way someone would look at the graphics in the thumbnail and associate it with implementing a infinite timeline. It's literally an image of a marquee. You're free to think this was somehow clickbait but I hard disagree. Looking at the thumbnail, you can read "infinite scroll" and then marquee with the image right under the text. It also says CSS only, in what world do you see "CSS only" and think this will be a infinite scrolling timeline? Furthermore, in the first second of the video I'm showing images of marquees, and then I also mention that this animation is called a marquee. So 0 clickbait, and if there is clickbait you're enlightened about the subject within the first second.
are the divs shaking/jiggling about as they scroll or is that just my eyes?
It's just video stuff. You can test it out for yourself with the codepen link in the description of the video.
@@slayingthedragon I've implemented it on my side and I also experienced choppiness. I think it might be related to the use of "left" in the effect. I've tried replacing it with transforms but no success as of yet.
Got any idea how it could be done? Thanks
@@hoax1219 What's the hz on your monitor?
@@slayingthedragon 144hz, so I don't think it that would be the cause. Thanks for trying to help btw, love your content