AniJS Nedir ve Nasıl Kullanılır ?

AniJS Nedir ve Nasıl Kullanılır ?

AniJS kolayca CCS3 animasyonları ve UI Component’leri hazırlamanızı sağlar.http://anijs.github.io/ adresinden AniJS’nin resmi sayfasına ulaşabilirsiniz.

Uygulama metodu şu şekildedir:

IF (), ON(), DO(),TO()

IF tanımında ; olay yöneticisi belirtilir.Mesela;click,scrol,mouseover…Olayların tam listesine https://developer.mozilla.org/en-US/docs/Web/Events adresinden bakabilirsiniz.

ON tanımında;CSS seçicisi belirtilir.Mesela;body,header,footer, .icerik…

DO tanımında;efekt türü belirtilir.Mesela;flash,tada,shake,fadeIn,bounce…Efektlerin tam listesine ve etkilerini önizlemek için http://daneden.github.io/animate.css/ adresini ziyaret edebilirsiniz.

TO tanımında ;etkinin nereye kadar olacağı belirtilir.Mesela önceki element,sonraki element veya ismi verilen bir element gibi olabilir.

http://anijs.github.io/#installing adresinden AniJS’yi  yükleyebilirsiniz.

Ani.JS’nin uygulama kalıbı şöyledir:

JavaScript kütüphanesi sayfaya dahil edilir.


<script src=”anijs-min.js”></script>


CSS animasyon kütüphanesi sayfaya dahil edilir.


<head>

<link rel=”stylesheet”href=”http://anijs.github.io/lib/anicollection.css”>

</head>


Şimdi bir örnek yapalım…


<html lang=”tr”>

<head>

meta charset=”UTF-8″>

<link

rel=”stylesheet” href=”http://anijs.github.io/lib/anicollection/anicollection.css”>

</head>

<body>

<header data-anijs=”if:click,do:flıpInY animated”>

 

<br><br>

buraya tıkla (Yatay Kayan Animasyon)

</header>

<div id=”main data-anijs=”if:mousevoer,do: swing animated”>

< br><br>

MOUSE İLE GEL(Dikey Kayan Animasyon)

</div>

<footer data-anijs=”if’:click,do: hinge animated, to:#main”>

<br><br>

BURAYA TIKLADIĞINDA MAIN ETİKETLİ OLAN YİNE OYNAYACAK

</footer>

<scrpt src=”http://anijs.github.io/lib/anijs/anijs-min.js”>

</script> 

<script

src=”http://anijs.github.io/lib/anijs/helpers/dom/anijs-helper-dom-min.js”>

</script>

</body>

</html>


Kodların yapısını incelediğimizde ilk olarak CCS animasyon kütüphanesinin yüklendiğini görüyorsunuz.Alt kısımda da AniJS için gerekli olan JavaScript dosyası yüklenmiş.

Örnekte üç farklı etiket kullanılmış.

İlkinde sadece kendi etiketi için bir olay ve bir animasyon tamamlanmış.O alana mouse ile tıkladığınızda yatay bir animasyon yapılacak.

İkincisinde ise birinci örnekteki  gibi yapılmışp ama bu sefer main ismi ile bir id tanımlanmış.

Üçüncüde ise ,ikinci etiketin id seçicisine to parametresinde attıfta bulunarak,başka bir etiketin animasyonu sağlanmış.

 

Share this post

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir