Web-Slinger.css: Di Seluruh Swiper-Verse – Beragampengetahuan

Artikel saya sebelumnya memperingatkan bahwa gerakan horizontal di Tinder dapat menimbulkan konsekuensi yang tidak dapat diubah. Saya akan membahas topik ini di blog lain, namun pada pandangan pertama sepertinya navigasi berbasis gesekan mungkin merupakan tugas Web-Slinger.css, animasi CSS Wow.js murni eksperimental milik tetangga Anda yang dipicu dengan menggulir ke alternatif . Saya belum berhasil memasukkan deskripsi ini ke dalam lagu tema, tapi saya sedang mengerjakannya.

Sementara itu, dapatkah Web-Slinger.css digunakan untuk menunjukkan suka atau tidak suka suatu elemen melalui interaksi gesek gaya CSS Tinder murni? Yang lebih penting lagi, apakah eksperimen ini memberi saya alasan untuk menggunakan gambar babi laba-laba sebagai respons terhadap permintaan populer di bagian komentar yang ramai pada postingan terakhir saya? Coba lihat SpiderPig Swiper, saya merekomendasikannya sebagai pengganti captcha karena semua orang yang punya pulsa menyukai SpiderPig. Dengan mengingat pernyataan wajar tersebut, geser ke kiri atau kanan di bawah (saat ini hanya Chrome dan Edge) untuk menampilkan penghitung yang menunjukkan berapa banyak orang yang memiliki pendapat yang sama dengan Anda tentang Spider Pig.

Perluas wawasan Anda

Orang gila yang menemukan Web-Slinger.css tampaknya tidak mempertimbangkan pengguliran horizontal, tetapi kita dapat menambal kreasi mengerikan orang gila ini seperti ini:

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

Ini mengesampingkan perilaku default elemen markup dengan nama kelas menggunakan konvensi Web-Slinger scroll-trigger-nyang mengaktifkan animasi yang dipicu oleh pengguliran satu arah. Dengan mengatur timeline menjadi xpemicu gulir hanya berjalan ketika ditampilkan melalui pengguliran horizontal, bukan pengguliran vertikal (secara default). Jika tidak, pemicu akan langsung berjalan karena meskipun tidak terlihat karena lebar wadahnya, saat kita menerapkan penggeser, semuanya akan berada secara vertikal di paro atas.

Langkah-langkah yang saya ambil untuk meletakkan dasar demo di atas adalah dengan membuat demo JavaScript menggesek Tinder-esque yang mengagumkan ini oleh Nikolay Talanov, menghapus JavaScript dan semua kecuali satu kartu, lalu mengimpor Web-Slinger.css dan memperkenalkan tambalan horizontal yang dijelaskan di atas . Selanjutnya, saya mengubah wadah kartu menjadi position: fixeddan memperkenalkan tiga kotak pengambilan gulir berdampingan, masing-masing dengan tinggi dan lebar area pandang. Saya mengatur slide tengah menjadi scroll-align: center Sehingga pengguna memulai di tengah halaman dan memiliki opsi untuk menggulir ke belakang atau ke depan.

Catatan tambahan: Saat menggunakan animasi yang digerakkan oleh gulir seperti ini secara tidak biasa, pola pikir yang baik adalah bahwa elemen yang dapat digulir tidak harus bertanggung jawab atas apa pun yang akan terlihat pada halaman yang biasanya digulir. Pendekatan ini mengingatkan kita pada bagaimana hal pertama yang Anda lakukan saat menggunakan peretasan kotak centang adalah menyembunyikan kotak centang dan membuat label terlihat seperti sesuatu yang lain. Kami memanfaatkan perilaku elemen yang dapat digulir berbasis CSS, tetapi tidak memerlukan perilaku UI default.

Saya menaruh satu div ditandai dengan scroll-trigger-1 pada slide ketiga dan gunakan untuk mengaktifkan animasi penolakan pada kartu seperti ini:

<div class="demo__card on-scroll-trigger-1 reject">
  <!-- HTML for the card -->
</div>

<main>
  <div class="slide">
  </div>
  <div id="middle" class="slide">
  </div>
  <div class="slide">
      <div class="scroll-trigger-1"></div>
  </div>
</main>

Ini berhasil seperti yang saya harapkan! Saya tahu itu mudah! (Narator: Tidak, selanjutnya Anda akan memahami alasannya.)

<div class="on-scroll-trigger-2 accept">
  <div class="demo__card on-scroll-trigger-2 reject">
  <!-- HTML for the card -->
  </div>
</div>

<main>
  <div class="slide">
      <div class="scroll-trigger-2"></div>
  </div>
  <div id="middle" class="slide">
  </div>
  <div class="slide">
      <div class="scroll-trigger-1"></div>
  </div>
</main>

Setelah menambahkan konten ini, SpiderPig akan otomatis “menyukainya” saat halaman dimuat. Cocok untuk kartu yang menampilkan seseorang seperti saya yang otomatis disukai semua orang – lagipula, pria paruh baya yang meretas CSS siang dan malam cukup menarik. Sebaliknya, Spider Pig mungkin tidak cocok untuk semua orang. Jadi, mari kita pahami mengapa implementasi gesek ke kanan berperilaku berbeda dibandingkan implementasi gesek ke kiri ketika kita menganggap bahwa prinsip yang sama berlaku untuk kedua implementasi.

mundur selangkah

Apa yang diajarkan kesalahan ini kepada saya? view-timeline Apa yang boleh dan tidak boleh dilakukan. Pembuat Web-Slinger.css yang gila mengandalkan teknologi yang tidak dirancang untuk animasi yang hanya berjalan saat pengguna menggulir ke belakang.

Visualisator menunjukkan bahwa apa pun opsi yang Anda pilih animation-rangeisi ingin menyelesaikan animasinya setelah arah gulir melintasi area pandang – itulah yang kami lakukan TIDAK Semoga itu terjadi dalam kasus khusus ini.

Untungnya, komunitas ramah Bramus dari tim pengembangan Chrome memiliki demo keren yang menunjukkan cara mendeteksi arah gulir di CSS. Gunakan dengan cerdik --scroll-direction Dengan properti kustom CSS yang dibuat oleh Bramus, kami dapat memastikan bahwa Spider Pig bernyawa pada waktu yang tepat dan tidak sedang dimuat. Caranya adalah dengan mengontrol penampilan .scroll-trigger-2 Gunakan kueri seperti ini:

:root {
  animation: adjust-slide-index 3s steps(3, end), adjust-pos 1s;
  animation-timeline: scroll(root x);
}
@property --slide-index {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@keyframes adjust-slide-index {
  to {
    --slide-index: 3;
  }
}

.scroll-trigger-2  {
  display: none;
}

@container style(--scroll-direction: -1) and style(--slide-index: 0) {
  .scroll-trigger-2 {
    display: block;
  }
}

Kueri gaya ini berarti dengan .scroll-trigger-2 Kelas tidak akan dirender sampai kita melihat slide sebelumnya Dan Gulir mundur untuk mencapainya. Perhatikan bahwa kami juga memperkenalkan satu lagi yang disebut --slide-indexdikontrol oleh animasi berbasis gulir berdurasi tiga detik, dalam tiga langkah. Ini menghitung slide mana yang kita gunakan, dan menggunakannya karena kita ingin pengguna menggesek dengan tegas untuk mengaktifkan animasi yang tidak disukai. Kami tidak ingin angin sepoi-sepoi pun memicu rasa tidak suka.

Ketika geser selesai, akan muncul lagi (Saya Superman)

Seperti disebutkan di awal, penting untuk mengukur berapa banyak pembaca beragampengetahuan yang tidak menyukai SpiderPig versus berapa banyak yang memiliki jiwa. Untuk menangkap statistik penting ini, saya menggunakan gambar penghitung pihak ketiga sebagai latar belakang kartu di bawah kartu Spider-Pig. Ini pihak ketiga, tapi mudah-mudahan ini akan berfungsi selamanya karena situs ini sepertinya sudah ada sejak awal mula internet. Saya tidak boleh mengeluh karena harganya tepat. Saya memilih penghitung yang paling tidak terlihat tahun 90an dan menggunakannya seperti ini:

@container style(--scroll-trigger-1: 1) {
  .result {
    background-image: url('
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  }

  .counter-description::after {
    content: 'who like spider pig';
  }

  .scroll-trigger-2 {
    display: none;
  }
}

@container style(--scroll-trigger-2: 1) {
  .result {
    background-image: url('
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
  }

  .counter-description::after {
    content: 'who dislike spider pig';
  }

  .scroll-trigger-1 {
    display: none;
  }
}

Gulungan Kebijaksanaan: Pelajaran yang Dipetik

Peretasan ini lebih rumit dari yang saya perkirakan, terutama karena kerumitan penggunaan gulir untuk memicu animasi yang hanya berjalan saat Anda menemukan elemen dengan menggulir ke belakang, yang bertentangan dengan asumsi yang dibuat oleh API saat ini. Merupakan hal yang baik untuk diketahui dan dipahami. Namun, fitur-fitur yang tersembunyi dalam spesifikasi saat ini cukup mengejutkan. Jika kita memercayai diri kita sendiri, kita dapat menata gaya berdasarkan perilaku pengguliran yang sangat spesifik. API saat ini harus diretas untuk membuka fungsi ini, tapi saya berharap kita dapat melakukan sesuatu seperti:

[class^="scroll-trigger-"] {
  view-timeline-axis: x;
  view-timeline-direction: backwards; /* <-- this is speculative. do not use! */
}

Dengan API seperti ini yang memungkinkan pemicu gulir geser ke kanan berperilaku seperti yang saya bayangkan, penggeser Spider Pig tidak perlu diretas.

Saya memimpikan dukungan browser yang lebih luas untuk animasi yang digerakkan oleh gulir. Namun saya ingin melihat spesifikasi berevolusi untuk memberi kita lebih banyak fleksibilitas dan mendorong desainer untuk memasukkan cerita non-linear ke dalam pengalaman yang mereka buat. Jika tidak, setelah garis waktu animasi muncul di lebih banyak browser, mungkin ini saatnya membuat Web-Slinger.css lebih lengkap dan siap produksi agar kasus penggunaan pengguliran lebih lanjut dapat diakses oleh pengguna CSS biasa.

Web-Slinger.css: Across the Swiper-Verse awalnya diterbitkan di beragampengetahuan, bagian dari keluarga DigitalOcean. Anda harus menerima buletin.