Artikel saya sebelumnya memperingatkan bahwa gerakan horizontal di Tinder memiliki konsekuensi yang tidak dapat diubah. Saya akan menyimpan ventilasi pada topik itu untuk blog lain, tapi sekilas, navigasi berbasis gesekan sepertinya bisa menjadi pekerjaan untuk Anda. Web-Slinger.cssCSS murni eksperimental lingkungan ramah Anda Wow.js pengganti animasi yang dipicu gulir satu arah. Saya belum berhasil memasukkan deskripsi itu ke dalam lagu tema, tapi saya sedang mengerjakannya.
Sementara itu, dapatkah Web-Slinger.css mengayunkan interaksi gesekan murni gaya CSS Tinder untuk menunjukkan menyukai atau tidak menyukai suatu elemen? Lebih penting lagi, apakah eksperimen ini akan memberi saya alasan untuk menggunakan gambar Babi Laba-labasebagai tanggapan atas permintaan populer di bagian komentar yang ramai di artikel saya sebelumnya? Lihatlah wiper Spider Pig, yang saya usulkan sebagai pengganti captcha karena setiap manusia yang memiliki denyut nadi menyukai Spider Pig. Dengan mengingat pernyataan yang tidak memihak 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 sepertinya tidak mempertimbangkan pengguliran horizontal, tapi kita bisa menambal kreasi mengerikan maniak itu seperti ini:
(class^="scroll-trigger-") {
view-timeline-axis: x;
}
Ini mengesampingkan perilaku default untuk elemen penanda dengan nama kelas menggunakan konvensi Web-Slinger scroll-trigger-n
yang mengaktifkan animasi satu arah yang dipicu gulir. Dengan mengatur sumbu garis waktu menjadi x
pemicu gulir hanya berjalan ketika ditampilkan dengan menggulir secara horizontal, bukan vertikal (yang merupakan default). Jika tidak, trigger akan langsung berjalan karena meskipun tidak terlihat karena lebar containernya, trigger tersebut akan berada di paro atas secara vertikal saat kita menerapkan wiper.
Langkah saya dalam meletakkan dasar demo di atas adalah fork demo JavaScript mengagumkan dari gesekan gaya Tinder oleh Nikolay Talanovhapus JavaScript dan semua kartu kecuali satu, lalu impor Web-Slinger.css dan perkenalkan patch horizontal yang dijelaskan di atas. Selanjutnya, saya mengubah wadah kartu menjadi position: fixed
dan memperkenalkan tiga gulir-gertakan kotak berdampingan, masing-masing setinggi 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 berbasis gulir seperti ini secara tidak lazim, pola pikir yang baik adalah bahwa elemen yang dapat digulir tidak perlu bertanggung jawab untuk menggulir secara konvensional 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. Kami memanfaatkan perilaku berbasis CSS dari elemen yang dapat di-scroll, namun kami tidak memerlukan perilaku UI default.
saya menaruh a div
ditandai dengan scroll-trigger-1
pada slide ketiga dan menggunakannya untuk mengaktifkan animasi penolakan pada kartu seperti ini:
Ini berhasil seperti yang saya harapkan! Saya tahu ini akan mudah! (Narator: tidak, Anda akan mengetahui alasannya selanjutnya.)
Setelah menambahkan ini, Spider Pig secara otomatis “disukai” saat halaman dimuat. Itu akan cocok untuk kartu yang menunjukkan seseorang seperti saya yang secara otomatis disukai semua orang — lagipula, pria paruh baya yang menghabiskan siang dan malamnya meretas CSS adalah hal yang cukup menarik. Sebaliknya, mungkin saja Spider Pig tidak cocok untuk semua orang. Jadi, mari kita pahami mengapa implementasi geser ke kanan akan berperilaku berbeda dari implementasi geser ke kiri ketika kita mengira kita menerapkan prinsip yang sama pada kedua implementasi.
Ambil langkah mundur
Bug ini membawa pulang kepadaku apa view-timeline
melakukan dan tidak melakukan. Pencipta Web-Slinger.css yang gila mengandalkan teknologi yang tidak dibuat untuk animasi yang hanya berjalan saat pengguna menggulir ke belakang.
Ini visualisator menunjukkan bahwa apa pun opsi yang Anda pilih animation-range
subjek ingin menyelesaikan animasinya setelah melintasi area pandang dalam arah gulir — itulah yang kami lakukan bukan ingin terjadi dalam kasus khusus ini.
Untungnya, lingkungan tinggal kami yang ramah bramus dari Tim Pengembang Chrome memiliki demo keren yang menunjukkan cara mendeteksi arah gulir di CSS. Menggunakan yang pintar --scroll-direction
Properti kustom CSS yang dibuat Bramus, kami dapat memastikan Spider Pig bernyawa pada waktu yang tepat, bukan saat dimuat. Caranya adalah dengan mengontrol tampilan .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: "";
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 itu berarti penanda dengan .scroll-trigger-2
kelas tidak akan dirender sampai kita berada pada slide sebelumnya Dan mencapainya dengan menggulir ke belakang. Perhatikan bahwa kita juga memperkenalkan variabel lain bernama --slide-index
yang dikendalikan oleh animasi berbasis gulir tiga detik dengan tiga langkah. Ini menghitung slide yang kita aktifkan, dan digunakan karena kita ingin pengguna menggesek dengan tegas untuk mengaktifkan animasi tidak suka. Kami tidak ingin angin sepoi-sepoi pun memicu rasa tidak suka.
Ketika gesekan telah selesai, satu lagi yang suka (Saya manusia super)
Seperti disebutkan di awal, penting untuk mengukur berapa banyak pembaca CSS-Tricks yang tidak menyukai Spider Pig versus berapa banyak yang memiliki jiwa. Untuk menangkap stat penting ini, saya menggunakan a gambar penghitung pihak ketiga sebagai latar belakang kartu di bawah kartu Spider Pig. Ini adalah pihak ketiga, tapi mudah-mudahan akan selalu berfungsi karena situs webnya sepertinya bertahan sejak awal mula internet. Saya tidak boleh mengeluh karena harganya tepat. Saya memilih penghitung yang paling tidak terlihat tahun 1990-an 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 didapat
Peretasan ini ternyata lebih kompleks dari yang saya perkirakan, sebagian besar karena kerumitan penggunaan animasi yang dipicu gulir yang hanya berjalan saat Anda menemukan elemen dengan menggulir ke belakang yang bertentangan dengan asumsi yang dibuat oleh API saat ini. Itu adalah hal yang baik untuk diketahui dan dipahami. Namun, sungguh menakjubkan betapa banyak kekuatan yang tersembunyi dalam spesifikasi saat ini. Kita dapat menata berbagai hal berdasarkan perilaku pengguliran yang sangat spesifik jika kita percaya pada diri kita sendiri. API saat ini harus diretas untuk membuka kekuatan itu, 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 seperti itu yang memungkinkan pemicu gulir geser ke kanan berperilaku seperti yang saya bayangkan, penggesek Spider Pig tidak memerlukan peretasan.
Saya memimpikan dukungan browser yang lebih luas untuk animasi yang digerakkan oleh gulir. Namun saya berharap spesifikasi ini berkembang sehingga memberi kita lebih banyak fleksibilitas guna mendorong desainer membangun penceritaan nonlinier ke dalam pengalaman yang mereka ciptakan. Jika belum, setelah garis waktu animasi tersedia di 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.