Smooth Scrolling Sticky ScrollSpy Navigation, with CSS fixed backgrounds

Davor Suljic created a fork of my Smooth Scrolling Sticky ScrollSpy Navigation that — instead of using IntersectionObserver — uses some background magic to highlight the active navigation items. The result is a “Pure CSS” implementation:

~

If you turn on an outline on one of the content sections it becomes clear how it exactly works:

  • The content sections also appear underneath the navigation
  • The content sections have background set, which has the exact same dimensions as their linked navigation item.
  • The backgrounds are positioned visually underneath their linked navigation item using background-position: fixed;

It’s a delicate combination, but I’m pretty excited that this actually works 🙂

Do note though:

  • You’ll need to add an extra wrapper whose width is limited around the section’s content, to prevent the content from appearing underneath the navigation.
  • Active state is a bit tricky:

    • Items high up the navigation list — such as Authentication — will become active pretty late, whereas items lower in the navigation bar — such as Expanders — will get their active state applied quite early. This is because the active state of nav items “starts” when the top of its linked container intersects with the nav item itself.
    • For small content-sections — such as Links – the nav item will become inactive too early, even before its linked section has left the viewport (and even when it still entirely in view). This is because the content itself is not that big and the nav item is pretty low in the navigation list.
  • You’re limited to background effects only. No making the nav items bold/italic, or changing their color.

Recreating the Apple Keynote Event animation using SVG, Canvas, and GreenSock

Louis Hoebregts recreated the animation of last Apple’s recent Keynote Event using SVG, Canvas, and GreenSock:

See the Pen
Apple Keynote animation
by Louis Hoebregts (@Mamboleoo)
on CodePen.

Crazy! 🤯

If you’re curious to see how he’s done it, in the demo below he breaks it down step by step:

See the Pen
Apple Keynote animation – How to
by Louis Hoebregts (@Mamboleoo)
on CodePen.

Progress Nav with IntersectionObserver

In Table of Contents with IntersectionObserver on CSS-Tricks, Chris Coyier talks about sticky table of contents on long pages whose active state updates as you scroll. When talking about those, you can not not mention the wonderful Progress Nav by Hakim El Hattab.

~

As Hakim’s demo from 2017 (!!) does not use IntersectionObserver — which was in it’s very early stages back then — Chris hinted that someone should make a version that uses it. Anders Grimsrud took up the challenge, and built it:


See the Pen
Hakim’s Progress Nav Concept using the Intersection Observer API
by Anders Grimsrud (@agrimsrud)
on CodePen.

Cool! 🙂

💡 Be sure to check Hakim’s “Building Better Interfaces” talk, which is full of inspiration to make your interfaces more delightful. Recommended stuff!

😊 I was very happy to see Chris including my 2020 Smooth Scrolling Sticky ScrollSpy Navigation in his post too.

CSS background-clip Demo: Text with Animated Emoji

Fun demo by Elad Shechter:


See the Pen Background-clip: text with Animated Emoji by Elad Shechter (@elad2412) on CodePen.

Behind it are two techniques:

  1. The 👻 emoji is set as the background-image of the text. To do so one must wrap it inside an SVG, and successively inject the SVG using a Data URL.

  2. To clip the emoji to the foreground text, he uses background-clip: text.

I like the fact that these techniques by themselves are not new, yet their combination is (at least to me this was the case):

  1. The “Emoji in SVG”-technique allows you to have an Emoji Mouse Cursor or use an emoji as favicon.
  2. Using background-clip: text works on any background image. As gradients can also be set as background images, you can create gradient links.

SVG Cassette Tape

Past weekend Lou Ottens — inventor of the Casette Tape while working at Philips Hasselt (Belgium) — passed away at the age of 95. Sharing this Greensock-powered SVG Animation by Chris Gannon seems very timely.

See the Pen Cassette Tape Loader by Chris Gannon (@chrisgannon) on CodePen.

Anyone got a pencil? 😅

Getting the Mouse Position using CSS

For his post How to Map Mouse Position in CSS on CSS-Tricks, Amit Sheen created this lovely demo:

The demo does use CSS Custom Properties for the X/Y position of the mouse, but they’re not injected using JavaScript. Instead, Amit uses the same technique as used in CSS-Only Direction Aware Hover: capture the hover on extra injected elements (here: 100 of them 😅).

By means of a General Sibling Combinator he then passes the data of each cell — which knows its location in the grid — to the content.

.cell:nth-child(42):hover ~ .content {
  --positionX: 1;
  --positionY: 3;
}

Pure CSS Stopwatch ⏱️

Nice demo by Jhey in which he created a Pure CSS Stopwatch:

It uses a clever combination of CSS Animations, CSS Counters, and @property:

  1. Each digit gets its own CSS Animation with its own timing.
  2. Inside each animation the value of a CSS Counter is adjusted.
  3. By defining those values as numbers using CSS @property, CSS knows how how to “animate” (read: interpolate) the values.

The animation play state is controlled using a checkbox, as detailed here.

💁‍♂️ CSS Counters is one of the 9 Underutilized CSS Features

About Us Pop-Out Effect

Cool demo that uses clip-path: path(…);, a feature that recently shipped with Chromium, making it supported in all three major rendering engines.


See the Pen About Us Pop-Out Effect by Mikael Ainalem (@ainalem) on CodePen.

Peeking under the hood – using the SVG Path Visualizer — you can see that it’s the .container-inner that is clipped not in a circular way, but a vertical rectangle with a circular bottom. The photo of the person itself already is transparent and using scale and translate the pop-out effect is created.