CascadeJS ile Kolayca Basamaklı Efektler Oluşturun

Fantezi animasyonlar web üzerinde bir düzine vardır. Tonlarca inanılmazlıkla yaratmaları daha kolay hale geliyor animasyon kütüphaneleri.

Cascade.js listeye eklemek için bir kütüphane daha ve kesinlikle eşsiz bir kitap. Cascade ile, kullanarak özel animasyon efektleri tasarlayabilirsiniz. basamaklı harfler metin içinde veya basamaklı öğeler bir ana kapta.

Bu kütüphane var bağımlılık yok; Klasik JavaScript ile çalışır. Npm, Bower veya doğrudan GitHub'dan bir kopya indirerek yükleyebilirsiniz..

CascadeJS'i çalıştırmak için, iki dosyaya ihtiyacım var: bir CSS dosyası ve bir JavaScript dosyası. İkisi de paketlenmiş olarak geliyor küçültülmüş sürümler sayfa boyutunda birkaç KB tasarruf etmek için.

Her Cascade elemanı ayrı parçalara bölünür; ayrı ayrı canlandırmak vasitasiyla elementler. Bunlar dinamik olarak eklendi, böylece HTML'nizde hiçbir şeyi değiştirmenize gerek kalmaz.

Ama, ihtiyacınız olacak kurmak akış() fonksiyon Dosyanızda, hangi öğeyi hedefledikten sonra canlandırmak istediğiniz.

Aslında yapabilirsin jQuery kullanın İsterseniz bu kütüphane ile gerekli değil. Eğer jQuery ile eleman seçmeyi tercih ederseniz, bunun yerine kullanmaktan çekinmeyin..

İşte bir vanilya pasajı JavaScript ana sitenin demosundan:

Geçebilirsin akış() eleman parametre yok, ya da yapabilirsin hepsini yapılandır kendin. Alır sekiz isteğe bağlı parametre animasyon stilini, zamanlamasını, süresini ve isteğe bağlı CSS sınıflarını düzenlemek için.

CascadeJS adlı başka bir işleve sahiptir. fragmanı () hangisi seni sağlar Harfleri (veya elemanları) ayır canlandırmadan, ayrı kaplara yerleştirin. Bu işlevi kullanabilirsiniz. renkli ve restyle metin Sayfadaki her bir harfi bir sözcükle hedefleyerek. Oldukça havalı, doğru?

Herşey kod örnekleri ana kütüphane sayfasında açık bir şekilde bulunmaktadır, böylece kendi başınıza kopyala / yapıştır ve tamir yapabilirsiniz. Ancak, aynı zamanda belgeleme GitHub sayfasında, başlamak için daha net bir yol arıyorsanız.