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="http://miracleart.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!