Luncurkan melalui dimensi tanpa had dengan garis masa tatal CSS

Falsafah reka bentuk asal CSS, yang penciptanya membayangkan bahawa ia akan menjadi teknologi utama untuk kawalan tingkah laku web, dan bahasa skrip hanya alternatif apabila CSS tidak dapat melaksanakan fungsi secara mendadak. Metodologi penggunaan keutamaan CSS adalah berdasarkan konsep bahawa "skrip adalah pengaturcaraan, tetapi pengaturcaraan adalah sukar". Sejak pengenalan kelas pseudo

, CSS telah menyeragamkan corak yang dibuat oleh pemaju dalam JavaScript dan "memasukkan" mereka ke dalam standard CSS. Dari perspektif ini, JavaScript hampir seperti "penyelesaian", dan CSS adalah pendekatan rasmi. ：hover Oleh itu, dengan menggunakan CSS untuk melaksanakan tingkah laku seperti skrip membuat kita merasa kurang "canggung", dan tidak menghairankan bahawa ciri-ciri seperti ciri

baru muncul. Ramai pemaju melaksanakan laman web menatal Parallax pintar, yang menghalang kami daripada meletakkan ciri CSS ini "Sprite" kembali ke dalam botol. Sekiranya anda tidak mahu animasi benang utama yang gagap di laman web Parallax yang seterusnya, anda mesti beralih ke "sisi gelap" penggodam CSS. (Hanya bercanda), jika anda lebih suka pengaturcaraan penting, terdapat juga API JavaScript baru untuk animasi persatuan menatal.

scroll-timeline memindahkan contoh JavaScript ke CSS

Ubah suai contoh animasi tatal paralaks sebelum Chris Coyier, ganti CSS yang digunakan oleh Chris untuk mengawal animasi dengan garis kod CSS

, dan sepenuhnya mengeluarkan kod JavaScript, yang sangat mudah.

scroll-timeline Menggunakan fungsi tanpa parameter akan menetapkan "Timeline Kemajuan Menatal Anonymous", yang bermaksud bahawa jika mod penulisan kami berada dalam bahasa Inggeris, penyemak imbas akan menghidupkan berdasarkan unsur -unsur nenek moyang baru -baru ini yang dapat menatal secara menegak. Malangnya, ia akan sangat berguna untuk hanya mempunyai pilihan untuk menghidupkan berdasarkan menatal pada paksi-x atau paksi y dari elemen tertentu, bukan kedua-duanya. Sebagai fungsi kita boleh lulus parameter ke

yang memberikan kawalan yang lebih baik ke atas bagaimana kita mahu tatal untuk menjalankan animasi.

body, .progress, .cube {
  animation-timeline: scroll();
}

Eksperimen Multi-dimensi scroll() scroll() lebih baik adalah atribut

. Memohon kepada elemen kontena bermakna kita boleh menghidupkan atribut pada mana -mana elemen nenek moyang yang dipilih berdasarkan mana -mana elemen scrollable dengan skop yang ditugaskan yang sama. Ini membuat saya berfikir ... kerana CSS Houdini membolehkan kami mendaftarkan ciri-ciri mesra animasi, yang boleh diwarisi dalam CSS, kami boleh menggabungkan animasi pada elemen yang sama berdasarkan pelbagai bidang scrollable pada halaman. Ini membuka pintu kepada kemungkinan reka bentuk pengajaran yang menarik, seperti percubaan saya di bawah.

Menatal naratif mendatar pada kad hijau cahaya akan memutar konsol 3D NES secara mendatar, dan menatal naratif menegak pada kad hijau gelap akan memutar konsol NES secara menegak. Dalam jawatan terdahulu saya, saya menyebut bahawa helah CSS masa lalu saya sentiasa merebak ke kemungkinan bersembunyi dan menunjukkan kemungkinan terhad dengan CSS. Apa yang saya berminat dengan eksperimen berasaskan roll ini ialah gabungan gabungan gabungan gabungan menegak dan mendatar. Masa animasi menyediakan interaktiviti CSS tulen yang mustahil pada masa lalu.

Butiran pelaksanaan tidak begitu penting seperti penggunaan timeline-scope dan sifat tersuai. Kami mendaftarkan dua sifat sudut tersuai:

body, .progress, .cube {
  animation-timeline: scroll();
}

Kemudian kami "meminjam" model NES 3D dari contoh -contoh dalam aplikasi pemodelan 3D CSS yang menakjubkan Julian Garner. Kami mengemas kini kelas .scene untuk membuat putaran 3D berdasarkan pembolehubah baru kami seperti berikut:

@property --my-y-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

@property --my-x-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: -35deg;
}</angle></angle>

Seterusnya, kami menyediakan elemen body dengan dua skop bernama adat. scroll-scope

.scene {
  transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}

Saya tidak melihat mana -mana dokumentasi rasmi untuk lulus dalam pelbagai skop, tetapi ia berfungsi di Google Chrome and Edge. Jika ia bukan ciri yang disokong secara rasmi, saya harap ia akan menjadi sebahagian daripada standard kerana ia sangat mudah.

Seterusnya, kami menentukan garis masa yang dinamakan untuk dua kad scrollable dan paksi yang kami mahu mencetuskan animasi.

body {
  scroll-scope: --myScroller,--myScroller2; 
}

dan tambahkan animasi ke tempat kejadian:

.card:first-child {
  scroll-timeline-axis: x;
  scroll-timeline-name: --myScroller;
}

.card:nth-child(2) {
  scroll-timeline-axis: y;
  scroll-timeline-name: --myScroller2;
}

Oleh kerana model 3D mewarisi sudut x dan y badan dokumen, kad menatal kini berputar model dalam gabungan perubahan sudut menegak dan mendatar.

Animasi Kawalan Pengguna Beyond Scrollbar

Fikirkan dengan teliti, tingkah laku ini bukan sahaja berguna untuk animasi yang didorong oleh tatal. Dalam eksperimen di atas, kami menggunakan kawasan scrollable lebih sebagai gelangsar untuk mengawal sifat model 3D. Selepas menyelesaikan kerja saya, saya pergi berjalan -jalan dan fantasized betapa sejuknya jika input jarak sebenar dapat mengawal garis masa animasi. Kemudian saya mendapati bahawa mereka boleh! Sekurang -kurangnya dalam krom. CMS CSS tulen?

Semasa kami meminta model 3D dari Julian Garner, mari kita lihat jika kita boleh menggunakan input pelbagai untuk mengawal model X-Wingnya.

luar biasa bahawa kita boleh melakukan ini dengan hanya menggunakan CSS, dan kita boleh melakukannya dengan bilangan hartanah. Bagi saya, itu tidak mencukupi. Saya ingin melihat kawalan input lain yang boleh memanipulasi garis masa animasi. Bayangkan bahawa medan teks menolak animasi semasa anda mengisi, atau butang boleh bermain atau membalikkan animasi. Yang terakhir boleh dilaksanakan sedikit sebanyak dengan menggabungkan kelas pseudo

dengan atribut :active. Tetapi dalam pengalaman saya, penyemak imbas mungkin keliru apabila anda cuba menggunakannya untuk menghidupkan pelbagai sifat tersuai. Sebaliknya, garis masa animasi direka dengan kes penggunaan ini, jadi ia berlari dengan lancar dan tepat apa yang saya harapkan. animation-play-state

Saya bukan satu -satunya yang melihat potensi ciri CSS yang muncul ini. Seseorang telah melaksanakan klon azab pintar ini dengan menggabungkan scroll-timeline dan helah kotak semak. Masalah saya ialah ia masih belum mencukupi. Kami mempunyai sumber yang cukup dalam Chrome untuk melaksanakan pembina avatar menggunakan scrollbars dan input jarak sebagai kawalan permainan. Saya gembira untuk mencuba pengalaman yang tidak dapat diramalkan dan kompleks yang belum pernah terjadi sebelumnya dalam era sebelum penampilan ciri -ciri scroll-timeline. Lagipun, jika anda perlu menerangkan definisi permainan video kepada Aliens, tidakkah anda mengatakan ia hanya animasi interaktif super?

Atas ialah kandungan terperinci Luncurkan melalui dimensi tanpa had dengan garis masa tatal CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!