View() - Fonction CSS

Schéma syntaxique de view().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• length est une valeur numérique suivie d'une unités de dimension. S'il s'agit d'un pourcentage il est calculé par rapport à la dimension du conteneur défilable, dans la direction du défilement.

Description de la fonction view().

Voici comment se comporte une animation classique (pilotée par le temps), et une animation pilotée par le défilement (Scroll Driven Animation). Pour mettre en oeuvre cette dernière, il faut un container défilant (avec barres de défilement) et un élément qui de déplace à l'intérieur (celui qui sera animé).

Plus précisément, avec view(), l'animation est pilotée par l'affichage d'un élément dans son cadre défilant. Autrement dit, l'animation commence dès que l'élément apparaît dans la fenêtre visible du container défilant, et se termine lorsqu'il le quitte.

La fonction view() est une syntaxe simplifiée qui évite de définir un nom et un axe avec les propriétés view-timeline-name et view-timeline-axis ou la propriété résumée view-timeline.

Pour une présentation plus complète des animations pilotées par un défilement, reportez-vous à notre tutoriel : animations pilotées par un défilement.
Voyez également la propriété view-timeline-inset dans le role est identique à celui de la fonction view().
Il existe une autre sorte d'animations pilotées par le défilement, voyez la page scroll().

La valeur view() peut être utilisée avec les propriétés suivantes :

• animation-timeline : Associe l'animation à autre chose que le temps, par exemple le défilement d'un élément.

Syntaxes de la fonction view().

• animation-timeline: view(inline);

  Avec cette syntaxe, view() définit l'axe qui va piloter l'animation. Ce paramètre peut prendre l'une des valeurs suivantes (la valeur par défaut est block) :

  • x : l'axe horizontal.
  • y : l'axe vertical.
  • inline : l'axe dans le sens des lignes.
  • block : l'axe dans le sens des blocs.
  1

  2

  3

  4

  5

  6

  7

  8

  9
  animation-timeline:view(inline)
• animation-timeline: view(inline 50px 100px);

  Ces deux valeurs sont des valeurs numériques suivies d'une unités de dimension ou des pourcentages, calculés par rapport à la dimension de l'élément défilant, dans le sens de défilement.

  Si une seule valeur est indiquée, la deuxième est considérée comme étant identique.
  Les valeurs 0% 0% couvre l'intégralité de la zone de défilement (ce sont les valeurs par défaut).

  1

  2

  3

  4

  5

  6

  7

  8

  9
  animation-timeline:view(inline 50px 100px)

  Voici comment il faut comprendre ces deux valeurs. La première valeur correspond au début de l'animation, la deuxième à la fin. Dans la mesure où l'animation est pilotée par la barre de défilement, le début de l'animation correspond au début de cette barre, autrement dit à la fin du conteneur défilant. Elle corespondent à deux plages pendant lesquelles il ne se passe rien (l'animation n'est pas jouée). Ces plages sont représentées en gris sur notre schéma. Entre ces zones l'animation se déroule normalement.

  1

  2

  3

  4

  5

  6

  7

  8

  9
  animation-timeline:view(inline 50px 100px)

  
  Si les deux valeurs se chevauchent (compte-tenu de la longueur de l'élément mobile) l'animation ne se fait pas. Enfin si la valeur de début est négative, l'animation commence avant que l'élément animé ne soit visible. Si c'est la valeur de fin qui est négative, l'animation se termine après que l'élément ait disparu.

  Lorsqu'il est dans l'une de ces zones grises, l'élément prend la valeur définit par animation-fill-mode :

  • none : la valeur est déterminée par les autres propriétés associées à cet élément. Dans notre exemple la couleur est transparente.
  • forwards : lorsque l'animation est terminée, la valeur de fin de l'animation est utilisée. Dans notre exemple, il s'agit du rouge.
  • backwards : avant que l'animation ne commence, la valeur de début de l'animation est utilisée. Dans notre exemple, c'est le vert.
  • both : les deux valeurs sont utilisées.
  1

  2

  3

  4

  5

  6

  7

  8

  9

  animation-timeline:view(inline 50px 100px);
animation-fill-mode:backwards;

  1

  2

  3

  4

  5

  6

  7

  8

  9

  animation-timeline:view(inline 50px 100px);
animation-fill-mode:forwards;

Simulateur avec la fonction view()

Ne fonctionne pas sur Firefox  , à moins d'une mise à jour.

Prise en charge par les navigateurs (compatibilité).

Sur Firefox   les fonctionnalités relatives aux animations pilotées par un défilement sont désactivées par défaut. Il est toutefois possible de les activer avec le flag layout.css.scroll-driven-animations.enabled à positionner sur true (accéder aux flags sur Firefox).

Remarques :

(1) Désactivé par défaut. Peut être activé avec le flag layout.css.scroll-driven-animations.enabled.

1

Fonction
view

Estimation de la prise en charge globale.

74%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Opéra

Safari

Safari sur IOS

Chrome

Firefox

1

Samsung Internet

Edge

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Historique de la fonction view().

• Animations pilotées par un défilement - Niveau 1

  Première définition de la fonction view().
  

  25 Octobre 2022

  Document de travail.

  

  

  

Voir aussi, à propos des animations pilotées par un défilement.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété view() fait partie du module Scroll-driven Animations. Les définitions suivantes sont également décrites dans ce même module.

Propriétés :

Fonctions :