Projelerinize farklı efektler ile farklı bir hava getirecek birçok CSS3 animasyon özellikleri var.Bu yazımda bunların toplanıp bir yapı haline getirilmiş şeklini paylaşacağım.
Öncelikle yazının sonunda indireceğimiz css dosyasını projemize çağrıyoruz.
Daha sonra javascript fonksiyonlarını projemize dahil ediyoruz.
Son olarak animasyonun işlev göreceği yeri kaplayan elemente aşağıda ki id ve class değerlerini veriyoruz.
Animasyon işlev göreci içerik
Gerekli işlemleri yaptığımıza göre nasıl kullanılır bunu görelim.Öncelikle birçok animasyon çeşiti var.Benim yukarıda verdiğim kodlarda FadeIn özelliği kullanılmış durumda.
FadeIn yerini değiştirerek aşağıda ki diğer özellikleride görebilirsiniz.
- slideDown
- slideUp
- slideLeft
- slideRight
- slideExpandUp
- expandUp
- fadeIn
- expandOpen
- bigEntrance
- hatch
- bounce
- pulse
- floating
- pullUp
- pullDown
- stretchLeft
- stretchRight
Bu efektleri dilediğiniz şekilde kullanabilirsiniz.İster hover ister focus ister onload durumunda.
NEREDEN İNDİREBİLİRİM?
Son olarak bu yapıyı hazırlayan Justin Aguilar'a teşekkür ediyorum.Buradan kaynağı inceleyebilirsiniz.
