Bewegliche Regenbogen-Unterstreichungen

Ich liebe das Design der Sandwich-Website absolut. Unter vielen schönen Funktionen sind diese Überschriften mit Regenbogen-Unterstreichungen, die sich **beim Scrollen bewegen**. Es ist kein Scroll-Jacking – es ist nur eine kleine Designfunktion, die die Scroll-Position nutzt, um kleine Bewegungen zu erzeugen.

Um die Regenbogen selbst zu zeichnen, könnten wir einen linearen Farbverlauf mit harten Stopps verwenden, das gleiche Konzept wie beim Zeichnen von Streifen in CSS. Das ist ein großer Haufen CSS, was in Ordnung ist, aber ich sehe, dass sie sich stattdessen für ein background-image entschieden haben. Hier ist das als SVG, das 661 Bytes groß ist (winzig klein). Wir können es wie eine Unterstreichung aussehen lassen, indem wir die background-size so einstellen, dass die Höhe begrenzt wird, und es mit background-position am unteren Rand positionieren.

Wir werden dies auf einem Inline-Element tun, damit die Unterstreichung dort bricht, wo die Wörter brechen

h1 {
  span {
    background-image: url(spectrum.svg);
    background-repeat: repeat-x;
    background-size: 100vw 0.2em;
    background-position: left bottom 5px; 
  }
}

Um es zu animieren, verschieben wir die background-position-x. Keine besonders performante Sache zum Animieren, aber wir animieren es ohnehin nicht wirklich – es bewegt sich nur basierend auf der Scroll-Position. Anstatt die background-position-x manuell zu manipulieren, werden wir sie mit einer benutzerdefinierten Eigenschaft festlegen und dann die benutzerdefinierte Eigenschaft mit JavaScript manipulieren.

background-position-x: var(--scrollPos);

Das Aktualisieren dieser Variable, während die Seite scrollt, ist kinderleicht

window.addEventListener("scroll", e => {
  let scrollTop = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop; 
  let newPos = scrollTop + "px";
  document.documentElement.style.setProperty('--scrollPos', newPos);
});

Hier ist es in Aktion!

Siehe den Pen
Regenbogen-Unterstreichungen von Chris Coyier (@chriscoyier)
auf CodePen.

Sehen Sie diese etwas ruckelige Linie, wo ich entweder document.body oder document.documentElement verwende? Das ist eine dumme plattformübergreifende Sache, bei der das „scrollende Element“ in Safari anders ist als bei allen anderen.

Während ich dies tat, habe ich gelernt, dass man stattdessen document.scrollingElement verwenden kann, um diesen Ärger zu vermeiden. Ich werde einen Kommentar im Code dazu hinterlassen, aber die ursprüngliche Zeile für die Nachwelt belassen.