Animasyonları Ayarlama
Slidde.co, web öğelerinize standart CSS keyframe animasyonlarını kolayca uygulamanıza olanak tanır. İşte başlamanıza yardımcı olacak adım adım bir kılavuz.
Kenar çubuğundaki Animasyon Seçeneği
- Bir Öğeyi Seçin: Sayfanızdaki herhangi bir öğeye tıklayın.
- Animasyon Modülünü Açın: Sağ kenar çubuğunda, Animasyonlar sekme düğmesine tıklayın, Animasyon seçeneğini bulacaksınız. Bir modül penceresi açmak için üzerine tıklayın.
- Ön Ayarlarla Başlayın: İhtiyaçlarınıza göre daha sonra değiştirebileceğiniz ön ayar animasyonlarıyla başlamanızı öneririz. Bir ön ayar ile değiştirmek için ön ayar düğmelerine tıklayabilirsiniz. Düğmedeki artı simgesine tıklarsanız, ön ayar mevcut animasyona eklenir.
Animasyonları Özelleştirme
Animasyon modülü, CSS keyframe animasyonlarını düşük kodlu bir arayüze ayarlama sürecini basitleştirir, bu da kodlama bilginiz olmasa bile erişilebilir hale getirir.
Keyframe animasyonları, belirli yüzdeler için CSS özelliklerini tanımladığınız yerdir. Ve tarayıcı geçişi sizin için yönetir.
Örneğin, 4 saniyelik bir süreye sahip böyle bir keyframe'leriniz varsa.
0% translateX(0)
50% translateX(-20px)
100% trasnlateX(0)
Nesne, 2 saniye boyunca aşağıya doğru 20px hareket edecek, ardından 2 saniye boyunca yukarıya doğru orijinal konumuna geri dönecektir.
Herhangi bir sorunla karşılaşırsanız veya keyframe animasyonları hakkında daha fazla bilgi edinmek isterseniz:
- Çevrimiçi Arama Yapın: Spesifik sorularınızı Google'da arayın; birçok örnek ve kaynak mevcuttur.
- CSS Keyframes Eğitimi: Kapsamlı bilgi için resmi MDN'deki CSS keyframes kılavuzuna başvurun.
Tetikleyici
Bu alan, animasyonun ne zaman oynatılacağını kontrol eder.
- Gösterilen eleman: Bu varsayılan olanıdır. Animasyon, eleman görünüm alanına kaydırıldığında veya içeren bölüm gösterildiğinde tetiklenecektir Hash bölümü
- Gösterilen eleman (her seferinde tekrar et): Yukarıdakiyle aynı, ancak animasyon her gösterildiğinde tekrar oynatılacaktır.
- Sayfa yüklendi: Animasyon, sayfa yüklendiğinde tetiklenecektir.
Hedef(ler)
Genellikle bunu ayarlamanıza gerek yoktur. Varsayılan değer & olup, kök elemanı ifade eder.
Ancak, bazı durumlarda bunu ayarlamanız gerekecektir.
Gelişmiş arka plan elemanını animasyon yapmak için, Hedef(ler) değerini İlk çocuk eleman olarak ayarlayabilirsiniz, çünkü Gelişmiş arka plan elemanı her zaman kök elemanın ilk çocuğu olacaktır.
Tüm çocuk elemanlara bir gecikme uygulamak için. Daha fazla ayrıntı için Gecikme & gecikmeli gecikme bölümüne bakın.
Gecikme & gecikmeli gecikme
Gecikme değerini 1000ms olarak ayarlarsanız, animasyon 1000ms bekledikten sonra oynatılacaktır.
Gecikme değerini 50ms olarak ayarlayıp hedefleri Tüm doğrudan çocuk eleman(lar) olarak ayarlarsanız. Animasyon her bir doğrudan çocuk eleman üzerinde uygulanacak ve bekleyecektir
- birinci eleman, 1000ms,
- ikinci eleman, 1050ms,
- üçüncü eleman, 1100ms,
- ...
Metin gecikmesi
Bu, bir Metin bileşeni için çalışır.
Gecikme ayarlayıp hedefleri Tüm harf(ler) olarak ayarlarsanız. Gecikme efekti her bir harfe uygulanacaktır.
css animation özelliğini kullanın
Düz bir css animasyonu her zaman CSS içindeki tüm elemanlar için kullanılabilir. Ancak, düzenleyicide daha kolay düzenleme yapmak için belirli css kuralı için Disable in canvas seçeneğini açmanız gerekebilir.