Faites glisser les dimensions illimitées avec des délais de défilement CSS

La philosophie de conception originale de CSS, dont les créateurs avaient imaginé qu'elle deviendrait la technologie principale pour le contrôle du comportement Web, et les langues de script ne sont qu'une alternative lorsque CSS ne peut pas implémenter de manière déclarative. Cette méthodologie d'utilisation prioritaire de CSS est basée sur le concept selon lequel "les scripts sont la programmation, mais la programmation est difficile". Depuis l'introduction du ：hover pseudo-classe, CSS a normalisé les modèles créés par les développeurs en JavaScript et les a "inclus" dans la norme CSS. De ce point de vue, JavaScript est presque comme une "solution de contournement", et CSS est l'approche officielle.

Par conséquent, l'utilisation de CSS pour implémenter un comportement de type script nous fait nous sentir moins "awkish", et il n'est pas surprenant que des fonctionnalités comme la nouvelle fonctionnalité scroll-timeline apparaissent. De nombreux développeurs mettent en œuvre des sites Web de défilement de parallaxe intelligents, ce qui nous empêche de remettre cette fonction CSS "Sprite" dans la bouteille. Si vous ne voulez pas l'animation de fil principal bégayé dans le site de défilement de parallaxe suivant, vous devez maintenant passer au "côté obscur" des pirates CSS. (Je plaisante), si vous préférez la programmation impérative, il existe également une nouvelle API JavaScript pour les animations d'association de défilement.

Migrer des exemples JavaScript vers CSS

Modifiez l'exemple d'animation de parallaxe de défilement avant Chris Coyier, remplacez le CSS utilisé par Chris pour contrôler l'animation par une ligne de code scroll-timeline CSS et supprimer complètement le code JavaScript, ce qui est satisfaisant de manière satisfaisante.

L'utilisation de la fonction

body, .progress, .cube {
  animation-timeline: scroll();
}

sans paramètres définira une "chronologie de progression de défilement anonyme", ce qui signifie que si notre mode d'écriture est en anglais, le navigateur animera en fonction des éléments d'ancêtre récents qui peuvent faire défiler verticalement. Malheureusement, il serait très utile d'avoir un choix pour animer en fonction de la défilement sur l'axe X ou l'axe Y d'un élément particulier, pas les deux. En fonction, nous pouvons transmettre des paramètres à

, ce qui donne un meilleur contrôle sur la façon dont nous voulons que le parchemin exécute l'animation. scroll() scroll() Expérience multidimensionnelle

Mieux est l'attribut

. L'appliquer à un élément de conteneur signifie que nous pouvons animer les attributs sur n'importe quel élément d'ancêtre sélectionné en fonction de tout élément de défilement avec la même portée attribuée. Cela m'a fait réfléchir ... puisque CSS Houdini nous permet d'enregistrer des propriétés héritables et respectueuses de l'animation dans CSS, nous pouvons combiner des animations sur le même élément en fonction de plusieurs zones de défilement sur la page. Cela ouvre la porte à des possibilités de conception pédagogique intéressantes, comme mon expérience ci-dessous.

Le défilement du récit horizontal sur la carte verte clairs fait pivotera la console NES 3D horizontalement, et faire défiler le récit vertical sur la carte verte foncée pivotera la console NES verticalement. Dans mon post précédent, j'ai mentionné que mes astuces CSS passées se résument toujours à la possibilité de se cacher et de montrer des possibilités limitées avec CSS. Ce que je m'intéresse à cette expérience basée sur le rouleau, c'est l'explosion combinée des rotations verticales et horizontales des combinaisons. Les délais animés fournissent une interactivité CSS pure qui était impossible dans le passé.

Les détails de l'implémentation ne sont pas aussi importants que les propriétés de l'utilisation et des personnalités de timeline-scope. Nous enregistrons deux propriétés d'angle personnalisées:

body, .progress, .cube {
  animation-timeline: scroll();
}

Ensuite, nous "empruntions" des modèles NES 3D aux exemples de l'application de modélisation CSS 3D de Julian Garner. Nous mettons à jour la classe .scene pour faire de la rotation 3D en fonction de nos nouvelles variables comme suit:

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

Ensuite, nous fournissons un élément body avec deux lunettes nommées personnalisées. scroll-scope

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

Je ne vois aucune documentation officielle sur le passage de plusieurs lunettes, mais cela fonctionne dans Google Chrome et Edge. S'il ne s'agit pas d'une fonctionnalité officiellement prise en charge, j'espère que cela fera partie de la norme car il est très pratique.

Ensuite, nous définissons la chronologie nommée pour les deux cartes de défilement et l'axe que nous voulons déclencher l'animation.

body {
  scroll-scope: --myScroller,--myScroller2; 
}

et ajoutez l'animation à la scène:

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

Étant donné que le modèle 3D hérite des angles x et y du corps du document, la carte de défilement tourne désormais le modèle dans une combinaison de changements d'angle vertical et horizontal.

Animation de contrôle de l'utilisateur au-delà de la barre de scroll

y penser attentivement, ce comportement n'est pas seulement utile pour les animations axées sur le défilement. Dans l'expérience ci-dessus, nous utilisons davantage la zone de défilement comme curseur pour contrôler les propriétés du modèle 3D. Après avoir terminé mon travail, je suis sorti pour une promenade et j'ai fantasmé à quel point ce serait cool si l'entrée réelle de la plage pouvait contrôler la chronologie de l'animation. Ensuite, j'ai trouvé qu'ils le pouvaient! Au moins dans Chrome. CMS CSS pur?

Bien que nous ayons réquisitionné le modèle 3D de Julian Garner, voyons si nous pouvons utiliser l'entrée de plage pour contrôler son modèle X-Wing.

incroyable que nous puissions le faire en utilisant simplement CSS, et nous pouvons le faire avec n'importe quel nombre de propriétés. Pour moi, ce n'est pas suffisant. Je voudrais voir d'autres contrôles d'entrée qui peuvent manipuler la chronologie de l'animation. Imaginez que le champ de texte pousse l'animation lorsque vous le remplissez, ou que le bouton peut lire ou inverser l'animation. Ce dernier peut être mis en œuvre dans une certaine mesure en combinant le

pseudo-classe avec les attributs :active. Mais d'après mon expérience, le navigateur peut être confus lorsque vous essayez de l'utiliser pour animer plusieurs propriétés personnalisées. En revanche, le calendrier d'animation a été conçu avec ce cas d'utilisation à l'esprit, donc il a fonctionné en douceur et exactement ce à quoi je m'attendais. animation-play-state

Je ne suis pas le seul à avoir remarqué le potentiel de cette fonction CSS émergente. Quelqu'un a implémenté ce clone de Doom intelligent en combinant scroll-timeline et des astuces à cocher. Mon problème est que cela ne suffit pas. Nous avons suffisamment de ressources dans Chrome pour implémenter le constructeur Avatar à l'aide de barres de défilement et d'entrées de plage comme commandes de jeu. Je suis heureux d'essayer une expérience imprévisible et complexe qui a été sans précédent à l'époque avant l'apparition des fonctionnalités scroll-timeline. Après tout, si vous devez expliquer la définition des jeux vidéo aux extraterrestres, ne diriez-vous pas que c'est juste une animation super interactive?

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!