Web-linger.css: Di seberang swiper-verse

Posting terdahulu saya menyerlahkan akibat yang tidak dapat dipulihkan dari swiping mendatar pada Tinder. Saya akan menyelidiki kekecewaan itu pada masa yang lain, tetapi pada pandangan pertama, sapu navigasi nampaknya sempurna untuk web-slinger.css-alternatif CSS yang eksperimen, murni saya untuk wow.js untuk animasi yang dicetuskan tatal satu arah. (Masih mengusahakan lagu tema!)

Bolehkah web-slinger.css mengendalikan interaksi sapu gaya Tinder kerana suka/tidak suka elemen menggunakan hanya CSS? Dan yang lebih penting, adakah ini akan membenarkan menggunakan imej labah-labah, seperti permintaan yang popular? Memperkenalkan Swiper Spider-Pig-Penggantian Captcha yang dicadangkan saya (kerana siapa

tidak suka Spider-Pig?). Leret ke kiri atau kanan di bawah (Chrome/Edge sahaja, buat masa sekarang) untuk mendaftarkan pendapat anda.

memperluaskan cakrawala

Web-slinger.css, nampaknya, tidak direka untuk menatal mendatar. Pembaikan? CSS mudah mengatasi:

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

Ini mengubah tingkah laku lalai Web-Slinger untuk elemen dengan kelas

, membuat pemicu tatal bertindak balas terhadap mendatar, tidak menegak, menatal. Jika tidak, pencetus akan mengaktifkan dengan serta -merta, walaupun tersembunyi secara visual kerana lebar kontena, kerana mereka berada di atas lipatan menegak di swiper kami. scroll-trigger-n

Langkah-langkah awal saya yang melibatkan Forking Nikolay Talanov yang sangat baik JavaScript Tinder Swipe Demo, mengeluarkan JavaScript dan semua tetapi satu kad, kemudian mengimport web-slinger.css dan memohon patch mendatar. Bekas kad menjadi

, dengan tiga kotak sampingan, bersaiz kecil, tatal-snapping. Slaid tengah yang digunakan position: fixed, memulakan pengguna di tengah dan membenarkan menatal ke belakang/ke hadapan. scroll-align: center

NOTA: Dengan animasi yang didorong oleh tatal yang tidak konvensional, elemen scrollable tidak perlu menatal apa-apa yang dapat dilihat. Ia seperti hacks kotak semak - menyembunyikan kotak semak, gaya label. Kami memanfaatkan tingkah laku CSS elemen scrollable, bukan ui lalainya.

A scroll-trigger-1 Ia berfungsi! (Narator: Tidak, lebih -lebih lagi. Lebih banyak lagi.)

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

Menambah ini mengakibatkan labah-labah-babi secara automatik "disukai" pada beban halaman. Sempurna untuk seseorang yang disukai secara universal ... (ahem, penggodam CSS pertengahan umur). Tetapi Spider-Pig tidak disayangi secara universal, jadi mari kita periksa mengapa swipe kanan berkelakuan berbeza daripada yang diharapkan, walaupun prinsip-prinsip yang sama.

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

melangkah mundur

Bug ini diserlahkan batasan

. Web-slinger bergantung pada teknologi yang tidak sesuai untuk animasi yang dicetuskan hanya dengan

ke belakang view-timeline menatal.

Visualizer menunjukkan bahawa tanpa mengira animation-range, animasi selesai selepas elemen meninggalkan viewport dalam arah menatal - yang bertentangan dengan keperluan kita.

Untungnya, Bramus (Chrome Dev Team) mempunyai demo untuk mengesan arah skrol di CSS. Menggunakan harta Custom Clever --scroll-direction, kita dapat mengawal penampilan elemen scroll-trigger-2 dengan pertanyaan gaya:

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

Ini memastikan .scroll-trigger-2 hanya muncul apabila pada slaid sebelumnya, dicapai melalui menatal ke belakang. --slide-index (dikawal oleh animasi tiga saat, tiga langkah) mengira slaid semasa, yang memerlukan sapu yang menentukan untuk mencetuskan tidak suka.

Leret akhir

Untuk mengesan pendapat labah-labah, saya menggunakan imej kaunter pihak ketiga sebagai latar belakang:

<div>
  </div>
<main>
  <div></div>
  <div></div>
  <div><div></div></div>
</main>

Pelajaran yang dipelajari

Ini lebih kompleks daripada yang dijangkakan, terutamanya disebabkan oleh cabaran menggunakan animasi yang dicetuskan skrol yang hanya berjalan pada menatal ke belakang. Ini adalah pengetahuan yang berharga. Kuasa yang tersembunyi dalam spec semasa adalah menakjubkan; Kita boleh gaya berdasarkan tingkah laku menatal yang sangat spesifik. Walau bagaimanapun, kami terpaksa menggodam API untuk mengakses kuasa ini. Penyelesaian yang ideal ialah:

<div>
  <div></div>
</div>
<main>
  <div><div></div></div>
  <div></div>
  <div><div></div></div>
</main>

Dengan API sedemikian, swiper Spider-Pig tidak memerlukan hacks.

Saya berharap untuk sokongan penyemak imbas yang lebih luas untuk animasi yang didorong oleh tatal dan spesifikasi yang lebih fleksibel untuk menggalakkan pereka untuk membina bercerita tidak linear ke dalam pengalaman mereka. Jika tidak, apabila garis masa animasi lebih banyak disokong, mungkin masa untuk menjadikan web-slinger.css lebih mantap dan siap pengeluaran.

Atas ialah kandungan terperinci Web-linger.css: Di seberang swiper-verse. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!