Web-linger.css: Seperti wow.js tetapi dengan animasi tatal CSS-y

Artikel ini meneroka animasi tatal, khususnya memberi tumpuan kepada "tatal yang mencetuskan" -a teknik di mana animasi mengaktifkan sekali pengguna skrol melewati titik tertentu. Walaupun kini tidak mempunyai sokongan CSS asli, kami dapat mencapai kesan ini menggunakan teknik CSS yang bijak, mewujudkan alternatif CSS sahaja untuk perpustakaan JavaScript seperti wow.js. Pendekatan ini menggunakan harta

, sifat tersuai, dan pertanyaan gaya. animation-timeline

Penyelesaian animasi tatal yang sedia ada sering membalikkan animasi ketika menatal ke atas, tidak seperti tingkah laku "satu-dan-dilakukan" yang diingini yang dilihat di wow.js. Batasan ini mengilhami penciptaan "Web-Slinger.css," perpustakaan CSS tulen meniru fungsi wow.js.

web-slinger.css: Perpustakaan animasi tatal CSS sahaja

web-slinger.css menggunakan kelas seperti

dan .scroll-trigger-n, bersama-sama dengan sifat tersuai (.on-scroll-trigger-n), untuk menguruskan animasi. Pendekatan ini menghancurkan animasi mencetuskan dari elemen animasi, memberikan fleksibiliti. --scroll-trigger-n

Contoh mudah menggunakan

untuk mencetuskan animasi "flipiny" dari animate.css. Contoh yang lebih kompleks, seperti "cownter" dalam demo, menunjukkan mencetuskan pelbagai animasi dari titik tatal tunggal. .scroll-trigger-8

markup cownter adalah mudah:

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

dan CSS memanfaatkan pertanyaan gaya untuk kemas kini kandungan dinamik:

.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;
}

Demo menggunakan web-slinger.css sebagai sumber luaran.

Butiran pelaksanaan web-slinger.css

Konsep teras melibatkan penggunaan

sebagai garis masa animasi untuk mencipta elemen tetap tetap. Pertanyaan gaya dan sifat tersuai kemudian mengawal animasi lain berdasarkan penglihatan elemen tetap ini. view()

Teknik ini menghindari secara langsung menghidupkan elemen-elemen yang kelihatan pengguna, sebaliknya menggunakan elemen tetap sebagai pencetus. Dinamakan Paparan Masa Kemajuan () menghubungkan elemen tetap ke unsur -unsur yang akan dianimasi.

timeline-scope

Lihat kod CSS

/** 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>

Batasan dan Penambahbaikan Masa Depan

Web-slinger.css, sementara berfungsi, menghasilkan fail CSS yang lebih besar dengan lebih banyak pencetus. Nama kelas bernombor tidak mempunyai kejelasan semantik. Sebaik -baiknya, sokongan penyemak imbas asli akan membolehkan menghubungkan pencetus dan sasaran menggunakan ID, sama dengan atribut hipotesis.

Masa depan animasi yang dicetuskan tatal terletak pada sokongan penyemak imbas asli. Pendekatan deklaratif yang serupa dengan web-slinger.css boleh digunakan untuk penyeragaman.

Atas ialah kandungan terperinci Web-linger.css: Seperti wow.js tetapi dengan animasi tatal CSS-y. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!