Offset-jangkar - Trik CSS

Anonim

The offset-anchorharta mentakrifkan mata dalam kotak yang ia digunakan sebagai anchor yang bergerak di sepanjang offset-path.

Itu agak mudah, jadi mari kita memecahkannya sedikit.

Anda mempunyai elemen, katakan kotak:

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

Anda mahu kotak itu bergerak di sepanjang jalan, katakan garis lekuk. Kita dapat membuat garis itu dengan SVG secara langsung dalam HTML dan menggunakannya sebagai offset-pathuntuk kotak. Kami membuat animasi dengan memanfaatkan offset-distanceharta tanah:

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

Bagus bagus. Tetapi bagaimana jika kita mahu kotak itu kelihatan seperti di luar garisan? Anda tahu, seperti orang yang meluncur di sepanjang garis zip.

Di situlah offset-anchormasuk! Ia menandakan titik pada elemen dan menggunakannya untuk meletakkan elemen di jalan.

Berikut adalah contoh di mana tiga kotak berlainan dilampirkan pada jalur yang sama pada titik jangkar yang berbeza:

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

Sintaks

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

Nilai

  • auto: Mengambil nilai offset-positionselagi nilai itu tidak juga autodan selagi offset-pathditetapkan ke none.
  • position
    • : Unit yang dikira dari lebar dan tinggi relatif bekas yang ada di dalamnya. Contohnya, 50% 50%akan menjadi pusat mati. Perhatikan bahawa kata kunci berfungsi di sini, seperti background-positiondi mana center centerakan menghasilkan hasil yang sama.
    • : Unit yang mengimbangi jangkar dari sudut kiri atas kotak elemen.

Perlu diingat bahawa ia positionadalah harta yang boleh digemari.

Sokongan Penyemak Imbas

The offset-*hotel masih dianggap ciri eksperimen pada masa penulisan ini. Sekiranya kekurangan sokongan penyemak imbas semasa membuat anda ragu untuk menggunakannya pada projek, maka anda mungkin ingin mempertimbangkan untuk menggunakan GSAP untuk tahap animasi ini. Ini akan memberi anda sokongan penyemak imbas terluas buat masa ini.

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
46 72 Tidak 79 Tidak

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 81 Tidak

Dari Chrome 46 dan Opera 33 (dan versi mudah alih yang berkaitan) kami mempunyai "sokongan awal" di Blink (tanpa bendera)

Maklumat tambahan

  • Modul Laluan Gerak Spesifikasi Tahap 1
  • Tiket WebKit # 139128
  • Tiket Mozilla # 1186329
  • Permintaan ciri Microsoft Edge