Webslinger.css: über den Swiper-Vers

Mein vorheriger Beitrag hob die irreversiblen Folgen des horizontalen Wischens auf Tinder hervor. Ich werde ein anderes Mal mit dieser Frustration eingehen, aber auf den ersten Blick scheint die Swipe-Navigation perfekt für Web-Slinger.css-meine experimentelle, reine CSS-Alternative zu WoW.js für Einweg-Scroll-ausgelöste Animationen. (Arbeitet immer noch am Titelsong!)

Kann webslinger.css mit einer Tinder-Swipe-Interaktion umgehen, um Elemente mit nur CSS zu mögen/abzunehmen? Und was noch wichtiger ist, wird dies die Verwendung eines Spider-Pig-Images gemäß der beliebten Nachfrage rechtfertigen? Einführung des Spider-Pig-Swiper-Mein vorgeschlagener Captcha-Ersatz (denn wer liebt nicht spider-pig?). Wischen Sie nach links oder rechts unten (nur Chrome/Edge), um Ihre Meinung zu registrieren.

Erweiterung des Horizons

webslinger.css wurde anscheinend nicht für horizontales Scrollen konzipiert. Das Fix? Ein einfaches CSS -Überschreiben:

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

Dies verändert das Standardverhalten von Web-Slinger für Elemente mit scroll-trigger-n Klassen und sorgt für horizontale, nicht vertikale Scrolling. Andernfalls würden Trigger sofort aktivieren, obwohl sie aufgrund der Behälterbreite visuell versteckt sind, da sie über der vertikalen Faltung in unserem Swiper stehen würden.

Meine ersten Schritte bestand darin, Nikolay Talanovs ausgezeichnete JavaScript-Tinder-Swipe-Demo, das Entfernen des JavaScript und alle bis auf eine Karte, dann Webslinger.css zu entfernen und den horizontalen Patch anzuwenden. Der Kartenbehälter wurde position: fixed mit drei Side-by-Side-Ansichtsfenster-Scroll-Snapping-Boxen. Die mittlere Folie verwendet scroll-align: center, starten Sie den Benutzer in der Mitte und ermöglichen die Rückwärts-/Vorwärts -Scrollen.

Hinweis: Mit unkonventionellen scrollengetriebenen Animationen muss das scrollbare Element nichts sichtbares scrollen. Es ist wie Checkbox -Hacks - das Kontrollkästchen ausblenden, das Etikett stylen. Wir nutzen das CSS -Verhalten des Bildlaufelements, nicht die Standard -Benutzeroberfläche.

a scroll-trigger-1 div auf der dritten Folie aktivierte eine Ablehnungsanimation:

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

Es hat funktioniert! (Erzähler: Es war nicht wirklich nicht.

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

Hinzufügen Dies führte dazu, dass Spider-Pig beim Laden automatisch "gemocht" wurde. Perfekt für jemanden, der allgemein verehrt ist ... (ähm, ein CSS-Hacker mittleren Alters). Aber Spider-Pig ist nicht allgemein geliebt, also lassen Sie uns untersuchen, warum sich der Rechts-Swipe trotz scheinbar identischer Prinzipien anders verhalten hat als erwartet.

zurücktret

Dieser Fehler hat die Grenzen von

hervorgehoben. Web-Slinger ist auf Technologie angewiesen, die nicht ideal für Animationen geeignet sind, die nur durch view-timeline rückwärts scrollen werden.

Ein Visualizer zeigt, dass die Animation unabhängig von animation-range abgeschlossen ist, nachdem das Element das Ansichtsfenster in die Bildlaufrichtung verlässt - das Gegenteil unserer Bedürfnisse.

Glücklicherweise hat Bramus (Chrome Dev Team) eine Demo zur Erkennung von Scroll -Richtung in CSS. Mit seiner cleveren --scroll-direction benutzerdefinierten Eigenschaft können wir das Erscheinungsbild des scroll-trigger-2 -Elements mit einer Stilabfrage steuern:

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

Dies stellt sicher, dass .scroll-trigger-2 nur dann angezeigt wird, wenn auf der vorherigen Folie, die durch rückwärts gerichtete Scrollen erreicht ist. --slide-index (gesteuert von einer dreistufigen Animation) zählt die aktuelle Folie und erfordert einen entscheidenden Schlag, um die Abneigung auszulösen.

Das letzte Swipe

Um Spider-Pig-Meinungen zu verfolgen, habe ich ein Zählerbild von Drittanbietern als Hintergrund verwendet:

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

Lektionen gelernt

Dies war komplexer als erwartet, hauptsächlich aufgrund der Herausforderungen bei der Verwendung von Scroll-ausgelösten Animationen, die nur auf rückwärts gerichteter Scrollen ausgeführt werden. Dies ist wertvolles Wissen. Die in der aktuelle Spezifikation verborgene Kraft ist erstaunlich; Wir können basierend auf sehr spezifischen Bildlaufverhalten stylen. Wir mussten jedoch die API hacken, um auf diese Kraft zuzugreifen. Eine ideale Lösung wäre:

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

Mit einer solchen API würde der Spider-Pig-Swiper keine Hacks benötigen.

Ich hoffe auf eine breitere Browser-Unterstützung für scrollgesteuerte Animationen und eine flexiblere Spezifikation, um Designer zu ermutigen, nichtlineares Geschichtenerzählen in ihre Erfahrungen aufzubauen. Wenn nicht, ist es möglicherweise Zeit, Web-Slinger.CSS robuster und produktionsfertiger zu gestalten.

Das obige ist der detaillierte Inhalt vonWebslinger.css: über den Swiper-Vers. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!