Build an Infinite Scroll Animation Effect Using Only CSS
HTML-код
- Опубликовано: 6 фев 2025
- This step-by-step CSS tutorial teaches how to design and implement an infinite CSS scroll animation effect using only HTML and CSS. In this video, we'll cover everything you need to know to create a seamless scrolling effect for stock symbols, prices, and changes, without relying on JavaScript. Learn how to craft an infinite stock ticker, logo carousel or news ticker that seamlessly scrolls through content, adding a touch of flair to your website.
Discover the power of CSS marquee animations as we demonstrate how to achieve an infinite scrolling effect without the need for JavaScript. From creating an infinite autoplay slider to crafting a horizontal stock ticker, our tutorial covers a range of techniques to elevate your web design skills. Watch now and level up your website with a dynamic and engaging scroll animation.
Like, share, and subscribe to our channel for exciting web development tutorials.
Live Demo: codepen.io/opt...
Related Topics
-----------------------------------------------------
Infinite Scrolling Animation
Infinite Marquee Animation With Pure CSS
How To Make An Infinite Autoplay Slider
Pure CSS Infinite News Ticker Scrolling Animation Effects
Creating an infinite logo carousel with pure CSS
How to Create a Horizontal News Ticker with CSS Only
Chapters
-----------------------------------------------------
00:00 Intro
00:34 The deprecated marquee tag
00:55 HTML for the infinite scroll animation
01:31 CSS for the infinite stock ticker
04:39 Fix scroll animation for a smoother effect
Subscribe and never miss a beat
-----------------------------------------------------
🔔 Subscribe for more videos like this: www.youtube.co...
Learn at your own pace
-----------------------------------------------------
Learn HTML - • Learn HTML to Build Mo...
Learn CSS - • Level Up Your CSS Skills
Learn JavaScript - • JavaScript
Connect, share, and grow
-----------------------------------------------------
RUclips: / @optimisticweb
X (Twitter): / optimisticweb
Instagram: / optimisticweb
Facebook: / optimisticweb
CodePen: codepen.io/opt...
#css #infinitescroll #cssscrolling #cssmarquee #cssanimation #webdesign #cssmagic #csstutorial #html #cssforbeginners #webdevtutorial #learncss #learnhtml #optimisticweb
Try and experiment with the code at the link provided in the description.
Cool, as always, especially I like that little thing with animation pause when hovering over
Thank you! That animation pause not only adds a nice touch but also enhances the overall user experience.
Awesome and very well presented tutorial. Thank you for sharing, and for providing the codepen demo.
You're welcome, glad you enjoyed it.
What would need to be changed if I wanted to let the text flow from left to the right, and not from the right to the left?
The easiest way will be to add the `reverse` keyword to the animation property.
Thanks for this video.
You're welcome!
excelent video!! thanks a lot dude!!
Appreciate you watching, glad you liked it!
For performance, use the intersection observer API to check whether or not the scroll animation is in view. If it is then have it scroll, otherwise don’t. This will help especially if you have multiple on one page.
Thanks for the tip!
Incredible effect! Thanks for sharing!
Thank you! Glad you enjoyed it.
Your Channel Is AMAZING KEEP GOING BUDDY
Thank you! Your support means a lot.
web technology is really ineffcient. great tutorial btw.
Thank you!
TYSM brother
You're welcome.
I love this channel
Thank you!
This is a very useful tip.
But I have a question about it.
As I understood, we need a twin which has no meaning for the html document but required only for this fluid scroll effect right?
I think this kind of approach is not a proper way of web accessibility, especially for people who rely on screen readers.
What about adding some Javascript?
I think adding some margin attribute for next marquee queue .. something like that will make it perfect.
Your tips and creative way of approach is always appreciated. And I love it. Thanks.
That's why, at 05:05, I talked about adding an aria-hidden attribute. It helps remove duplicated elements from the accessibility tree, so screen readers don't get mixed up. Also, when you use JS for carousels, it often creates duplicate elements on the fly. The main point of this video was to show how to make an endless loop using only CSS. Hope this helps.
@@OptimisticWeb
Aha!!!
I missed the area-hidden part. Sorry that I missed it.
Your works are great. Just keep on.
No problem, and thanks for your support.
its that simple! thank you!
You're welcome!
I've sees the list duplication 'trick' used elsewhere but hadn't realised how it worked: thanks for that. What does still confuse me is why we don't get the gap appearing at the end of the second list?
Thanks for watching! The gap property adds space between elements, but it doesn't add any space at the beginning of the first or the end of the last element.
RIP
Indeed, had its charm.
It still works though...?@@OptimisticWeb
Yes, even though it is deprecated, it still works in many browsers.
Not recommended as it could be removed anytime@@borstenpinsel
Has browsers removed any deprecated tags since 00’s?
thank you so much
You're welcome!
thanks im arabian and my english so beginner but i understand you thanks so much
Thank you, I'm glad you were able to follow along!
The pause only pauses one of the list while the other continues moving. Unless I'm doing something wrong?
You can compare your code with the demo link to identify and correct any errors that may be preventing both lists from pausing as expected.
Thanks Man 🤞🤞
You're welcome!
Thank you for this very useful video!
You’re welcome, glad you liked it!
Nice approach
Thank you!
Thank you, this is an amazing tutorial. I'm trying to use this for my website menu and I would like alternating rows to be moving in reverse. How can I achieve that? Currently I've got rows 2 and 4 scrolling the opposite way but they're leaving a big gap behind them and then it just resets.
Thank you! I'm glad you found the tutorial helpful. If you can share your CodePen, I can take a look and help debug the issue. Just a heads-up, adding multiple animations like this on a page can negatively affect performance and user experience, so it's worth considering the overall impact.
I love you was just what I needed
Glad to hear I could be of some help.
No one ever really explains why the marquee tag is "deprecated" and it just keeps being supported by most browsers if not all. The only real issue with marquee is simply that there's no way to avoid the empty space at the ends of each cycle. Maybe someday we'll get something like this: Some Content
To the best of my knowledge, the marquee tag was never officially included in W3C specifications. Though it still works in many browsers, it seems there hasn't been much effort to enhance or standardize it.
The logic is html is suppose to show what the content is not to show animations.
@@JamilKhan-hk1wl A valid point...
Thank you this, very clean code !🖥
Thank you! Glad you liked it.
Bloody clever!
Thanks a bunch!
look at the gap between the yellow and ping segment. It's not accurate and not properly setup. Still needs a lot of touch ups to be running smoothly
Thanks for watching! Please check the demo link to see how it is working.
It's good in general, but if you are going to use it in real progect it would not be okay. Due to the fact that it is immediately scroll back when first ul finished, and it has bad user experience, because it stops on the middle of the second ul at the same time.
Other words animation is not great in details
Thanks for your input. Regarding user experience, we've already got the aria-hidden attribute set up for screen readers. Plus, when the first UL replaces its copy, their positions and visual attributes are exactly the same so that no human eye can catch it. Also, there's a hover effect to let users pause the animation when they want to interact.
But, of course, there are several ways to achieve the same effect including the use of JavaScript. The aim of this video is to demonstrate a CSS-only approach to creating an infinite loop.
in a real project you would pull however many stocks you want from a database or something and have javascript to put the ul lists in twice.
Absolutely! JS-based carousels often clone elements at runtime.
Srsly, Someone should create a petition for bringing marquee back 2 life
(Yes, I know it still works, but please remove that deprecated label and make improvement on it)
Removing the deprecated label and improving it further would be interesting. Who knows, maybe someday..!
👏👏👏👏👏
I will do this and add an api for stocks
That sounds like a plan! Please share once it's done.
Rtl ?
It should work in another direction with some tweaks.
marquee is easiest
Indeed, but deprecated.
sorry. I noped out on unnecessarily duplicating the html.
No worries! Each solution has its pros and cons. Also, many JS-based carousels duplicate elements dynamically. That's precisely why we included the aria-hidden attribute, to ensure screen readers stay on track. Appreciate your feedback!
So much unnecessary info. Go straight to the point which is infinite scroll animation
Thank you for your feedback! I appreciate your input and always strive to improve. These videos aim to include information that benefits developers of all levels, including beginners, so sometimes we need to set the foundation. Please let me know which parts you found unnecessary and where I could be more concise.
bro already did us a favor by not extending this turorial to a 20 minute video, if you're still unsatisfied with that then just skip to your desired spot in the video. easy right?
@markykulit28 Thanks for supporting.