offset-anchor
Özelliği bu çapa olarak uygulanır kutu içinde bir noktayı tanımlar boyunca hareket offset-path
.
Bu biraz kelime, o yüzden bunu biraz açıklayalım.
Bir öğeniz var, bir kutu diyelim:
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen Orange Box'a bakın.
O kutunun bir yol boyunca hareket etmesini istiyorsunuz, örneğin dalgalı bir çizgi. Bu satırı SVG ile doğrudan HTML'de oluşturabilir ve bunu offset-path
kutu için kullanabiliriz. offset-distance
Özelliği kullanarak animasyonu oluşturuyoruz :
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Yoldaki Kalem Turuncu Meydanı'na bakın.
İyi iyi. Peki ya kutunun hattan sarkıyor gibi görünmesini istersek? Bilirsin, çelik halattan kayan biri gibi.
İşte burada offset-anchor
devreye giriyor! Öğede bir noktayı işaretler ve bunu, öğeyi yol üzerinde konumlandırmak için kullanır.
Aşağıda, farklı bağlantı noktalarında aynı yola üç farklı kutunun eklendiği bir örnek verilmiştir:
CodePen'de Geoff Graham (@geoffgraham) tarafından hazırlanan Pen NMbEpy'ye bakın.
Sözdizimi
.box ( offset-anchor: (auto | ); )
Değerler
auto
: Değerini alıroffset-position
bu değer de değil süreceauto
ve süreceoffset-path
olarak ayarlanırnone
.position
: İçinde bulunduğu kabın göreceli genişliğinden ve yüksekliğinden hesaplanan bir birim. Örneğin
50% 50%
ölü merkez olabilir. Anahtar kelimeler gibi, burada çalıştığını unutmayınbackground-position
neredecenter center
aynı sonucu döndürecektir.: Bağlantıyı öğe kutusunun sol üst köşesinden kaydıran birim.
Bunun position
canlandırılabilir bir özellik olduğunu belirtmekte fayda var .
Tarayıcı Desteği
offset-*
Özellikleri hala bu yazının yazıldığı anda deneysel bir özellik olarak kabul edilir. Tarayıcı desteğinin mevcut olmaması, onu bir projede kullanmaktan çekinmenize neden oluyorsa, bu animasyon düzeyi için GSAP kullanmayı düşünebilirsiniz. Bu size şu anda en geniş tarayıcı desteğini sunacaktır.
Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.
Masaüstü Bilgisayar
Krom | Firefox | IE | Kenar | Safari |
---|---|---|---|---|
46 | 72 | Hayır | 79 | Hayır |
Mobil / Tablet
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
88 | 85 | 81 | Hayır |
Chrome 46 ve Opera 33'ten (ve ilgili mobil sürümlerden) itibaren, Blink'te (işaret yok) "ilk desteğimiz" var.
ek bilgi
- Hareket Yolu Modülü Seviye 1 Spesifikasyonu
- WebKit Bilet # 139128
- Mozilla Bileti # 1186329
- Microsoft Edge özellik isteği