Komen yang muncul dengan kedudukan CSS Anchor dan Animasi yang Dipandu Pandangan

Hasil kajian status CSS 2024 telah dikeluarkan, dan begitu menarik seperti biasa. Walaupun setiap bahagian layak mendapat analisis mendalam, kami biasanya memfokuskan paling banyak pada bahagian-bahagian ciri CSS yang paling biasa digunakan. Jika anda berminat untuk menulis artikel mengenai pembangunan web (mungkin anda boleh mula menulis dengan kami?), Anda terutamanya ingin menyemak bahagian senarai bacaan ciri tersebut. Ia mengandungi ciri -ciri yang responden tinjauan ingin membaca selepas menyelesaikan tinjauan, biasanya terdiri daripada ciri -ciri terkini dengan kesedaran masyarakat yang kurang.

Satu ciri yang menggembirakan saya adalah pilihan utama saya untuk 2024:

CSS Anchor Positioning , menduduki tempat keempat dalam kaji selidik. Anda boleh mencari animasi pemacu skrol di bawah, satu lagi ciri hebat yang telah menerima sokongan penyemak imbas yang luas tahun ini. Kedua -duanya adalah elegan dan menawarkan pengalaman pemaju yang baik, tetapi menggabungkan mereka membuka kemungkinan baru yang kebanyakan orang melihat tahun lalu jatuh ke dalam alam JavaScript. Saya ingin mempamerkan salah satu kemungkinan ini sambil memahami kedua -dua ciri ini. Khususnya, kami akan membuat catatan blog di mana nota kaki muncul sebagai komen di sebelah setiap perenggan teks.

Untuk demonstrasi ini, keperluan kami adalah seperti berikut:

Nota kaki muncul apabila ia memasuki skrin.

• Lampirkannya ke teks yang sepadan.
• Nota kaki terletak di kedua -dua belah skrin, jadi kami memerlukan penyelesaian sandaran mudah alih.
Asas

Pertama, kami akan menggunakan contoh susun atur post blog berikut: tajuk, imej penutup, dan badan:

satu -satunya perkara yang perlu diperhatikan ialah kita kadang -kadang mempunyai perenggan dengan nota kaki:

Lokasi Nota kaki

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

Dalam demonstrasi ini, nota kaki terletak di dalam badan artikel, sejurus mengikuti teks yang ingin kita komen. Walau bagaimanapun, kami mahu mereka dilampirkan di sebelah teks sebagai gelembung terapung. Pada masa lalu, kita mungkin perlu menggunakan gabungan kedudukan mutlak dan relatif dan mencari atribut margin yang betul untuk setiap nota kaki.

Walau bagaimanapun, kita kini boleh melakukan ini menggunakan kedudukan utama, ciri yang membolehkan kita meletakkan unsur -unsur yang benar -benar diposisikan berbanding unsur -unsur lain -bukan hanya relatif kepada konteks kontena di mana mereka berada. Kami akan bercakap tentang "sauh" dan "sasaran" untuk seketika, jadi beberapa istilah diperlukan pada mulanya:

Point Anchor:

Ini adalah elemen yang digunakan sebagai rujukan untuk meletakkan unsur -unsur lain, oleh itu nama Anchor Point.
• Sasaran:
Ini adalah elemen kedudukan mutlak yang diposisikan relatif kepada satu atau lebih titik utama. Matlamatnya adalah nama yang kami gunakan dari sekarang, tetapi dalam sumber lain anda sering mendapati ia hanya "unsur -unsur yang benar -benar diposisikan".
• Saya tidak akan pergi ke setiap detail secara terperinci, tetapi jika anda ingin mengetahui lebih lanjut, saya sangat mengesyorkan panduan kedudukan utama kami dengan maklumat dan contoh lengkap.

sauh dan sasaran

Mudah untuk mengetahui bahawa setiap .footnote adalah elemen sasaran. Walau bagaimanapun, memilih titik utama kami memerlukan lebih banyak nuansa. Walaupun nampaknya setiap elemen .note harus menjadi elemen utama, lebih baik memilih keseluruhan .post sebagai sauh. Jika kita menetapkan kedudukan .footnote ke kedudukan mutlak, saya akan menerangkannya:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

anda akan melihat bahawa unsur -unsur .footnote dalam artikel telah dikeluarkan dari aliran dokumen biasa dan mereka secara visual melayang ke atas unsur -unsur .note mereka. Ini adalah berita baik! Oleh kerana mereka sudah sejajar dengan paksi menegak, kita hanya perlu menggunakan artikel itu sebagai sauh dan memindahkannya ke sisi pada paksi mendatar.

Pada ketika ini, kita perlu mencari atribut margin yang betul untuk meletakkannya di kedua -dua belah pihak. Walaupun ini boleh dilaksanakan, ia adalah pilihan yang menyakitkan kerana:

1. Anda harus bergantung pada nombor sihir.
2. Ia bergantung kepada viewport.
3. Ia bergantung kepada kandungan nota kaki kerana ia mengubah lebarnya.

Elemen

bukanlah sauh secara lalai, jadi untuk mendaftarkan artikel sebagai sauh, kita mesti menggunakan harta anchor-name dan memberikannya dengan pengenal mendatar pendek (nama tersuai bermula dengan dua baris mendatar pendek) sebagai nama.

<code>.footnote {
  position: absolute;
}</code>

Dalam kes ini, elemen sasaran kami akan menjadi .footnote. Untuk menggunakan elemen sasaran, kita dapat mengekalkan kedudukan mutlak dan pilih elemen utama menggunakan harta position-anchor, yang mengambil pengenal garis mendatar pendek dari sauh. Ini akan menjadikan .post titik anchor lalai untuk sasaran dalam langkah seterusnya.

<code>.post {
  anchor-name: --post;
}</code>

Pindah Target

Daripada memilih sebarang nilai margin untuk atribut .footnote atau left right, kita boleh menggunakan fungsi anchor(). Ia mengembalikan nilai <length></length> yang mewakili kedudukan di satu sisi titik utama, yang membolehkan kita sentiasa menetapkan harta margin sasaran dengan betul. Oleh itu, kita boleh menyambungkan bahagian kiri sasaran ke sebelah kanan titik utama dan sebaliknya:

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Walau bagaimanapun, anda akan melihat bahawa ia terjebak di satu sisi artikel, tanpa ruang di tengah. Nasib baik, atribut

berfungsi dengan cara yang sama yang anda ingin sasaran elemen sasaran, dan meninggalkan ruang antara sasaran nota kaki dan sauh pos. Kami juga boleh menambah lebih banyak gaya untuk menjadikan kelihatan lebih cantik: margin

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Akhirnya, semua unsur -unsur

berada di sisi yang sama artikel, dan jika kita mahu mengaturnya di setiap sisi, kita boleh menggunakan pemilih .footnote untuk memilih ganjil dan juga anotasi dan menetapkannya di sisi bertentangan. nth-of-type()

<code>.footnote {
  /* ... */

  background-color: #fff;
  border-radius: 20px;
  margin: 0px 20px;
  padding: 20px;
}</code>

Kami menggunakan

bukan nth-of-type() kerana kita hanya mahu melangkah ke atas unsur -unsur nth-child dan bukannya semua unsur saudara. .note

ingat untuk mengeluarkan pernyataan margin terakhir dari .footnote dan kemudian suara ! Nota kaki kami terletak di setiap sisi. Anda akan melihat bahawa saya juga menambah segitiga kecil untuk setiap nota kaki, tetapi ini adalah di luar skop artikel ini:

Animasi yang didorong oleh View

Mari mula membuat animasi pop timbul. Saya dapati ini menjadi bahagian yang paling mudah kerana kedua-dua pandangan dan animasi pemacu tatal adalah seperti yang mungkin. Kami akan terlebih dahulu mendaftarkan animasi menggunakan @keyframes biasa. Apa yang kita mahukan ialah membuat nota kaki kita bermula dari yang tidak kelihatan dan kemudian perlahan -lahan menjadi lebih besar dan kelihatan:

<code><main><p>
    非常有趣的信息！
     关于它的脚注
  </p>
</main></code>

ini adalah animasi kita, sekarang kita hanya perlu menambahkannya kepada setiap .footnote:

<code>.footnote {
  position: absolute;
}</code>

Ini sendiri tidak melakukan apa -apa. Kami biasanya menetapkan animation-duration untuk memulakannya. Walau bagaimanapun, animasi yang didorong oleh pandangan tidak akan berjalan melalui masa yang ditetapkan, tetapi kemajuan animasi akan bergantung kepada kedudukan elemen pada skrin. Untuk melakukan ini, kami menetapkan animation-timeline ke view().

<code>.post {
  anchor-name: --post;
}</code>

Ini menyebabkan animasi berakhir apabila elemen meninggalkan skrin. Kami mahu ia berakhir dengan kedudukan yang lebih mudah dibaca. Sentuhan terakhir adalah untuk menetapkan animation-range ke cover 0% cover 40%. Ini bermakna, "Saya mahu elemen untuk memulakan animasi apabila ia adalah 0% dalam pandangan dan berakhir apabila ia adalah 40% dalam pandangan."

<code>.footnote {
  position: absolute;
  position-anchor: --post;
}</code>

Alat Menakjubkan Bramus memberi tumpuan lebih kepada animasi menatal dan berpandangan, yang lebih baik menunjukkan bagaimana sifat animation-range berfungsi.

Apa yang harus saya lakukan apabila saya menjalankan terminal mudah alih?

Anda mungkin menyedari bahawa kaedah nota kaki ini tidak berfungsi pada skrin yang lebih kecil kerana tidak ada ruang di kedua -dua belah artikel. Pembaikannya sangat mudah. Kami mahu nota kaki muncul sebagai nota kaki biasa pada skrin kecil dan sebagai komen pada skrin besar, yang boleh kami lakukan dengan menunjukkan komen kami hanya apabila skrin lebih besar daripada ambang tertentu (kira -kira 1000 piksel). Jika tidak, komen akan muncul dalam badan artikel seperti mana -mana komen lain yang anda dapati di web.

<code>.footnote {
  position: absolute;
  position-anchor: --post;

  /* 将它们放在右侧 */
  left: anchor(right);

  /* 或将它们放在左侧 */
  right: anchor(left);

  /* 每次只使用其中一个！ */
}</code>

Sekarang, komen kami hanya akan dipaparkan di kedua -dua belah jika terdapat ruang yang cukup:

Ringkasan

Jika anda juga suka menulis kandungan yang anda sukai, anda akan sering mendapati diri anda masuk ke dalam tangen rawak, atau ingin menambah komen kepada setiap perenggan untuk memberikan konteks tambahan. Sekurang -kurangnya, itu kes saya, jadi dapat memaparkan komen secara dinamik adalah tambahan yang baik. Terutama apabila kita boleh melakukan ini dengan hanya CSS - ini adalah sesuatu yang tidak dapat kita lakukan setahun yang lalu!

Atas ialah kandungan terperinci Komen yang muncul dengan kedudukan CSS Anchor dan Animasi yang Dipandu Pandangan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!