Making a CSS Only Infinite Text Marquee скачать в хорошем качестве

Making a CSS Only Infinite Text Marquee

The CSS marquee element brings me good memories to the good old days of the internet. So seeing this element being added to many new websites lately, makes me really excited. In today's video I want to show you the modern approach to make a dynamic width (text) marquee with CSS only. In next week's video we will be taking it even further, where we will be creating a fixed width logo slider, where there isn't any repetition in the logo's at all! Yet the marquee repeats seamlessly. LINKS: Code — https://www.frontend.fyi/recipes/comp... Live Playground — https://www.frontend.fyi/v/css-only-t... 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 01:10 – Code starting point 01:28 – Add some basic styling for the texts and put them on a single line 03:08 – Add keyframe animation to move text 03:38 – How to make the animation loop 04:50 – Making wrapper as wide as the text 05:19 – Why flexbox gap prevents us from looping infinitely 06:00 – translateX of -50% is exactly the same as the starting point 06:46 – Making the marquee loop by animating to -50% instead of -100% 07:40 – Fixing the accessibility problem of duplicated content 08:30 – Adding a nice fadeout around the edges 10:00 – Make the marquee able to move in both directions 11:49 – Make speed configurable too 12:10 – Rotating the marquees for extra fancyness 12:48 – Final result and outro #css #webdevelopment #frontend