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!