Scroll-verknüpfte Animationen mit der Webanimations-API (WAAPI) und der Scrolltimeline

In diesem Artikel werden scroll-verknüpfte Animationen untersucht, eine neue Web-Technologie, die den Fortschritt der Animation mit dem Scrollen verbindet. Dieser Artikel konzentriert sich jedoch auf den JavaScript -Ansatz mit der Webanimations -API (WAAPI) und der ScrollTimeline -Klasse.

Wir werden WAAPI kurz überprüfen und dann in ScrollTimeline eintauchen, um scrollgesteuerte Animationen zu erstellen. Dies bietet eine leistungsstarke Alternative zu CSS-Lösungen, insbesondere zu den aktuellen Einschränkungen der aktuellen Kompatibilitätskompatibilität.

WAAPI: Eine kurze Auffrischung

Die WAAPI ermöglicht die Kontrolle von JavaScript über Animationen. Stellen Sie sich eine einfache CSS -Animation vor: eine Bar, die von rot zu dunkelrot wechselt, während sie sich horizontal ausdehnen. Das WAAPI -Äquivalent ist prägnant und flexibel:

 Neue Animation (
  neuer Keyframeeffect (
    document.querySelector ('. ProgressBar'),
    {
      BackgroundColor: ['Rot', 'Darkred'],
      Transformation: ['scalex (0)', 'scalex (1)'],
    },
    {
      Dauer: 2500,
      Füllung: 'Vorwärts',,
      Lockern: 'linear',
    }
  )
).spielen();

Oder prägnanter mit Element.animate() :

 document.querySelector ('. ProgressBar'). Animate (
  {
    BackgroundColor: ['Rot', 'Darkred'],
    Transformation: ['scalex (0)', 'scalex (1)'],
  },
  {
    Dauer: 2500,
    Füllung: 'Vorwärts',,
    Lockern: 'linear',
   }
);

Beide Beispiele definieren Keyframes (Animationseigenschaften) und Optionen (Dauer, Lockerung usw.).

Scrolltimeline integrieren

Um Animationen scrollabhängig zu machen, integrieren wir ScrollTimeline . Diese Klasse erstellt eine Animationszeitleiste, die mit dem Fortschritt eines Bildlaufcontainers verknüpft ist. Zu den wichtigsten Konfigurationsoptionen gehören:

• source (oder scrollSource im Chrom): das scrollbare Element. Standards zu document.scrollingElement .
• orientation : Scrollrichtung (z. B. 'Block' für vertikal). Standardmäßig vertikal.
• scrollOffsets : Definiert Fortschrittsintervalle, in denen die Timeline aktiv ist.

Beispiel:

 const myscrolltimeline = new Scrolltimeline ({{
  Quelle: Document.ScrollingElement,
  Orientierung: 'Block',
  Scrolloffsets: [
    Neues cssunitValue (0, 'Prozent'),
    Neues CSSunitValue (100, 'Prozent'),
  ],
});

Anbringen dieser an eine Waapi -Animation:

 Neue Animation (
  neuer Keyframeeffect (
    document.querySelector ('#progress'),
    {Transformation: ['scalex (0)', 'scalex (1)'],},
    {Dauer: 1, Füllung: 'Vorwärts'}
  ),
  Myscrolltimeline
).spielen();

Oder mit Element.animate() :

 document.querySelector ("#progress"). Animate (
  {
    Transformation: ["Scalex (0)", "Scalex (1)"]
  },
  { 
    Dauer: 1, 
    Füllung: "Vorwärts", 
    Zeitleiste: Myscrolltimeline
  }
);

Dies macht die Animation scrollengetrieben. Beachten Sie, dass Chromium derzeit scrollSource verwendet.

Browserkompatibilität und Polyfills

Derzeit unterstützen nur Browser auf Chrombasis ScrollTimeline vollständig, die häufig Feature-Flags benötigen. Die Scroll-Timeline Polyfill von Robert Flack bietet eine breitere Kompatibilität:

 Importieren Sie 'https://flackr.github.io/scroll-timeline/dist/scroll-timeline.js';

Erweiterte Verwendung: Elementbasierte Offsets

Über absolute Offsets hinaus können scrollOffsets elementbasierte Offsets verwenden, die basierend auf der Position eines Elements im Scroll-Container animieren. Diese Offsets umfassen:

1. target : Das verfolgte Element.
2. edge : Die Kante des Ziels Die Zeitleiste Uhren (z. B. "Start", "Ende").
3. threshold : Sichtbarkeitsprozentsatz (0,0-1,0).

Beispiel:

 {
  Ziel: document.querySelector ('#targetel'),
  Rand: 'Ende',
  Schwelle: 0,5,
}

Es können mehrere Offset -Objekte verwendet werden.

CSS gegen JavaScript: Ein Vergleich

Sowohl CSS- als auch JavaScript-Ansätze erzielen scrollengebundene Animationen. CSS ist für Einfachheit und fortschreitende Verbesserung vorzuziehen, aber die aktuelle Browserunterstützung ist begrenzt. JavaScript bietet eine breitere Kompatibilität, erfordert jedoch sorgfältige Berücksichtigung von Benutzern mit deaktivierter JavaScript. Die Wahl hängt von den Projektbedürfnissen und Prioritäten ab. Die Beispiele lieferten die Flexibilität und Leistung des JavaScript -Ansatzes mithilfe von WAAPI und ScrollTimeline .

Das obige ist der detaillierte Inhalt vonScroll-verknüpfte Animationen mit der Webanimations-API (WAAPI) und der Scrolltimeline. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!