Animations liées à défilement avec l'API Web Animations (WAAPI) et ScrollTimeline

Cet article explore les animations liées à Scroll, une nouvelle technologie Web reliant les progrès de l'animation vers le défilement. Bien que précédemment réalisable avec CSS seul, cet article se concentre sur l'approche JavaScript à l'aide de l'API des animations Web (WAAPI) et de la classe ScrollTimeline .

Nous allons brièvement passer en revue WAAPI, puis nous plongerons dans l'utilisation ScrollTimeline pour créer des animations axées sur le défilement. Cela offre une alternative puissante aux solutions CSS uniquement, en particulier compte tenu des limitations de compatibilité actuelle du navigateur.

Waapi: un rafraîchissement rapide

Le WAAPI permet un contrôle JavaScript sur les animations. Considérez une simple animation CSS: une barre passant du rouge au rouge foncé tout en se développant horizontalement. L'équivalent waapi est concis et flexible:

 Nouvelle animation (
  NOUVEAU EFFEFFECT DE CLÉS (
    document.QuerySelector ('. Progressbar'),
    {
      BackgroundColor: [«Red», «Darkred»],
      transformée: ['Scalex (0)', 'Scalex (1)'],
    },
    {
      Durée: 2500,
      Remplir: «Forward»,
      Selon: «linéaire»,
    }
  )
).jouer();

Ou, plus succinctement en utilisant Element.animate() :

 document.QuerySelector ('. ProgressBar'). Animate (
  {
    BackgroundColor: [«Red», «Darkred»],
    transformée: ['Scalex (0)', 'Scalex (1)'],
  },
  {
    Durée: 2500,
    Remplir: «Forward»,
    Selon: «linéaire»,
   }
));

Les deux exemples définissent les images clés (propriétés d'animation) et les options (durée, l'assouplissement, etc.).

Intégration de ScrollTimeline

Pour rendre les animations dépendant du défilement, nous intégrons ScrollTimeline . Cette classe crée une chronologie d'animation liée aux progrès d'un conteneur de défilement. Les options de configuration des clés incluent:

• source (ou scrollSource dans le chrome): l'élément de défilement. Par défaut, document.scrollingElement .
• orientation : Direction de défilement (par exemple, «bloc» pour la verticale). Par défaut est vertical.
• scrollOffsets : définit les intervalles de progression où la chronologie est active.

Exemple:

 const myscrolltineline = new ScrollTimeline ({{
  Source: document.scrollingElement,
  Orientation: «Block»,
  ScrollOffSets: [
    Nouveau CSSUnitValue (0, «pourcentage»),
    Nouveau CSSUnitValue (100, «pourcentage»),
  ],
});

Attacher cela à une animation waapi:

 Nouvelle animation (
  NOUVEAU EFFEFFECT DE CLÉS (
    document.QuerySelector ('# Progress'),
    {transform: ['scalex (0)', 'Scalex (1)'],},
    {Durée: 1, remplissage: «Forward»}
  ),
  myscrolltineline
).jouer();

Ou avec Element.animate() :

 document.QuerySelector ("# Progress"). Animate (
  {
    Transform: ["Scalex (0)", "Scalex (1)"]
  },
  { 
    Durée: 1, 
    Remplir: "Forward", 
    Chronologie: MyScrollTiline
  }
));

Cela rend l'animation axée sur le défilement. Notez que Chromium utilise actuellement scrollSource .

Compatibilité du navigateur et polyfills

Actuellement, seuls les navigateurs basés sur le chrome prennent entièrement en charge ScrollTimeline , nécessitant souvent des drapeaux de fonctionnalité. Le polyfill de défilement de défilement de Robert Flack offre une compatibilité plus large:

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

Utilisation avancée: décalages basés sur des éléments

Au-delà des décalages absolus, scrollOffsets peut utiliser des décalages basés sur des éléments, animant en fonction de la position d'un élément dans le conteneur de défilement. Ces décalages comprennent:

1. target : l'élément suivi.
2. edge : le bord de la cible Les montres de la chronologie (par exemple, «démarrer», «fin»).
3. threshold : pourcentage de visibilité (0,0-1,0).

Exemple:

 {
  Target: document.QuerySelector ('# TargetEl'),
  Edge: «fin»,
  Seuil: 0,5,
}

Plusieurs objets de décalage peuvent être utilisés.

CSS vs JavaScript: une comparaison

Les approches CSS et JavaScript réalisent les animations liées à un défilement. CSS est préférable pour la simplicité et l'amélioration progressive, mais le support actuel du navigateur est limité. JavaScript offre une compatibilité plus large mais nécessite une attention particulière pour les utilisateurs avec JavaScript désactivé. Le choix dépend des besoins et des priorités du projet. Les exemples fournis mettent en valeur la flexibilité et la puissance de l'approche JavaScript à l'aide de Waapi et ScrollTimeline .

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!