Web-slinger.css: à travers le versement

Mon article précédent a mis en évidence les conséquences irréversibles du glissement horizontal sur Tinder. Je vais me plonger dans cette frustration une autre fois, mais à première vue, la navigation à balayage semble parfaite pour Web-Slinger.css - mon alternative CSS expérimentale et pure à wow.js pour les animations déclenchées par défilement à sens unique. (Toujours travailler sur la chanson thème!)

Le web-slinger.css peut-il gérer une interaction de glissement de style Tinder pour les éléments de plaisir / de déteste en utilisant uniquement CSS? Et plus important encore, cela justifiera-t-il l'utilisation d'une image d'araignée, selon la demande populaire? Présentation du glissement de spider-pig - mon remplacement du Captcha proposé (parce que qui n'ait pas LOVE SPIDER-PIG?). Faites glisser à gauche ou à droite en dessous (chrome / bord uniquement, pour l'instant) pour enregistrer votre avis.

élargir les horizons

web-slinger.css, apparemment, n'a pas été conçu pour le défilement horizontal. Le correctif? Un simple CSS remplace:

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

Cela modifie le comportement par défaut de Web-Slinger pour les éléments avec scroll-trigger-n des classes, ce qui fait que les déclencheurs de défilement réagissent aux défilements horizontaux, pas verticaux. Sinon, les déclencheurs s'activeraient immédiatement, bien qu'ils soient visuellement cachés en raison de la largeur du conteneur, car ils seraient au-dessus du pli vertical de notre glissement.

Mes étapes initiales concernaient la suppression de l'excellente démonstration de swipe de Tinder JavaScript de Nikolay Talanov, la suppression du javascript et de toutes les cartes sauf une, puis d'importation de web-slinger.css et d'application du correctif horizontal. Le conteneur de cartes est devenu position: fixed, avec trois boîtes côte à côte, de la taille de la fenêtre et de snapping. La diapositive moyenne a utilisé scroll-align: center, en démarrant l'utilisateur au centre et en permettant à un défilement vers l'arrière / avant.

Remarque: Avec des animations non conventionnelles pilotées par défilement, l'élément défilable n'a pas besoin de faire défiler quoi que ce soit de visible. C'est comme les hacks à cocher - masquer la case à cocher, styliser l'étiquette. Nous tirons parti des comportements CSS de l'élément de défilement, pas son ui par défaut.

a scroll-trigger-1 div sur la troisième diapositive a activé une animation de rejet:

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

Cela a fonctionné! (Narrateur: ce n'est pas vraiment. Plus à ce sujet plus tard.)

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

L'ajout de cela a entraîné le spider-pig étant automatiquement "aimé" sur le chargement de la page. Parfait pour quelqu'un universellement adoré ... (Ahem, un pirate CSS d'âge moyen). Mais Spider-Pig n'est pas universellement aimé, alors examinons pourquoi le swipe droit s'est comporté différemment que prévu, malgré des principes apparemment identiques.

reculer

Ce bogue a mis en évidence les limitations de view-timeline. Web-Slinger s'appuie sur la technologie qui n'est pas idéalement adaptée aux animations déclenchées uniquement par en arrière défilement.

Un visualiseur montre que, quelle que soit animation-range, l'animation se termine après que l'élément ait quitté la fenêtre dans la direction de défilement - l'opposé de nos besoins.

Heureusement, Bramus (Chrome Dev Team) a une démo pour détecter la direction de défilement dans CSS. En utilisant sa propriété intelligente --scroll-direction personnalisée, nous pouvons contrôler l'apparence de l'élément scroll-trigger-2 avec une requête de style:

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
}

Cela garantit que .scroll-trigger-2 n'apparaît que lorsque la diapositive précédente, atteint par défilement vers l'arrière. --slide-index (contrôlé par une animation de trois secondes en trois étapes) compte la diapositive actuelle, nécessitant un coup décisif pour déclencher l'incréation.

le coup final

Pour suivre les opinions Spider-Pig, j'ai utilisé une image de compteur tierces comme arrière-plan:

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

leçons apprises

C'était plus complexe que prévu, principalement en raison des défis de l'utilisation d'animations déclenchées par défilement qui ne fonctionnent que sur le défilement vers l'arrière. C'est une connaissance précieuse. La puissance cachée dans la spécification actuelle est incroyable; Nous pouvons style basés sur des comportements de défilement très spécifiques. Cependant, nous avons dû pirater l'API pour accéder à cette puissance. Une solution idéale serait:

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

Avec une telle API, le swiper d'araignée ne nécessiterait pas de hacks.

J'espère que pour un support de navigateur plus large pour les animations axées sur le défilement et une spécification plus flexible pour encourager les concepteurs à intégrer une narration non linéaire dans leurs expériences. Sinon, une fois que les délais d'animation sont plus largement pris en charge, il est peut-être temps de rendre le web-slinger.css plus robuste et prêt pour la production.

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!