Shift.css ile Tamamen Hareketli Widget'lar Oluşturun

Web animasyonu bir yol sunar insanların dikkatini çekmek ve onları daha fazla çekmek bir web sitesine Orada birçok araç var. ücretsiz animasyonlar oluştur fakat Shift.css gruptaki en yenilerden biri.

Bu bir ücretsiz açık kaynaklı çerçeve oluşturmak için yapılmış herhangi bir kapsayıcı içindeki dinamik animasyonlar. Ve bu animasyonlar tek bir sıraya kilitlenmemiş. Aslında için özel animasyonlar oluşturabilirsiniz. her eleman blokta ve bunları uygulayın belirli bir sırada.

Shift demo sayfası sana kelimelerle açıklayabileceğimden daha iyi gösterebilir.

Dikkat edeceğiniz bir şey, kabın içindeki her öğenin ayrı bir HTML elemanı. Bir SVG veya görüntü ya da her neyse, her şeyi ayrı ayrı canlandırabilirsiniz kendi özel animasyon efektini oluştur.

Kütüphane iki dosya ile geliyor .css ve .js Kütüphane ve her ikisi de olması gerekir Belge başınıza eklendi.

Bu proje için GitHub deposu bulamıyorum, bu nedenle dosyaları doğrudan indir Shift.css web sitesinden.

Bir sonraki adım bir konteyner elemanı tanımlamak bazı içeriklerle. Sınıf isimleri önemlidir, bu yüzden her animasyon elemanının yapması gerekenler sınıfa sahip olmak .Vites değiştirme eleman uygulamalı.

Bu derslerin yanı sıra HTML5 veri özellikleri ekle Animasyonun nasıl çalıştığını tanımlamak için. Şu an sadece üç tane var ama tam animasyon efektini kişiselleştirmek için yeterli olmalılar.

1. Veri animasyon: Animasyonun adı
2. veri gecikmesi: Animasyon başlamadan önceki toplam gecikme (saniye olarak)
3. Veri süreli: Animasyonun toplam uzunluğu (saniye cinsinden)

Animasyon adı bir önceden tanımlanmış animasyon Shift kütüphanesi için yaratılmıştır. Şu anda var Aralarından seçim yapabileceğiniz 15 animasyon adı. Onları Shift.css ana sayfasının altında listelenmiş olarak görebilirsiniz..

Sadece kopyala yapıştır ne istersen animasyon adı ayarına ve gitmek için iyi olmalısın! Mesela ben çıkış fade animasyonu kullanmak isteseydim eklerdim veri animasyon = "shift_exitFade" hangi öğeye olursa olsun, bu şekilde canlandırması gereken bir veri niteliği olarak. Basit.

Geliştiricilerin yerleşim ve özellikler üzerinde daha fazla denetime sahip olmalarını sağlayacağı için bu kütüphanenin JavaScript'te daha fazla seçenek içermesini diliyorum. Ancak basit (ve ücretsiz) bir animasyon çerçevesi için şikayet edemem.

Shift.css için mükemmel daha yeni geliştiriciler kim oluşturmak ister daha karmaşık animasyon stilleri sıfırdan kod yazmadan.