Tailwind Motion
Performans ve erişilebilirliğe odaklanan, UI uygulamalarını hareket efektleriyle zenginleştiren yeni ve basit sözdizimli bir animasyon kütüphanesi.
Sal, web öğeleriniz görünür alana girdiğinde dinamik animasyonlar eklemeyi kolaylaştıran, performansa odaklı ve hafif bir kaydırma animasyonu kütüphanesidir. 2.8 kb'den küçük paket boyutuyla hiçbir bağımlılık olmadan çalışır ve kullanıcı deneyimini yalın tutar.
Intersection Observer API ile geliştirilen Sal, öğelerin ekranda görünür hâle geldiğini verimli biçimde algılar ve buna göre animasyonları tetikler. Bu API, kaydırma olaylarını izlemenin getirdiği yükü önemli ölçüde azaltarak en iyi performansı sağlar.
Entegrasyonu kolaydır: HTML öğelerine `data-sal` niteliği ekleyerek istediğiniz animasyon efektini belirtebilirsiniz. Süre, gecikme ve hız eğrisi gibi seçenekleri ek veri nitelikleri veya CSS değişkenleriyle özelleştirerek animasyon davranışını tamamen denetleyebilirsiniz. Desteklenen animasyonlar arasında solma, kaydırma, yakınlaştırma ve çevirme efektleri bulunur.
Sal ayrıca başlatıldıktan sonra seçenekleri değiştirme olanağı gibi gelişmiş özellikler sunar; böylece kullanıcı etkileşimine göre uyarlanabilir. Öğeler görünür alana girdiğinde veya bu alandan çıktığında çalışacak olay dinleyicilerini desteklediğinden, kullanıcı kaydırma hareketlerine gerçek zamanlı geri bildirim gerektiren etkileşimli uygulamalar için uygundur.
Özellikler
- Hafif (2.8 kb'den küçük)
- Bağımlılık gerektirmez
- Görünürlükle tetiklenen kaydırma animasyonları
- Intersection Observer API tabanlı
- HTML ile kolay entegrasyon
- Birden fazla animasyon efektini destekler
- Süre, gecikme ve hız eğrisi seçenekleri özelleştirilebilir
- Görünür alana girme ve çıkma olayları
- Özel özellikler için CSS değişkenlerini destekler
- Başlatma sonrasında seçenekleri sıfırlama ve güncelleme olanağı
İlgili öğeler
anime.js
Bu animasyon kitaplığı, esnekliği kullanım kolaylığıyla birleştirerek web uygulamaları için ilgi çekici animasyonlar oluşturmayı kolaylaştırır.
GSAP
Bu animasyon aracı, standart geçişlerin ötesine geçerek kullanıcı deneyimini iyileştiren ilgi çekici animasyonlar ve etkileşimler oluşturmanızı kolayca sağlar.
Motion One
Yerel tarayıcı API'leri üzerine kurulu, yüksek performans ve küçük dosya boyutu sunan modern bir web animasyon kütüphanesi.
React Spring
Bu animasyon çözümü, her arayüze canlılık katan akıcı ve yüksek performanslı geçişler sunarak kullanıcı deneyimini sorunsuzca iyileştirir.
AutoAnimate
Etkileyici animasyonlarla web uygulamalarınızı zahmetsizce geliştirin.
Framer Motion
React uygulamalarınızda minimum çabayla etkileyici animasyonlar oluşturmanızı sağlayan güçlü bir araç.
Glaze
Minimum kodla animasyon oluşturmak için GSAP üzerine kurulu, yardımcı sınıf tabanlı bir animasyon framework'ü.