Interaktive Inhalte einblenden

Mit CSS-Masken und registrierten benutzerdefinierten Eigenschaften können Sie Ihrer Website leistungsstarke, interaktive Aufdeckungseffekte hinzufügen. Wenn wir einen radialen Farbverlauf als Maske verwenden und die Stoppwerte registrieren, können wir den Ein- und Ausgang fließend gestalten und gleichzeitig den Mauszeiger des Nutzers mit minimalem JavaScript verfolgen.

Implementierung

1. Benutzerdefinierte Eigenschaften registrieren

Damit die Werte der Farbverlaufsstopps gleichmäßig interpoliert werden können, müssen Sie die Variablen mit @property registrieren. Dadurch wird die Engine des Browsers über den Datentyp informiert, sodass sie bei Aktualisierungen zwischen Werten wechseln kann.

/* Register the spotlight inner and outer sizes to enable interpolation */
 @property --inner-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}
@property --outer-size{
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 0px;
}

Die benutzerdefinierten Eigenschaften, die die Zeigerposition verfolgen, müssen nicht umgestellt werden. Daher ist es nicht erforderlich, sie zu registrieren.

2. Maskierungsebene definieren

Wenden Sie die mask-image auf das Element an, das Sie einblenden möchten. Verwenden Sie einen radial-gradient, der auf die registrierten Properties verweist.

.reveal-layer {
  /* Only transition the size properties, NOT the position variables */
  transition: --inner-size 0.2s ease-in-out, --outer-size 0.2s ease-in-out;  

  /* The spotlight is defined by the transparent center of the mask */
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );

  /* Ensure the mask doesn't repeat if the element is large */
  mask-repeat: no-repeat;

  /* Make the mask layer non-interactive */
  pointer-events: none;
}

/* Update the gradients stops on interaction */
.reveal-layer:hover {
  --inner-size: 100px;
  --outer-size: 120px;
}  

3. Koordinaten mit JavaScript aktualisieren

Die Position des Mauszeigers verfolgen und die CSS-Variablen aktualisieren. Da die Eigenschaften registriert sind und ein transition definiert ist, bewegt sich der Spotlight-Effekt auch dann flüssig, wenn die Zeigerereignisse selten sind.

const container = document.querySelector('.container');
// Store the container's bounding rect
let rect = container.getBoundingClientRect();
// Update the rect when the container is resized
const resizeObserver = new ResizeObserver(()=>{
  rect = container.getBoundingClientRect();
})
resizeObserver.observe(container);

container.addEventListener('pointermove', (e) => {
  // Calculate position as a percentage of the container.
  const x = ((e.clientX - rect.left) / rect.width) * 100;
  const y = ((e.clientY - rect.top) / rect.height) * 100;

  // Update the registered properties
  container.style.setProperty('--mouse-x', `${x}%`);
  container.style.setProperty('--mouse-y', `${y}%`);
});

4. Barrierefreiheit und Interaktion

OBLIGATORISCHE Garantie für Barrierefreiheit im Internet: Dieses Muster basiert auf Zeigerinteraktionen, um einen visuellen Spotlight-Effekt anzuzeigen. Sie MÜSSEN dafür sorgen, dass alle zugrunde liegenden Inhalte im zugrunde liegenden Layout standardmäßig vollständig sichtbar, lesbar und unabhängig über die Tastatur erreichbar bleiben. Die Spotlight-Ebene darf nur als nicht wesentliche visuelle Verbesserung für Nutzer mit Zeigegeräten verwendet werden. Verwenden Sie diesen Effekt niemals, um wichtige Inhalte für Nutzer, die nur die Tastatur verwenden, oder Nutzer von Hilfstechnologien zu verbergen oder zu blockieren.

• Zeigerereignisse: Legen Sie für die Masken-Overlay-Ebene pointer-events: none fest, damit Standard-Klick- und Berührungsinteraktionen an die darunter liegenden Steuerelemente weitergegeben werden können.
• Überschreibung für weniger Bewegung: Deaktivieren Sie die Interpolation für flüssige Übergänge für Nutzer, die weniger Bewegung wünschen.

/* MANDATORY Copy-Paste Safety: Disable transition scaling for motion-sensitive users */
@media (prefers-reduced-motion: reduce) {
  .reveal-layer {
    transition: none !important;
  }
}

Fallback-Strategien

Fallback für nicht registrierte Unterkünfte

In Browsern, die mask-image, aber nicht @property unterstützen, wird der Spotlight-Effekt zwar angezeigt, aber die Bewegung springt zwischen dem Ein- und Aus-Zustand, da Werte innerhalb von radial-gradient nicht interpoliert werden können. Geben Sie Fallback-Werte an, wenn Sie var() verwenden.

.reveal-layer {
  mask-image: radial-gradient(
    circle at var(--mouse-x) var(--mouse-y),
    /* Use fallback values when using the `var()` function for browsers that don't get an initial value from the @property registration. */
    black var(--inner-size, 0%),
    transparent var(--outer-size, 0%)
  );
}

Grundlegende Maskenunterstützung

Für Browser, die CSS-Maskierung überhaupt nicht unterstützen:

1. Präfix-Property: Verwenden Sie die Präfix-Property -webkit-mask-image, um eine breitere Browserunterstützung zu erreichen.
2. Progressive Verbesserung: Gestalten Sie den Grundzustand der Benutzeroberfläche so, dass er auch ohne den Aufdeckungseffekt voll funktionsfähig und lesbar ist. Das ist nützlich, wenn der Effekt nur visuelle Akzente setzt und nicht zum Lesen von Inhalten erforderlich ist.