Yellow Flash

Wir kommen gleich zum Yellow Flash, aber alles hat mit der Scroll-Position auf der Seite zu tun und dem Verständnis dafür, wo man sich befindet. Heutzutage kann CSS allein die Scroll-Position auf einer Seite animieren. Es ist ein Einzeiler!

html {
  scroll-behavior: smooth;
}

Bis zu einem gewissen Grad ist dies eine ästhetische Entscheidung. Wenn eine Seite von einer Position zur nächsten scrollt (etwa durch einen „Jump-Link“ zu einer anderen ID auf der Seite), springt die Seite nicht sofort dorthin, sondern scrollt sanft. Über die Ästhetik hinaus besteht der Sinn darin, dem Benutzer zu helfen, den Kontext zu verstehen. Ah, ich verstehe, die Seite ist von hier nach dort gescrollt, und der Punkt, an dem sie angehalten hat, ist das Ziel meines Links.

Aber sanftes Scrollen ist nicht die einzige Möglichkeit, den Kontext einer Verlinkung innerhalb derselben Seite zu betonen. Wir können dies auch durch eine visuelle Änderung des Zielbereichs erreichen, und ich würde behaupten, dass es so am deutlichsten ist.

Glücklicherweise gibt es einen CSS-Pseudoselektor, der perfekt dafür geeignet ist, Elemente zu stylen, wenn sie intern verlinkt wurden: den :target-Selektor, der auf jedes Element angewendet werden kann.

section:target {
  background: yellow;
}

Das bedeutet: Wenn der #hash in der URL mit der #id dieses Elements übereinstimmt, greift dieser Selektor und gestaltet es entsprechend.

Wenn es also ein Element gibt wie…

<section id="footnotes">

</section>

Und die URL zufällig so aussieht:

https://website.com/#footnotes

Dann greift dieser Selektor, und wir sehen, dass es einen gelben Hintergrund hat.

Diese URL würde entstehen, wenn ein Link wie dieser angeklickt wird:

<a href="/#footnotes">Jump to Footnotes</a>

Hier gibt es allerdings natürlich einen Trick. Ein gelber Hintergrund allein (oder ein anderes statisches Styling) schreit nicht gerade: „Du bist gerade hierher verlinkt worden!“ Eine kleine Animation kann hier viel bewirken. Wenn man den Hintergrund des verlinkten Elements nicht einfach nur auf Gelb setzt, sondern ihn stattdessen nur kurz gelb aufleuchten lässt, reicht das aus, um die Aufmerksamkeit zu lenken und die Aktion sehr deutlich zu machen.

Hier ist ein Beispiel und eine Demo. Angenommen, Sie haben einen Link zu einer Fußnote am Ende eines Artikels. Dies ist besonders interessant, da ein Link zum Ende einer Seite oft schwer hervorzuheben ist (es gibt dort eventuell nicht genug Platz zum Scrollen, um die Fußnote an den oberen Rand der Seite zu bringen).

<p>
  Lorem ipsum<sup class="footnote" id="footnote-top-1">
    <a href="#footnote-bottom-1">1</a></sup>
  dolor sit amet consectetur adipisicing elit.
</p>

Dann am Ende der Seite die eigentliche Fußnote, auf die Sie verlinken:

<div id="footnotes" class="footnotes">
  <ol>
    <li id="footnote-bottom-1">Lorem ipsum is Greek. 
      <a href="#footnote-top-1">
        <span class="screen-reader-text">Back to reference</span>
        ↥
      </a></li>
  </ol>
</div>

Beachten Sie, dass beide Anker-Links hier Jump-Links verwenden, footnote-bottom-1 und footnote-top-1 zu den jeweiligen IDs.

Wir können die Fußnote selbst aufblinken lassen, sobald man bei ihr ankommt, indem wir eine @keyframes-Animation verwenden:

.footnotes :target {
  animation: yellowflash-bg 2s;
}
@keyframes yellowflash-bg {
  from { background: yellow; }
  to   { background: transparent; }
}

In diesem Fall blinkt sie sofort gelb auf und blendet dann über 2 Sekunden wieder zu einem transparenten Hintergrund aus.

Hier ist ein interaktives Beispiel:

Das ist der Yellow Flash! Natürlich muss es nicht gelb sein und es muss nicht einmal blinken. Der Punkt ist, etwas zu tun, um visuell zu kennzeichnen, was verlinkt wurde, um für Klarheit zu sorgen.

Die obige Demo ist mit Smooth Scrolling kombiniert, aber vielleicht möchten Sie das nicht tun, da man das Timing des sanften Scrollens nicht kontrollieren kann. Es besteht also das Risiko, dass der Yellow Flash bereits beendet ist, wenn man am Ziel ankommt.

Hey, ein Schüttel-Effekt („Shake“) könnte auch Spaß machen.