Hareket ve etkileşimler

Durumlar ve hareket

Düzenleyici; giriş, döngü ve kaydırma efektlerinin yanında üzerine gelme ve basma stillerini destekler. Okunabilir, durağan bir tasarımla başlayın, her seferinde bir efekt ekleyin ve ardından önizlemede doğrulayın. Süreyi ve hız eğrisini bilinçli kullanın; temel içeriğin uzun bir animasyona bağlı olmasından kaçının.

Animasyon

Tüm hareket ayarları inspector'daki Efektler sekmesindedir ve düz CSS'e derlenir; böylece yayımlanan sayfa bir animasyon kütüphanesi olmadan hareket eder ve JavaScript olmadan da okunabilir kalır.

• Giriş. Hazır efektler (belirme, yükselme, düşme, kayma, yakınlaşma, bulanıklık, pop, perde açılması) ya da başlangıç opaklığını, X/Y hareketini, ölçeği, dönüşü ve bulanıklığı birleştiren Özel. Kelime kelime, harf harf ya da bir kapsayıcının doğrudan alt öğelerini sırayla getiren Children one by one ile gelebilir. Plays bir kez mi yoksa katman her görünüme girdiğinde mi oynayacağını, Trigger offset başlamadan önce ekranda ne kadar yukarı çıkması gerektiğini belirler.
• Eğriler. Ease, hazır ayarlı bir cubic-bezier düzenleyicisi kullanır. Spring gerçek sertlik, sönümleme ve kütle kullanır: yay simüle edilir ve cubic yedekli bir CSS linear() eğrisi olarak yayımlanır; böylece hedefi aşıp yerine oturabilir. Bir yayın süresi fiziğinden gelir ve eğri grafiğinin altında gösterilir.
• Üzerine gelme ve basma. Renk, opaklık ve ölçeğin yanında üzerine gelme katmanı kaldırabilir, taşıyabilir, döndürebilir, 3B eğebilir ve bulanıklaştırabilir; basma aşağı itebilir. State transition her iki durum için varsayılan ease'i kendi eğriniz ya da yayınızla değiştirir.
• Kaydırma. Belirme, yükselme, paralaks, yakınlaşma, bulanıklık, kayma, dönme ve küçülme efektleri katmanın görünüm alanındaki ilerlemesine bağlıdır. Runs aralığı seçer: girerken, tüm geçiş boyunca, tamamen görünürken ya da çıkarken (efekti tersine oynatır).
• Döngü. Nabız, süzülme, salınma, dönme, zıplama, kıpırdama ve nefes; miktar, gecikme, yön (ileri, geri, yoyo) ve yumuşak ya da sabit hız ile. Girişi olan bir katmandaki döngü giriş bittikten sonra başlar.
• Önizleme. Play, seçili katmanın girişini yayımlanan sayfayla aynı keyframe ve zamanlamayla canvas'ta çalıştırır; All sayfadaki her girişi oynatır. Preview interactions üzerine gelme, basma ve durum geçişlerini test eder.

Azaltılmış hareket isteyen ziyaretçiler katmanları giriş, kaydırma efekti ve döngü olmadan, son halleriyle görür.

Tıklama eylemleri

Yerel tıklama etkileşimleri navigate, scroll-to, toggle-layer, show-layer ve hide-layer içerir. Hedefi bilinçli belirleyin ve katmanları çoğalttıktan veya sildikten sonra hâlâ var olduğunu doğrulayın. Mümkün olduğunda sıradan gezinme için gerçek bir bağlantı kullanın.

Döngülü slaytlar ve kayan içerik

1. Etkileşimli kompozisyonu ekleyin ve yerel alt içeriğini düzenleyin.
2. Otomatik oynatmayı, aralığı ve yönü yapılandırın.
3. Döngülü slaytlar için okları, noktaları, kaydırma hareketini, döngüyü, üzerine gelince duraklatmayı ve geçiş ayarlarını inceleyin.
4. Tek öğeyle ve birden çok öğeyle önizleyin, ardından dar ekranları test edin.

Döngülü slayt ayarları kayma, solma ve yakınlaştırma geçişlerini destekler. Kayan içerik sürekli hareket eder; ziyaretçilerin hareketli metni takip etmesini gerektirmeden temel bilgiyi erişilebilir tutun.

Sekmeler ve akordeon

Başlıklar ve paneller düzenlenebilir katmanlar olarak kalır. Bir tetikleyici ile paneli, açılır kapanır kompozisyon içinde ortak bir hedef kimliğini paylaşır. Düzenlerken eşleşen hedefleri koruyun. Oluşturulan sayfada odağı, klavye davranışını ve görünür içeriği doğrulayın.

Efektler ve erişilebilirlik

Metin efektleri ve gölgelendirici görselleri dekoratif iyileştirmelerdir; okunabilir metnin yerini tutmaz. Kontrastı, azaltılmış hareket tercihlerini ve düşük güçlü cihazları test edin. Her efektin her erişilebilirlik gereksinimine otomatik olarak uygun olduğunu varsaymayın.