Animasyonları Ayarlama
Slidde.co, web elemanlarınıza 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 Eleman Seçin: Sayfanızdaki herhangi bir elemana tıklayın.
- Animasyon Modülünü Açın: Sağ kenar çubuğunda, en altta Animasyon seçeneğini bulacaksınız. Bir modül penceresi açmak için üzerine tıklayın.
Hazır Animasyonları Kullanma
- Hazırlarla Başlayın: İhtiyaçlarınıza göre değiştirebileceğiniz hazır animasyonlarla başlamanızı öneririz.
- Daha Fazla Hazır Bulun: Animate.css adresinde bir dizi hazır animasyon bulabilirsiniz. Belirli bir animasyona ihtiyacınız varsa, bize bildirin, listeye ekleyebiliriz.
Animasyonları Özelleştirme
Animasyon modülü, CSS keyframe animasyonlarını düşük kodlu bir arayüze dönüştürerek, kodlama bilginiz olmasa bile erişilebilir hale getirir.
Keyframe animasyonları, belirli yüzdeler için CSS özelliklerini tanımladığınız yerdir. Tarayıcı, geçişi sizin için yönetir.
Örneğin, 4 saniyelik bir süreye sahip böyle bir keyframe 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: Belirli 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.
Alt Elemanları Animasyon Yapma
Targets ayarını &>* olarak ayarlayarak kök elemanın alt elemanlarını hedefleyebilirsiniz.
Gecikme Efekti
Gecikmeyi aşağıdaki değerlere değiştirirseniz, bir gecikme efekti uygulanacaktır.
targets: &>*
delay: anime.stagger(100) // her bir eleman için gecikmeyi 100ms artırır.
targets: &>*
delay: anime.stagger(100, {start: 500}) // gecikme 500ms'de başlar ve her bir eleman için 100ms artar.
Daha fazla örnek için lütfen buraya bakın Gecikme Temelleri
Metin Gecikmesi
Bu, bir Metin bileşeni için çalışır.
Hedefleri "Tüm harfler" (& .letter) olarak ayarlarsanız, gecikme efekti her bir harfe uygulanacaktır.
CSS animation Özelliğini Kullanma
Düz bir css animasyonu, Özel stiller içindeki tüm elemanlar için her zaman kullanılabilir. Ancak, düzenleyicide daha kolay düzenleme yapmak için belirli css kuralı için Tuvalde Devre Dışı Bırak seçeneğini açmanız gerekebilir.