Can we Make A CSS Only Logo Marquee With ZERO Repetition? скачать в хорошем качестве

Can we Make A CSS Only Logo Marquee With ZERO Repetition?

In last week's video we created a CSS only text marquee. Because alle the texts in the marquee had a different width, we had to resort to mirroring the contents, and swapping the animation exactly halfway to make the impression that the marquee loops infinitely. I'm not a huge fan of duplicating this content, and for todays video I'm therefore uploading a second variant, where we have no duplication in content at all. The only condition is that all 'slides' have the same width. Let's explore how we can create this together! LINKS: Code — https://www.frontend.fyi/recipes/comp... Live Playground — https://www.frontend.fyi/v/css-only-l... Last week's text marquee tutorial —    • Making a CSS Only Infinite Text Marquee   MORE? 📈 If you want more content like this, become a Frontend FYI PRO and get access to my current and all future courses for a one-time purchase: https://fe.fyi/pro 📺 If you want to see more videos like these, check out my website: https://fe.fyi/videos ✉️ Subscribe to my newsletter: https://fe.fyi/newsletter MY SOCIALS 🌍 My website – https://www.frontend.fyi 🐦 Twitter –   / jeroenreumkens   📸 Instagram –   / jeroenreumkens   💼 Linkedin –   / jeroenreumkens   COLLAB Want to work together on creating content? Feel free to reach out via jeroen [at] frontend.fyi WHO AM I? If you're new to this channel — Hey, my name is Jeroen. A frontend engineer with almost 15 years of professional experience, who in 2023 decided to stop teaching only his close collegeas to start teaching the whole world. What I teach some call Design Engineering, I like to call it the Craft of Frontend. TIMESTAMPS: 00:00 – Intro 00:35 – Looking at the code starting point 01:29 – Technical explanation how this is going to work 03:08 – Start coding, setting up the marquee wrapper 04:24 – Stacking all slides out of view, using CSS Grid and container queries 07:54 – First animation of the marquee slides 09:38 – Animate each slide with its own delay 12:50 – Changing the marquee track size 15:20 – Adding a gap between the items 16:27 – Fixing the overflow and adding a nice fadeout 17:45 – Using a negative animation delay to make the items start in view 18:40 – Making the marquee move in two directions 19:28 – Outro #css #webdevelopment #frontend