Anda pasti pernah mendengar tentang fitur baru CSS Anchor Positioning, bukan? Ini adalah fitur yang memungkinkan Anda menautkan elemen halaman mana pun ke elemen lain, yaitu jangkar. Ini berguna untuk semua item tooltip, tetapi juga dapat membuat banyak efek keren lainnya.
Pada artikel ini, kita akan memeriksa navigasi menu di mana saya mengandalkan posisi jangkar untuk menciptakan efek gulir yang bagus pada tautan.
-Advertisement-.
Keren, bukan? Kami memiliki efek geser di mana persegi panjang biru menyesuaikan agar sesuai dengan konten teks melalui transisi yang lembut. Jika Anda baru mengenal docking, contoh ini cocok untuk Anda karena sederhana dan memungkinkan Anda mempelajari dasar-dasar fitur baru ini. Kita juga akan melihat contoh lainnya, jadi pantau terus sampai akhir!
Perhatikan bahwa hanya browser berbasis Chromium yang sepenuhnya mendukung mode jangkar pada saat saya menulis ini. Anda harus melihat demo di browser seperti Chrome atau Edge hingga fitur tersebut didukung lebih luas di browser lain.
Konfigurasi awal
Mari kita mulai dengan struktur HTML yang tidak lain hanyalah sebuah file nav Item yang berisi daftar tautan tidak berurutan:
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="active"><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>Kami tidak akan menghabiskan banyak waktu untuk menjelaskan arsitektur ini karena arsitektur ini bisa berbeda jika kasus penggunaan Anda berbeda. Pastikan semantiknya relevan dengan apa yang Anda coba lakukan. Sedangkan untuk bagian CSS, kita akan mulai dengan beberapa gaya dasar untuk membuat navigasi menu horizontal.
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
gap: .5rem;
font-size: 2.2rem;
}
ul li a {
color: #000;
text-decoration: none;
font-weight: 900;
line-height: 1.5;
padding-inline: .2em;
display: block;
}Sejauh ini tidak ada yang mewah. Kami menghapus beberapa gaya default dan menggunakan Flexbox untuk menyelaraskan elemen secara horizontal.
Efek geser
Pertama, mari kita pahami cara kerja efeknya. Pada pandangan pertama, sepertinya kita memiliki sebuah persegi panjang yang menyusut hingga ketinggian kecil, berpindah ke objek yang dipindahkan, dan kemudian tumbuh hingga ketinggian maksimalnya. Ini adalah efek visualnya, tetapi kenyataannya, ada lebih dari satu elemen!
Ini adalah demo pertama di mana saya menggunakan warna berbeda untuk melihat lebih baik apa yang terjadi.
Setiap item dalam daftar memiliki “item” sendiri yang menyusut atau bertambah. Kemudian kita memiliki “item” bersama (yang berwarna merah) yang meluncur di antara item menu yang berbeda. Efek pertama dilakukan dengan menggunakan animasi latar belakang, efek kedua adalah posisi jangkar ikut berperan!
Animasi latar belakang
Kami akan menganimasikan tinggi gradien CSS untuk bagian pertama ini:
/* 1 */
ul li {
background:
conic-gradient(lightblue 0 0)
bottom/100% 0% no-repeat;
transition: .2s;
}
/* 2 */
ul li:is(:hover,.active) {
background-size: 100% 100%;
transition: .2s .2s;
}
/* 3 */
ul:has(li:hover) li.active:not(:hover) {
background-size: 100% 0%;
transition: .2s;
}Kami telah mendefinisikan gradien dengan 100% Lebar dan 0% Tingginya, ditempatkan di bagian bawah. Sintaks gradien mungkin tampak aneh, tetapi ini adalah sintaksis terpendek yang memungkinkan saya memiliki gradien warna tunggal.
Terkait dengan: “Cara mendefinisikan gradien monokromatik dengan benar”
Setelah itu, jika item daftar dipindahkan atau berisi .active lapisan, kita buat tingginya sama dengan 100%. Perhatikan penggunaan penundaan di sini untuk memastikan bahwa pertumbuhan terjadi setelah kontraksi.
Terakhir, kita perlu menangani kasus khusus .active tujuan. Jika kita memindahkan elemen apa pun (mis <>TIDAK Subjek) lalu .active Item mendapat efek penghindaran (ketinggian gradien sama 0%). Inilah tujuan dari pemilih ketiga dalam kode.
Animasi pertama kita telah selesai! Perhatikan bagaimana pertumbuhan dimulai <>setelah Kontraksi selesai karena penundaan yang kami tentukan pada determinan kedua.
Animasi posisi jangkar
Animasi pertama sangat mudah karena setiap elemen memiliki animasi latar belakangnya sendiri, yang berarti kita tidak perlu peduli dengan konten teks karena latar belakang otomatis memenuhi seluruh ruang.
Kami akan menggunakan satu item untuk animasi kedua yang meluncur di antara semua item daftar menyesuaikan lebarnya agar sesuai dengan teks setiap item. Di sinilah memasang jangkar dapat membantu kita.
Mari kita mulai dengan kode berikut:
ul:before {
content:"";
position: absolute;
position-anchor: --li;
background: red;
transition: .2s;
}
ul li:is(:hover, .active) {
anchor-name: --li;
}
ul:has(li:hover) li.active:not(:hover) {
anchor-name: none;
}Untuk menghindari penambahan elemen tambahan, saya lebih suka menggunakan elemen tiruan dalam file ul. Itu harus benar-benar berada pada posisinya dan kita akan mengandalkan dua properti untuk mengaktifkan mode jangkar.
Kami mendefinisikan jangkar sebagai anchor-name kepemilikan. Saat item daftar dipindahkan atau berisi .active Lapisan tersebut, menjadi unsur pengikatnya. Kita juga harus melepas jangkarnya .active elemen jika ada elemen lain dalam status bergulir (karenanya, pembatas terakhir dalam kode). Dengan kata lain, hanya satu jangkar yang ditentukan dalam satu waktu.
Lalu kita gunakan position-anchor Properti melampirkan elemen semu ke jangkar. Perhatikan bagaimana keduanya menggunakan pengkodean yang sama --li. Ini mirip dengan cara kita mendefinisikan, misalnya @keyframes Dengan nama tertentu dan kemudian menggunakannya nanti di dalam file animation kepemilikan. Ingatlah bahwa Anda harus menggunakan <dashed-indent> sintaksis, artinya kata benda harus selalu diawali dengan tanda hubung ganda (--).
Elemen dummy diposisikan dengan benar tetapi tidak ada yang terlihat karena kami tidak menentukan dimensi apa pun! Mari tambahkan kode berikut:
ul:before {
bottom: anchor(bottom);
left: anchor(left);
right: anchor(right);
height: .2em;
}itu height Namun properti itu sepele anchor() Dia adalah pendatang baru. Begini cara Juan Diego menggambarkannya di kalender:
CSS
anchor()Fungsinya mengambil sisi elemen pengikat dan menggantikannya<length>Dimana itu ditempatkan. Ini hanya dapat digunakan pada properti internal (mistop,bottom,bottom,left,rightdll.), biasanya untuk menempatkan elemen dengan posisi absolut relatif terhadap jangkar.
Mari kita periksa halaman MDN juga:
itu
anchor()Fungsi CSS dapat digunakan dalam nilai properti yang disisipkan dari elemen jangkar, mengembalikan nilai panjang relatif terhadap posisi tepi elemen jangkar yang dilampirkannya.
Biasanya kami menggunakan left: 0 Untuk menempatkan elemen absolut di tepi kiri blok yang memuatnya (yaitu leluhur terdekatnya). position: relative). itu left: anchor(left) Ia akan melakukan hal yang sama tetapi alih-alih blok yang memuatnya, ia akan memperhitungkan elemen pengikat yang terkait dengannya.
Itu saja – kita sudah selesai! Pindahkan item menu dalam demo di bawah dan lihat bagaimana item tiruan meluncur di antara item tersebut.
Setiap kali Anda mengarahkan kursor ke item daftar, item tersebut menjadi jangkar baru untuk item semu ( ul:before). Ini juga berarti demikian anchor(...) Nilainya akan berubah menciptakan efek geser! Jangan lupa gunakan transisi yang penting kalau tidak kita akan mengalami perubahan mendadak.
Kita juga dapat menulis kode secara berbeda seperti ini:
ul:before {
content:"";
position: absolute;
inset: auto anchor(right, --li) anchor(bottom, --li) anchor(left, --li);
height: .2em;
background: red;
transition: .2s;
}Dengan kata lain, kita bisa mengandalkan inset Singkatan daripada menggunakan sifat fisik mis left, rightDan bottomdan bukannya definisi position-anchorkita dapat memasukkan nama jangkar ke dalam file anchor() pekerjaan. Kami mengulangi nama yang sama tiga kali, yang mungkin tidak optimal di sini, namun dalam beberapa situasi, Anda mungkin ingin elemen Anda memperhitungkan beberapa jangkar, dan dalam kasus seperti itu, sintaksis ini akan masuk akal.
Gabungkan kedua efek tersebut
Sekarang, kami menggabungkan kedua efek dan, <>TadaIlusi itu sempurna!
Perhatikan nilai transisi di mana penundaan itu penting:
ul:before {
transition: .2s .2s;
}
ul li {
transition: .2s;
}
ul li:is(:hover,.active) {
transition: .2s .4s;
}
ul:has(li:hover) li.active:not(:hover) {
transition: .2s;
}Kami memiliki serangkaian tiga animasi – mengecilkan tinggi gradien, memindahkan semu, dan meningkatkan tinggi gradien – jadi kami perlu ada penundaan di antara keduanya sehingga kami dapat menggabungkan semuanya. Itu sebabnya untuk geser elemen semu kami memiliki penundaan yang sama dengan durasi satu animasi (transition: .2 .2s(Untuk bagian berkembang, penundaannya sama dengan dua kali periodenya)transition: .2s .4s).
Efek melenting? Mengapa tidak?!
Mari kita coba animasi keren lainnya di mana persegi panjang yang disorot berubah menjadi lingkaran kecil, berpindah ke elemen berikutnya, dan kembali menjadi persegi panjang lagi!
Saya tidak akan menjelaskan banyak hal untuk contoh ini karena membedah kodenya adalah pekerjaan rumah Anda! Saya akan memberikan beberapa petunjuk sehingga Anda dapat memahami apa yang terjadi.
Seperti efek sebelumnya, kami memiliki kombinasi dua animasi. Untuk item pertama, saya akan menggunakan elemen semu untuk setiap item daftar di mana saya akan mengatur dimensi dan ruang border-radius Untuk mensimulasikan transformasi. Untuk animasi kedua, saya akan menggunakan ul Pseudo-item untuk membuat lingkaran kecil yang saya pindahkan di antara item daftar.
Berikut versi demo lainnya dengan warna berbeda dan transisi lebih lambat untuk memvisualisasikan setiap animasi dengan lebih baik:
Bagian tersulitnya adalah efek lompat dimana saya menggunakan sesuatu yang aneh cubic-bezier() Namun saya memiliki artikel mendetail di mana saya menjelaskan teknik ini di artikel Trik CSS saya “Menggunakan Animasi CSS Tingkat Lanjut cubic-bezier()“.
kesimpulan
Saya harap Anda menikmati eksperimen sederhana ini menggunakan fitur penentuan posisi jangkar. Kami hanya melihat tiga properti/nilai tetapi itu cukup untuk mempersiapkan Anda menghadapi fitur baru ini. itu anchor-name Dan position-anchor Properti adalah bagian wajib untuk menghubungkan satu elemen (sering disebut elemen “target” dalam konteks ini) ke elemen lain (yang kita sebut elemen “jangkar” dalam konteks ini). Dari sana, Anda memilikinya anchor() Fungsi kontrol posisi.
Terkait dengan: Panduan penentuan posisi jangkar CSS
Navigasi Menu Mewah Menggunakan Mode Jangkar awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
