Artikel saya sebelumnya memperingatkan bahwa gerakan horizontal di Tinder memiliki konsekuensi yang tidak dapat diubah. Saya akan menyimpan ventilasi tentang topik ini untuk blog lain, tetapi pada pandangan pertama, sepertinya navigasi berbasis gesekan mungkin merupakan fungsi dari Web-Slinger.css, alternatif CSS Wow.js yang ramah lingkungan dan murni eksperimental untuk satu- animasi yang dipicu dengan cara menggesek. Saya belum bisa memasukkan deskripsi ini ke dalam lagu tema, tapi saya sedang mengusahakannya.
Sementara itu, dapatkah Web-Slinger.css mengayunkan reaksi gesek gaya CSS Tinder murni untuk menunjukkan suka atau tidak suka suatu item? Lebih penting lagi, akankah pengalaman ini memberi saya alasan untuk menggunakan gambar Spider Pig, sebagai tanggapan atas permintaan populer di bagian komentar mengomel di artikel saya sebelumnya? Lihat saja Spider Pig wiper yang saya sarankan sebagai alternatif kode verifikasi karena setiap manusia yang punya pulsa menyukai Spider Pig. Dengan mengingat pernyataan yang tidak memihak ini, geser ke kiri atau kanan ke 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.
-Advertisement-.
Perluas wawasan Anda
Tampaknya maniak yang menemukan Web-Slinger.css tidak berpikir tentang pengguliran horizontal, tetapi kita dapat memperbaiki ciptaan mengerikan maniak ini sebagai berikut:
[class^="scroll-trigger-"] {
view-timeline-axis: x;
}Ini mengesampingkan perilaku default elemen tag dengan nama kelas menggunakan konvensi Web-Slinger scroll-trigger-nyang mengaktifkan animasi yang dipicu gulir satu arah. Dengan mengatur sumbu garis waktu menjadi xpemicu gesek hanya aktif ketika terdeteksi dengan menggesek secara horizontal dan bukan vertikal (yang merupakan default). Jika tidak, trigger akan langsung diaktifkan karena meskipun tidak terlihat karena lebar wadahnya, trigger tersebut akan berada di paro atas secara vertikal saat kita menjalankan alat penghapus.
Langkah-langkah saya dalam meletakkan dasar untuk demo di atas adalah membuat demo JavaScript yang bagus untuk gesekan gaya Tinder oleh Nikolai Talanov, menghapus JavaScript dan semua kecuali satu kartu, lalu mengimpor Web-Slinger.css dan memasukkan tambalan horizontal yang dijelaskan di atas. Selanjutnya, saya mengubah wadah kartu menjadi position: fixeddan menyediakan tiga kotak pengambilan untuk pengguliran berdampingan, masing-masing dengan tinggi dan lebar area pandang. Anda telah menyetel slide tengah menjadi scroll-align: center Jadi pengguna memulai di tengah halaman dan memiliki opsi untuk menggulir ke belakang atau ke depan.
Catatan tambahan: Saat menggunakan animasi pengguliran non-tradisional seperti ini, pola pikir yang baik adalah bahwa elemen yang dapat digulir tidak perlu bertanggung jawab atas pengguliran tradisional apa pun yang terlihat di laman. 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. Kita mendapat manfaat dari perilaku berbasis CSS pada elemen yang dapat digulir, namun kita tidak memerlukan perilaku UI default.
saya menaruh a 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 ini akan mudah! (Narator: Tidak demikian. Anda akan mengetahui alasannya selanjutnya.)
<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 ini, Spider Pig secara otomatis “disukai” saat halaman dimuat. Ini akan cocok untuk kartu yang menunjukkan seseorang seperti saya yang otomatis disukai semua orang – lagipula, pria paruh baya yang menghabiskan siang dan malamnya meretas CSS itu keren. Sebaliknya, Spider Pig mungkin tidak disukai semua orang. Jadi, mari kita pahami mengapa implementasi gesek ke kanan berperilaku berbeda dari implementasi gesek ke kiri ketika kita mengira kita menerapkan prinsip yang sama pada kedua aplikasi.
Ambil langkah mundur
Kesalahan ini mengantarku pulang view-timeline Dia melakukannya dan dia tidak melakukannya. Pencipta gila Web-Slinger.css mengandalkan teknologi yang tidak dirancang untuk animasi yang hanya diputar saat pengguna menggulir <>kembali.
Visualisator ini menunjukkan apa pun pilihan yang Anda pilih animation-rangesubjek ingin menyelesaikan animasinya setelah melintasi area pandang dalam arah gulir – dan itulah yang kami lakukan <>TIDAK ingin terjadi dalam kasus khusus ini.
Untungnya, lingkungan kami yang ramah, Bramus, dari tim pengembang Chrome memiliki demo hebat yang menunjukkan cara mendeteksi arah gulir di CSS. Menggunakan pintar --scroll-direction Properti CSS khusus yang dibuat oleh Bramus, kami dapat memastikan bahwa Spider Pig dianimasikan pada waktu yang tepat, bukan saat memuat. Caranya adalah dengan mengontrol penampilan .scroll-trigger-2 Menggunakan kueri gaya 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 tag tersebut memiliki .scroll-trigger-2 Kelas tidak akan ditampilkan sampai kita sampai ke slide sebelumnya Dan Akses dengan menggeser ke belakang. Perhatikan bahwa kami juga telah memperkenalkan variabel lain bernama --slide-indexyang dikendalikan oleh animasi tiga detik dengan tiga langkah. Ini menghitung di slide mana kita berada, dan ini digunakan karena kita ingin pengguna menggesek secara kritis untuk mengaktifkan animasi, yang saya tidak suka. Kami tidak ingin ada angin sepoi-sepoi pun yang dapat membangkitkan kebencian.
Ketika proses pengguliran selesai, beri tag lain seperti (Saya manusia super)
Seperti yang kami sebutkan di awal, penting untuk mengukur jumlah pembaca Trik CSS yang tidak menyukai Spider Pig versus jumlah orang 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 semoga selalu berhasil karena situs ini sepertinya sudah ada sejak awal mula internet. Saya tidak boleh mengeluh karena harganya tepat. Saya memilih penghitung yang terlihat kurang 90an dan menggunakannya seperti ini:
@container style(--scroll-trigger-1: 1) {
.result {
background-image: url('https://counter6.optistats.ovh/private/freecounterstat.php?c=qbgw71kxx1stgsf5shmwrb2aflk5wecz');
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('https://counter6.optistats.ovh/private/freecounterstat.php?c=abtwsn99snah6wq42nhnsmbp6pxbrwtj');
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 ternyata lebih rumit dari yang saya perkirakan, sebagian besar karena kerumitan penggunaan animasi yang dipicu gulir yang hanya berfungsi saat Anda menemukan elemen dengan menggeser ke belakang yang bertentangan dengan asumsi yang dibuat oleh API yang ada. Ini adalah hal yang baik untuk diketahui dan dipahami. Namun, sungguh mengejutkan betapa besarnya tenaga yang disembunyikan dalam spesifikasi saat ini. Kita dapat merancang sesuatu berdasarkan perilaku passing yang sangat spesifik jika kita percaya pada diri kita sendiri. API yang ada harus diretas untuk membuka kekuatan ini, tapi saya berharap kita bisa melakukan sesuatu seperti:
[class^="scroll-trigger-"] {
view-timeline-axis: x;
view-timeline-direction: backwards; /* <-- this is speculative. do not use! */
}Dengan API yang memungkinkan pemain geser ke kanan berperilaku seperti yang Anda bayangkan, penggesek Spider Pig tidak memerlukan peretasan.
Saya memimpikan dukungan browser yang lebih luas untuk animasi berbasis gulir. Namun saya berharap spesifikasi ini berkembang sehingga memberi kita lebih banyak fleksibilitas guna mendorong para desainer untuk membangun penceritaan non-linier ke dalam pengalaman yang mereka ciptakan. Jika belum, setelah garis waktu animasi menjangkau lebih banyak browser, mungkin ini saatnya membuat Web-Slinger.css lebih lengkap dan siap produksi, agar kasus penggunaan pengguliran yang lebih canggih dapat diakses oleh rata-rata pengguna CSS.
Web-Slinger.css: Across the Swiper-Verse awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
