Pencipta CSS mengatakan dia awalnya membayangkan CSS sebagai teknologi web utama untuk mengendalikan perilaku di halaman web, dengan skrip sebagai alternatif ketika segala sesuatunya tidak mungkin dilakukan secara eksplisit di CSS. Alasan pendekatan CSS-pertama adalah bahwa “scripting adalah pemrograman dan pemrograman itu sulit.” Sejak pengajuan :hover Pseudoclass, CSS menstandarkan gaya yang dibuat pengembang dalam JavaScript dan “memanennya” ke dalam standar CSS. Jika Anda memikirkannya seperti ini, seolah-olah JavaScript adalah peretasannya dan CSS adalah cara resminya.
Jadi kita tidak akan merasa terlalu kotor dalam menerapkan perilaku seperti skrip dengan CSS, dan kita tidak perlu terkejut bahwa ada hal baru yang muncul. scroll-timeline Fitur ini hadir dengan dukungan browser yang sangat baik. Terlalu banyak pengembang yang menerapkan situs web pengguliran paralaks cerdas, sehingga memerlukan fitur CSS yang tidak dapat kami masukkan kembali ke dalam botol mereka. Jika Anda tidak ingin animasi thread utama yang tidak diinginkan untuk situs web pengguliran paralaks Anda berikutnya, Anda sekarang harus memahami sisi gelap peretasan CSS. <>Saya hanya bercandaAda juga API JavaScript baru untuk animasi terkait gulir jika pemrograman yang diperlukan lebih sesuai dengan kasus penggunaan Anda.
Migrasikan contoh JavaScript ke CSS
Sangat mudah untuk menghilangkan prasangka aneh Chris.scroll-timeline Contoh animasi terkait gulir dengan mengganti CSS yang digunakan Chris untuk mengontrol animasi dengan adil <>satu baris CSS dan hapus JavaScript sepenuhnya!
body, .progress, .cube {
animation-timeline: scroll();
}menggunakanscroll()Fungsi tanpa parameter menyiapkan “garis waktu kemajuan gulir anonim” yang berarti browser akan mendasarkan animasi pada pendahulunya yang terdekat yang dapat menggulir secara vertikal jika mode pengetikan kita adalah bahasa Inggris. Sayangnya, sepertinya kita hanya dapat memilih animasi berdasarkan pengguliran sepanjang sumbu x atau y dari elemen tertentu tetapi tidak keduanya, yang akan berguna. Sebagai sebuah fungsi, kita dapat meneruskan parameter kescroll()yang memberikan kontrol lebih besar terhadap cara kita menggulir untuk memutar animasi.
Pengalaman dalam berbagai dimensi
Dan yang lebih baik lagi adalahscroll-scopekepemilikan. Menerapkan ini ke elemen penampung berarti kita dapat memicu properti pada elemen leluhur mana pun yang dipilih berdasarkan elemen apa pun yang dapat digulir yang memiliki cakupan khusus yang sama. Ini membuat saya berpikir… Karena CSS Houdini memungkinkan kita mendaftarkan properti yang dapat diwariskan dan ramah animasi di CSS, kita dapat menggabungkan animasi pada elemen yang sama berdasarkan beberapa area yang dapat digulir di halaman. Ini membuka pintu kemungkinan desain instruksional yang menarik seperti pengalaman saya di bawah ini.
Menggulir kombo horizontal pada kartu hijau muda akan memutar Pengontrol NES 3D secara horizontal, dan menggulir kombo vertikal pada kartu hijau tua akan memutar pengontrol NES secara vertikal. Dalam artikel saya sebelumnya, saya mencatat bahwa peretasan CSS sebelumnya selalu bertujuan untuk menyembunyikan dan mengungkap kemungkinan terbatas dengan CSS. Yang menarik minat saya tentang pengalaman berbasis gulir ini adalah ledakan harmonis dari gabungan rotasi vertikal dan horizontal. Garis waktu animasi memberikan interaktivitas dalam CSS murni yang tidak mungkin dilakukan di masa lalu.
Detail implementasi kurang penting dibandingkan timeline-scope Penggunaan dan fitur khusus. Kami mendaftarkan dua properti yang ditugaskan ke sudut:
@property --my-y-angle {
syntax: "<angle>";
inherits: true;
initial-value: 0deg;
}
@property --my-x-angle {
syntax: "<angle>";
inherits: true;
initial-value: -35deg;
}Selanjutnya, kita “meminjam” model NES 3D dari sampel dalam aplikasi pemodelan 3D CSS Julian Garner yang menakjubkan. Kami memperbarui.sceneKelas 3D untuk mendasarkan rotasi pada variabel baru kita seperti ini:
.scene {
transform: rotateY(var(--my-y-angle)) rotateX(var(--my-x-angle));
}Selanjutnya kita berikan<body>Barang Atimeline-scopeDengan dua domain bernama khusus.
body {
timeline-scope: --myScroller,--myScroller2;
}Saya belum melihat apa pun yang didokumentasikan secara resmi tentang lalu lintas lintas domain, tetapi ini berfungsi di Google Chrome dan Edge. Jika ini bukan fitur yang didukung secara resmi, saya harap ini menjadi bagian dari standar karena sangat mudah digunakan.
Selanjutnya, kita memilih garis waktu bernama untuk dua kartu yang dapat digulir dan sumbu yang kita inginkan untuk memutar animasi kita.
.card:first-child {
scroll-timeline-axis: x;
scroll-timeline-name: --myScroller;
}
.card:nth-child(2) {
scroll-timeline-axis: y;
scroll-timeline-name: --myScroller2;
}Dan tambahkan animasi ke adegan:
.scene {
animation: rotateHorizontal,rotateVertical;
animation-timeline: --myScroller,--myScroller2;
}
@keyframes rotateHorizontal {
to {
--my-y-angle: 360deg;
}
}
@keyframes rotateVertical {
to {
--my-x-angle: 360deg;
}
}Karena model 3D mewarisi sudut x dan y dari teks dokumen, kartu gulir kini memutar model dalam kombinasi perubahan sudut vertikal dan horizontal.
Animasi yang dikontrol pengguna di luar bilah geser
Jika dipikir-pikir, perilaku ini tidak hanya berguna untuk animasi berbasis gulir. Dalam percobaan di atas, kami menggunakan wilayah yang dapat digulir lebih seperti penggeser yang mengontrol properti model 3D kami. Setelah menyalakannya, saya berjalan-jalan dan bermimpi tentang betapa hebatnya jika input cakupan sebenarnya dapat mengontrol garis waktu animasi. Lalu saya menyadari bahwa mereka bisa! Setidaknya di Chrome. CMS CSS murni, siapa saja?
Meskipun kita terobsesi dengan model 3D dari Julian Garner, mari kita lihat apakah kita dapat menggunakan input skala untuk mengontrol model sayap-X miliknya.
Sungguh menakjubkan bahwa kita dapat melakukan ini hanya dengan CSS, dan kita dapat melakukannya dengan sejumlah properti yang berubah-ubah. Tidak cukup jauh bagi saya. Saya ingin melihat kontrol masukan lain yang dapat menangani garis waktu animasi. Bayangkan kolom teks yang menyediakan animasi saat diisi, atau tombol yang dapat memutar atau membalikkan animasi. Yang terakhir ini sampai batas tertentu dapat dicapai dengan menggabungkan :active Kelas semu dengan animation-play-state kepemilikan. Namun menurut pengalaman saya, saat Anda mencoba menggunakannya untuk memicu beberapa properti khusus, browser bisa menjadi bingung. Sebaliknya, garis waktu animasi diimplementasikan dengan mempertimbangkan kasus penggunaan ini, sehingga garis waktu tersebut bekerja dengan lancar dan persis seperti yang Anda harapkan.
Saya bukan satu-satunya yang menyadari potensi peretasan dari fitur CSS yang baru muncul ini. Seseorang telah melakukan tiruan Doom yang cerdik ini dengan menggabungkan garis waktu bergulir dengan peretasan kotak centang. Masalah yang saya hadapi adalah itu masih belum cukup. Kami memiliki cukup banyak di Chrome untuk mengimplementasikan pembuat avatar menggunakan penggeser dan input rentang sebagai kontrol permainan. Saya bersemangat untuk merasakan pengalaman mutakhir dan tak terduga yang belum pernah terjadi sebelumnya di era sebelum fitur garis waktu bergulir. Lagi pula, jika Anda harus menjelaskan definisi video game tentang alien, bukankah Anda akan mengatakan itu hanya kartun yang terlalu interaktif?
Gulir melalui dimensi tak terbatas dengan garis waktu pengguliran CSS yang awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.