CSS Scroll-Timeline dengan Keutamaan Gerakan

Cepat melayari perkara utama:

• Mary Lou mengeluarkan demo gaya Codrops biasa yang dipanggil "Skrol Lajur Alternatif".
• Kesan menatal dikuasakan oleh skrol lokomotif, yang telah dilindungi secara kebetulan sebelum ini.
• Bramus telah meneroka penggunaan keupayaan CSS Scroll-Timeline masa depan untuk mencapai kesan menatal CSS asli. Dia menulis siri empat bahagian yang mendalam untuk ini, bermula dari sini.
• Walaupun masih dalam peringkat awal, @scroll-timeline telah ditandakan dalam krom. Bramus juga menunjukkan kepada kami penggunaan ciri-ciri ini pada trik CSS, terutamanya apabila digunakan bersama dengan Waapi.
• Oleh itu, Bramus berangkat untuk membina semula aspek tatal persembahan (tatal lajur tengah secara semulajadi dan dua lajur luar tatal secara terbalik). Ternyata anda boleh menggunakan polyfill dan menambah beberapa waapi untuk menyalinnya dengan baik. Sangat sejuk.

Menggunakan CSS Scroll-Timeline dalam kombinasi dengan prefers-reduced-motion

Satu-satunya perkara yang saya ingin tambah ialah harta prefers-reduced-motion perlu dipertimbangkan, kerana animasi menatal ini boleh menjejaskan orang yang terdedah kepada penyakit bergerak. Untuk melakukan ini, anda boleh menggabungkan ujian dengan ujian yang disokong dalam JavaScript pada baris yang sama:

 jika (
    ! Css.supports ("animasi-masa: foo") && 
    ! window.matchmedia ('(lebih suka-dikurangkan-gerakan: mengurangkan)'). Perlawanan
   ) {
     // Jalankan kesan sejuk}

Saya tidak pasti lebih baik untuk menguji ketidakpuasan atau sebaliknya reduce . Sama ada cara, silap mata dalam CSS adalah untuk membungkus apa sahaja yang anda mahu lakukan dengan @scroll-timeline dan animation-timeline dalam ujian @supports (jika anda ingin melakukan sesuatu yang lain), dan kemudian bungkus ujian itu dalam ujian keutamaan:

 @media (lebih suka-dikurangkan-gerakan: tidak ada pilihan) {

    @Supports (Animation-Timeline: Works) {

      /* Melaksanakan kesan sejuk*/

    }

}

Ini demonstrasi, dan semua kredit adalah kepada Bramus, yang membuatnya berlaku.

Oh, awak tahu? Jika @when menjadi ciri, CSS akan lebih ringkas:

 @When Supports (Animation-Timeline: Works) dan Media (lebih suka-dikurangkan-Motion: No-Preference) {

} @else {

}

Atas ialah kandungan terperinci CSS Scroll-Timeline dengan Keutamaan Gerakan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!