Build an Infinite Scroll Animation Effect Using Only CSS
ฝัง
- เผยแพร่เมื่อ 29 ก.ค. 2024
- 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/optimisticweb/pen/...
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.com/@OptimisticWe...
Learn at your own pace
-----------------------------------------------------
- Learn HTML - • HTML
- Learn CSS - • CSS
- Learn JavaScript - • JavaScript
Connect, share, and grow
-----------------------------------------------------
- TH-cam: / @optimisticweb
- X (Twitter): / optimisticweb
- Instagram: / optimisticweb
- Facebook: / optimisticweb
- CodePen: codepen.io/optimisticweb
#css #infinitescroll #cssscrolling #cssmarquee #cssanimation #webdesign #cssmagic #csstutorial #html #cssforbeginners #webdevtutorial #learncss #learnhtml #optimisticweb
![เบิ้ล ปทุมราช - อ้ายกินดอง น้องลาบงัว ft. สแน็ก อัจฉรีย์ [OFFICIAL MV]](http://i.ytimg.com/vi/-OK--KaSPcI/mqdefault.jpg)
Try and experiment with the code at the link provided in the description.
Awesome and very well presented tutorial. Thank you for sharing, and for providing the codepen demo.
You're welcome, glad you enjoyed it.
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.
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 this, very clean code !🖥
Thank you! Glad you liked it.
Bloody clever!
Thanks a bunch!
Your Channel Is AMAZING KEEP GOING BUDDY
Thank you! Your support means a lot.
Thanks Man 🤞🤞
You're welcome!
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.
web technology is really ineffcient. great tutorial btw.
Thank you!
Nice approach
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.
👏👏👏👏👏
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...
I will do this and add an api for stocks
That sounds like a plan! Please share once it's done.
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..!
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.
Why did they get rid of the marquee tag? Idiotic move.
From what I understand, the marquee tag had limitations and didn't align well with accessibility and modern design principles. However, it still works in many browsers.
I don't buy that argument. In the end I built an infinite scroller using vanilla js and css key frames which can be turned off on mobile devices.
It could have been improved if there were any issues with the marquee tag. Not sure why no one went down that path. Anyways, there are alternatives in the market, with or without JS.
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.