Offset-anchor - Trik CSS

Anonim

The offset-anchorproperti mendefinisikan titik dalam kotak itu diterapkan sebagai jangkar yang bergerak sepanjang offset-path.

Itu agak bertele-tele, jadi mari kita uraikan sedikit.

Anda memiliki elemen, misalnya kotak:

Lihat Kotak Oranye Pena oleh Geoff Graham (@geoffgraham) di CodePen.

Anda ingin kotak itu bergerak di sepanjang jalur, katakanlah garis berlekuk-lekuk. Kita dapat membuat baris itu dengan SVG langsung di HTML dan menggunakannya sebagai offset-pathkotak. Kami membuat animasi dengan memanfaatkan offset-distanceproperti:

Lihat Pen Orange Square di Path oleh Geoff Graham (@geoffgraham) di CodePen.

Bagus. Tetapi bagaimana jika kita ingin kotak terlihat menggantung? Anda tahu, seperti orang yang meluncur di sepanjang garis zip.

Di situlah offset-anchormasuk! Ini menandai tempat di elemen dan menggunakannya untuk memposisikan elemen di jalur.

Berikut adalah contoh di mana tiga kotak berbeda dilampirkan ke jalur yang sama di titik jangkar yang berbeda:

Lihat Pen NMbEpy oleh Geoff Graham (@geoffgraham) di CodePen.

Sintaksis

.box ( offset-anchor: (auto | ); )

Nilai

  • auto: Mengambil nilai offset-positionselama nilainya tidak juga autodan selama offset-pathdisetel ke none.
  • position
    • : Sebuah unit yang dihitung dari lebar dan tinggi relatif wadahnya. Misalnya, 50% 50%akan menjadi pusat mati. Perhatikan bahwa kata kunci berfungsi di sini, sama seperti di background-positionmana center centerakan mengembalikan hasil yang sama.
    • : Unit yang mengimbangi jangkar dari sudut kiri atas kotak elemen.

Perlu dicatat bahwa positionini adalah properti yang dapat dianimasikan.

Dukungan Browser

The offset-*sifat masih dianggap sebagai fitur eksperimental pada saat tulisan ini. Jika kurangnya dukungan browser saat ini membuat Anda ragu-ragu untuk menggunakannya pada suatu proyek, maka Anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk level animasi ini. Ini akan menawarkan Anda dukungan browser terluas saat ini.

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
46 72 Tidak 79 Tidak

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 Tidak

Mulai Chrome 46 dan Opera 33 (dan versi seluler terkait) kami memiliki "dukungan awal" di Blink (tanpa tanda).

informasi tambahan

  • Spesifikasi Modul Jalur Gerak Level 1
  • Tiket WebKit # 139128
  • Mozilla Ticket # 1186329
  • Permintaan fitur Microsoft Edge