- Katılım
- 10 Ocak 2009
- Konular
- 3,748
- Mesajlar
- 15,940
- Çözüm
- 334
- Online süresi
- 6mo 28d
- Reaksiyon Skoru
- 8,035
- Altın Konu
- 947
- Başarım Puanı
- 474
- Yaş
- 34
- MmoLira
- 86,735
- DevLira
- -12
HERAKLES Otomatik Avlı kalıcı sunucu. 19 Haziran'da açılıyor. Atius & Wizard güvencesiyle hemen kayıt ol, ön kayıt ödülleri aktif. HEMEN TIKLA!
CSS, web Geliştirmeçok daha ilginç ve zorlu. Bu özelliklerden biri CSS3 animasyon efektleridir . CSS3'ten önce, bir animasyon oluşturmak için yalnızcaJavascript. Ama şimdi CSS3 ile kolayca oluşturabilirsiniz.
Size iyi bir şekilde yürüdük öğreticiarasında CSS3 ile Bounce Etkisi oluşturarak daha önce ve bu yazı içinde bunu size müthiş bir kütüphane tanıtacak iradeanimasyon yapCSS3 ile oluşturma daha da kolay: Animate.css .
Animate.css, CSS3 animasyon efektlerinin kullanıma hazır bir kitaplık koleksiyonudur . Bu kütüphane size çoğu üzerinde tutarlı bir şekilde çalışan 50'den fazla farklı animasyon efekti sağlar.tarayıcılar CSS3 desteği ile.
Daha sonra animasyonu metninize, resminize, formunuza vb. Uygulayabilirsiniz. Ayrıca bu kütüphaneyi kullanan birçok harika site var; Web'deki en iyi CSS 3D düzenleyici olan Tridiv bunlardan biridir.
Size iyi bir şekilde yürüdük öğreticiarasında CSS3 ile Bounce Etkisi oluşturarak daha önce ve bu yazı içinde bunu size müthiş bir kütüphane tanıtacak iradeanimasyon yapCSS3 ile oluşturma daha da kolay: Animate.css .
Animate.css, CSS3 animasyon efektlerinin kullanıma hazır bir kitaplık koleksiyonudur . Bu kütüphane size çoğu üzerinde tutarlı bir şekilde çalışan 50'den fazla farklı animasyon efekti sağlar.tarayıcılar CSS3 desteği ile.
Daha sonra animasyonu metninize, resminize, formunuza vb. Uygulayabilirsiniz. Ayrıca bu kütüphaneyi kullanan birçok harika site var; Web'deki en iyi CSS 3D düzenleyici olan Tridiv bunlardan biridir.
Başlarken
Animate.css ile tek yapmanız gereken , öğelerinize uygun sınıfları dahil etmektir . Başlamak için önce animate.css dosyasını kafaya ekleyin . Kütüphanenin tamamını Github
Varsayılan olarak Animate.css , ilk sayfa yüklendiğinde yalnızca bir kez animasyon uygular . Daha sonra statik kalacaktır. Animasyonu kontrol edebilmek için küçük bir Javascript'e ihtiyacımız olacak. Bu konuda, projeye böyle bir jQuery ekleyeceğiz .
[CODE lang="css" title="Kod"]<head>
...
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>[/CODE]
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
indirebilirsiniz .Varsayılan olarak Animate.css , ilk sayfa yüklendiğinde yalnızca bir kez animasyon uygular . Daha sonra statik kalacaktır. Animasyonu kontrol edebilmek için küçük bir Javascript'e ihtiyacımız olacak. Bu konuda, projeye böyle bir jQuery ekleyeceğiz .
[CODE lang="css" title="Kod"]<head>
...
<link rel="stylesheet" type="text/css" media="all" href="css/animate.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
...
</head>[/CODE]
HTML Biçimlendirmesi
Animasyonu uygulamak için .animated, animasyon adı ile birlikte canlandırmak istediğiniz öğeye sınıf eklemeniz gerekir .
CSS:
<div class="option animated wobble">This text will animate.</div>
Animasyon yalnızca sayfa yüklenirken uygulanacaktır, bu nedenle animasyonu bir olay tetikleyicisine uygulamak için Javascript kullanmanız gerekebilir. Ayrıca ihtiyaçlarınıza göre özelleştirilebilir.
Animasyonu uygulamak için .animated, animasyon adı ile birlikte canlandırmak istediğiniz öğeye sınıf eklemeniz gerekir .
CSS:
<div class="option animated wobble">This text will animate.</div>Animasyon yalnızca sayfa yüklenirken uygulanacaktır, bu nedenle animasyonu bir olay tetikleyicisine uygulamak için Javascript kullanmanız gerekebilir. Ayrıca ihtiyaçlarınıza göre özelleştirilebilir.
Ek CSS Seçenekleri
Daha önce tanımladığımız animasyon yalnızca bir kez ve önceden tanımlanmış bir süre ve gecikme süresinde döngü oluşturacaktır. Daha fazla döngüye veya farklı bir süre veya gecikme süresine ihtiyacınız varsa, bunu nasıl özelleştireceğiniz aşağıda açıklanmıştır.
Animasyonun birden çok kez veya hatta sonsuz döngüye girmesine izin vermek için animation-iteration-countözniteliği kullanabilirsiniz . Webkit, moz, vb. Gibi geçerli satıcı öneklerini de eklediğinizden emin olun. Bunu sonsuz yapmak için, ardından infinitedeğer olarak ekleyin .
Yalnızca birkaç kez döngüye ihtiyacınız varsa, değeri istediğiniz döngü sayısıyla girin.
[CODE lang="css" title="Kod"]-vendor-animation-iteration-count: infinite | <number>;[/CODE]
Süreyi özelleştirmek için kullanılacak uygun özellik animation-duration; ve animation-delay gecikme kontrolü içindir. Aşağıda örnek bir seçenek kodu verilmiştir.
[CODE lang="css" title="Kod"].option {
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}[/CODE]
Animasyonun birden çok kez veya hatta sonsuz döngüye girmesine izin vermek için animation-iteration-countözniteliği kullanabilirsiniz . Webkit, moz, vb. Gibi geçerli satıcı öneklerini de eklediğinizden emin olun. Bunu sonsuz yapmak için, ardından infinitedeğer olarak ekleyin .
Yalnızca birkaç kez döngüye ihtiyacınız varsa, değeri istediğiniz döngü sayısıyla girin.
[CODE lang="css" title="Kod"]-vendor-animation-iteration-count: infinite | <number>;[/CODE]
Süreyi özelleştirmek için kullanılacak uygun özellik animation-duration; ve animation-delay gecikme kontrolü içindir. Aşağıda örnek bir seçenek kodu verilmiştir.
[CODE lang="css" title="Kod"].option {
-webkit-animation-duration: 3s;
-webkit-animation-delay: 2s;
-webkit-animation-iteration-count: 5;
}[/CODE]
Javascript Kontrolü
Animasyon durumu üzerinde daha fazla kontrol için, Javascript'ten biraz yardıma ihtiyacımız var. Bir tıklama üzerine bir animasyonu tetikleyecek bir metin bağlantısı istediğimizi varsayalım. Öncelikle bağlantıya böyle bir referans eklememiz gerekiyor.
[CODE lang="css" title="Kod"]<div class="demo animated">
<p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>[/CODE]
İşlevi kullanmak için clickbağlantı referansını buna ekleyin.
Javascript ile animasyon adını tanımlayabilirsiniz. Bir animatefonksiyon oluşturarak ve element sınıfıyla birlikte animasyonu adlandırarak bir yaklaşım kullanacağız (yukarıdaki kodda, demoniteliği ekledik ).
Ve Javascript kodu aşağıdaki gibi olacaktır.
[CODE lang="css" title="Kod"]<script language="javascript">
$(function() {
$("#ref").click(function() {
animate(".demo", 'bounce');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>[/CODE]
Gerçekten de animasyon efekti, sitenizi daha çekici hale getirmenin en iyi yollarından biridir, ancak aşırıya kaçmamayı unutmayın.
[CODE lang="css" title="Kod"]<div class="demo animated">
<p>This text will animate. <a href="" id="ref">Click to animate!</a></p>
</div>[/CODE]
İşlevi kullanmak için clickbağlantı referansını buna ekleyin.
Javascript ile animasyon adını tanımlayabilirsiniz. Bir animatefonksiyon oluşturarak ve element sınıfıyla birlikte animasyonu adlandırarak bir yaklaşım kullanacağız (yukarıdaki kodda, demoniteliği ekledik ).
Ve Javascript kodu aşağıdaki gibi olacaktır.
[CODE lang="css" title="Kod"]<script language="javascript">
$(function() {
$("#ref").click(function() {
animate(".demo", 'bounce');
return false;
});
});
function animate(element_ID, animation) {
$(element_ID).addClass(animation);
var wait = window.setTimeout( function(){
$(element_ID).removeClass(animation)}, 1300
);
}
</script>[/CODE]
Gerçekten de animasyon efekti, sitenizi daha çekici hale getirmenin en iyi yollarından biridir, ancak aşırıya kaçmamayı unutmayın.
