[English] - [Türkçe]

Hakkında

cssAnimate.js, animate.min.css dosyası ile parallel bir şekilde çalışabilen basit bir animasyon Jquery eklentisidir. İsteyen herkes geliştirmede katkıda bulunabilir.

Kim Yaptı ?

Hamza EMRE tarafından 28 Ağustos 2015'te gece geç saatlerde Kahve eşliğinde hazırlanmıştır.

Tarayıcı Desteği

cssAnimate.js, jQuery ile geliştirildiği için kütüphane hangi tarayıcıları destekliyor ise onlarla uyumlu çalışmaktadır.

Nasıl Kullanılır ?

cssAnimate.js, eklentisini çalıştırmak için öncelikle Jquery ve Css dosyalarımızı sayfamıza dahil edelim.
Örneğin:

< script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js">
< script type="text/javascript" src="js/cssAnimate.min.js">
< link href="css/animate.min.css" rel="stylesheet">
Dosyalarımızı sayfalarımıza dahil ettikten sonra aşağıdaki örnek uygulamaları kullanmaya başlayabiliriz.

Yorumlar

Parametreler

effect

ZORUNLU DEĞİL

Efekt tipini belirlemenizi sağlar.
Varsayılan değer: bounce
Alabileceği değerler: Bakınız: https://daneden.github.io/animate.css/

$(function() {
    $('#div_name').cssanimate({
        effect: bounce
    });
});

infinite

ZORUNLU DEĞİL

Animasyonun sürekli çalışıp çalışmayacağını belirler.
Varsayılan değer: false
Alabileceği değerler: true, false

$(function() {
    $('#div_name').cssanimate({
        infinite: false
    });
});

action

ZORUNLU DEĞİL

Animasyonun nasıl çalışabileceğini belirler.
Varsayılan değer: none
Alabileceği değerler: none, click, mouseenter, dblclick, mouseover, mousemove

$(function() {
    $('#div_name').cssanimate({
        action: none
    });
});

debug

KISMEN ZORUNLU

Eklentiyi çalıştırırken, hata var ise uyarı verir.
Varsayılan değer: false
Alabileceği değerler: false, true

$(function() {
    $('#div_name').cssanimate({
        debug: false
    });
});

autocolor

ZORUNLU DEĞİL

Rastgele renk üretir. Her animasyon işlenmesinde farklı renk türetebilir.
Varsayılan değer: false
Alabileceği değerler: false, true

$(function() {
    $('#div_name').cssanimate({
        autocolor: false
    });
});

duration

ZORUNLU DEĞİL

Animasyon uygulanan nesnede ne tür css tanımlı ise belirtilen süre içerisinde işlem yapar.
Varsayılan değer: 5
Alabileceği değerler: sayısal değer

$(function() {
    $('#div_name').cssanimate({
        duration: 5
    });
});

Basit Örnek

Kalp resmine tıkladığınız zaman sonsuz animasyon başlar.

$('#heartImage').cssanimate({
    effect: "pulse",
    infinite: true,
    action: "click"
});

Diğer Örnekler

Diğer örnekleri incelemek için diğer döküman sayfamıza gidebilirsiniz.

Örnek Animasyonlar

Örneklerde Kullanılan Malzemeler

Örnekler için kullandığımız malzeme listesine göz atabilirsiniz.

cssAnimate.js - animate.min.css - İconFinder - Jquery (son sürüm) -