Webslinger.css: wie wow.js, aber mit CSS-y Scroll-Animationen

In diesem Artikel wird Scroll -Animationen untersucht, wobei sich speziell auf "Scroll -Auslösen" konzentriert - eine Technik, bei der Animationen aktiviert werden, sobald ein Benutzer einen bestimmten Punkt überschreitet. Während wir derzeit native CSS-Unterstützung fehlen, können wir diesen Effekt mit cleveren CSS-Techniken erzielen und eine CSS-Alternative zu JavaScript-Bibliotheken wie Wow.js. erstellen. Dieser Ansatz verwendet die Eigenschaften, benutzerdefinierte Eigenschaften und Stilabfragen. animation-timeline

Vorhandene Scroll-Animationslösungen kehren häufig Animationen um, wenn sie nach oben scrollen, im Gegensatz zu dem gewünschten "One-and-done" -Verhalten in wow.js. Diese Einschränkung inspirierte die Erstellung von "webslinger.css", einer reinen CSS-Bibliothek, die die WOW.js-Funktionalität nachahmt.

webslinger.css: Eine CSS-Scroll-Animationsbibliothek

webslinger.css verwendet Klassen wie

und .scroll-trigger-n zusammen mit benutzerdefinierten Eigenschaften (.on-scroll-trigger-n), um Animationen zu verwalten. Dieser Ansatz entkoppelt Animationstruationen aus den animierten Elementen und liefert Flexibilität. --scroll-trigger-n

Ein einfaches Beispiel verwendet

, um die "Flipiny" -Animation von Animate.css auszulösen. Komplexere Beispiele wie der "Cownter" in der Demo zeigen, dass mehrere Animationen aus einem einzelnen Scroll -Punkt ausgelöst werden. .scroll-trigger-8

Das Markup des Cownter ist unkompliziert:

<div>
  <h2></h2>
  <div>
    <br><br><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b">? Play again</a>
  </div>
</div>

und sein CSS nutzt Stilabfragen für dynamische Inhaltsaktualisierungen:

.header {
  .cownter::after {
    --cownter: calc(var(--scroll-trigger-2) + var(--scroll-trigger-4) + var(--scroll-trigger-8) + var(--scroll-trigger-11));
    --pluralised-cow: 'cows';
    counter-set: cownter var(--cownter);
    content: "Have " counter(cownter) " " var(--pluralised-cow) ", man";
  }

  @container style(--scroll-trigger-2: 1) and style(--scroll-trigger-4: 0) {
    .cownter::after {
      --pluralised-cow: 'cow';
    }
  }

  a {
    text-decoration: none;
    color: blue;
  }
}

:root:has(.reset:active) * {
  animation-name: none;
}

Die Demo verwendet webslinger.css als externe Ressource.

Web-Slinger.CSS-Implementierungsdetails

Das Kernkonzept beinhaltet die Verwendung von

als Animationszeitleiste, um ein dauerhaft festes Element zu erstellen. Style -Abfragen und benutzerdefinierte Eigenschaften steuern dann andere Animationen basierend auf der Sichtbarkeit dieses festen Elements. view()

Diese Technik vermeidet direkt animierende benutzerfreundliche Elemente und verwendet stattdessen das feste Element als Trigger. Benannte Ansicht Progress Timelines (

) Verknüpfen Sie das feste Element mit den zu animierten Elementen. timeline-scope

CSS -Code

anzeigen

/** Each trigger element toggles `--scroll-trigger-n` from 0 to 1, unpausing animations on `.on-scroll-trigger-n` **/
:root {
  animation-name: run-scroll-trigger-1, run-scroll-trigger-2 /*etc*/;
  animation-duration: 1ms;
  animation-fill-mode: forwards;
  animation-timeline: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
  timeline-scope: --trigger-timeline-1, --trigger-timeline-2 /*etc*/;
}

@property --scroll-trigger-1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: true;
}
@keyframes run-scroll-trigger-1 {
  to { --scroll-trigger-1: 1; }
}

/** Animate elements only when `.scroll-trigger-1` is in view **/
.on-scroll-trigger-1 { animation-play-state: paused; }
@container style(--scroll-trigger-1: 1) { .on-scroll-trigger-1 { animation-play-state: running; } }

/** Trigger element, fixed to top, activating animations **/
.scroll-trigger-1 { view-timeline-name: --trigger-timeline-1; }</integer>

Einschränkungen und zukünftige Verbesserungen

webslinger.css, obwohl sie funktionsfähig ist, erzeugt zwar größere CSS-Dateien mit mehr Triggern. Die nummerierten Klassennamen fehlen semantische Klarheit. Im Idealfall würde der native Browserunterstützung das Verknüpfung von Triggern und Zielen mit IDs ermöglichen, ähnlich wie ein hypothetisches

Attribut. scrolltrigger

Die Zukunft der von Scrollen ausgelösten Animationen liegt in der Unterstützung des nativen Browsers. Ein deklarativer Ansatz ähnlich wie webslinger.css könnte für die Standardisierung übernommen werden.

Das obige ist der detaillierte Inhalt vonWebslinger.css: wie wow.js, aber mit CSS-y Scroll-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!