CSS-Only Scrollspy Effect Using scroll-marker-group and :target-current
Sara Soueidan shows how to create a Scrollspy effect using a couple of lines of CSS.
Issue #619
Rolling the Dice with CSS random()
Jon Davis, Jen Simmons, and Tim Nguyen give an introduction to the random() function that’s coming to CSS, which will let you create a random animation delay, layout content at a random place on the screen, create a random color, or anything you want — all without any JavaScript.
From Our Sponsor
Rocket — Thoughtful and Wholesome App Generation
Rocket is the world’s most advanced vibe coding tool—a new way to build apps that’s as easy as speaking an idea out loud.
In one sentence, you describe what you want, and Rocket gives you a complete, fully functional, beautifully designed product, including:
- Landing pages with modern animations and responsive design
- Dashboards with real-time logic
- Internal tools with backend integration
- Portfolios and personal websites
- AI-powered utilities
- Full-stack SaaS apps
- Monetized products (subscriptions, ads, etc.)
No scaffolding. No fiddling with menus. No wrestling with components. Get free credits and build your first project today.
CSS Weekly on YouTube
▶ VS Code Tips — How To Restore Deleted Files Easily Using Local History
Quick tip showing how to restore deleted files in Visual Studio Code using local file history, and how to restore different versions of files outside of version control.
Sponsored Link
Level Up Your Coding Skills With Scrimba
Level up your coding skills in a variety of languages and frameworks, from front-end to fullstack, courses on subjects Next, Express, Supabase, Vite, TypeScript, React, and more.
As a CSS Weekly reader, you will get a 20% discount if you upgrade to Scrimba Pro to get access to all of their courses.
Inspiration
Whimsical SVG hover animation with GSAP
Josh Dillon created an incredibly effective hover effect you should check out.