![]() This way, when the animation reaches -100%, the duplicate element takes over, ensuring the animation continues without any disruptions. To avoid that, we’ll duplicate the ul element and position it right after the existing one. Now, if you preview the page, you’ll see that the animation works like a charm! But there’s one tiny hiccup – when the ul element reaches -100%, it suddenly jumps back to 0, breaking the seamless flow. Using this animation is as easy as adding the class animate-infinite-scroll to the element you wish to translate. We’ve also specified the keyframes of the animation, to translate from 0 to -100%. We’ve named the animation infinite-scroll, and it’s a linear, infinite, and lasts for 25 seconds. But since we’re using the Tailwind CDN, we’ll define the nfig object within a script tag in our HTML file. Typically, you’d have a file in your project’s root directory. However, Tailwind CSS doesn’t provide this specific animation out-of-the-box, so we’ll define it ourselves in our nfig object. All we need to do is translate the ul element to the left from 0 to -100%. :max-w-none removes the default 100% maximum width applied to images, preserving their original size, even on smaller screensĭefining the animation is straightforward.:mx-8 adds a horizontal margin of 32px to each list item.The ul element has the classes flex and items-center, which make the logos stand in a row and be vertically centered.Īdditionally, we’ve used some arbitrary Tailwind CSS variants to optimize the layout: Window.Enter fullscreen mode Exit fullscreen modeĮach list item will represent a company’s logo, and we’ve added the alt attribute to every image to ensure accessibility. * Listen to the scroll event on the window object and schedule the update function using throttling */ Link.addEventListener('click', function (event) px)` Have a question? See the FAQ or email me.Ĭonst anchorLinks = document.querySelectorAll('a') Applicable taxes will be charged at checkout. I will say that it is definitely my intention to keep adding tutorials to Element.how. You pay for what is available now, and the rest is a sweet extra. All future updates are included, but none are promised. Lifetime access to everything Element.how The price reflects what is currently available on Element.how.Support includes getting things working as intended. Great support Get help when you need it.One-time payment of only $299 No hidden fees or subscriptions.30 day money back No questions asked money back.free extra: Premium Access Lifetime Premium Access to Visit. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |