Blogumu gören hemen herkesin sorduğu ilk şey headerdeki kayan bulutlar.
Bu konuda sizlere kayan bulutlarımızın nasıl yapıldığını anlatmaya çalışacağım.Evvela bulut resmimizi bir indirelim
Ardından temamızda (wp-content/themes/tema isminiz/header.php) Header.php'yi (editörde üst Kısım diye geçer) açıp (eğer edilmemişse) Jquery'nin son versiyonunu sayfamıza dahil ediyoruz.Ama bu işlemi şimdilik atlamanızı öneririm çünkü güncel tüm temalarda zaten jquery'den yararlanıldığı için dosyayı 2 kere çağırmanız durumunda hata oluşacaktır.
[Bu bölüme en son göz atın] Eğer Bütün işlemlerden sonra "Jquery is not defined" Hatası Alırsanız :
Jquery'nin Sitesinden sayfanın en altına inin ve Js dosyasının yolunu alın
Jquery ile ilgili bir sorununuzun olmadığını farz ederek , bulut divini oluşturmaya geçiyoruz.Header'e (ya da bulutunuzu nerde istiyorsanız) oraya
Kod:
<div class="bulut"></div>sözdizimini ekleyin.Bu şekilde stil dosyamızdan class'ı bulut olan elemente ulaşabileceğiz.
Sıra stil dosyamızda.Benim css kodlarım bu şekilde.siz margin değerlerini temanızın yerleşimine göre ayarlayabilirsiniz.Ama unutmayın ki oluşturduğunuz div'in classı bulut olmak zorundadır.
Kod:
.bulut{
background:url('bulut.png') repeat-x;
height:84px;
margin-top: -10px;
margin-bottom:-20px;
margin-right:auto;
margin-left:auto;
}Bulutlarımızı meydana getirdik , şimdi biraz hareket katalım.Aşağıdaki kodu kopyalayıp header'deki <head></head> tagları arasına yapıştırıyoruz.
Kod:
jQuery(document).ready(function ($) {
function bulutMove(){
$(".bulut").css('backgroundPosition',"+=1");
}
var Cradex = setInterval(bulutMove,30);
});Kayan bulutları oluşturmak bu kadar.setInterval fonksiyonunda 2.parametreyi (30'u) değiştirerek bulutların hızını ayarlayabilirsiniz.
<<Kaynak ve Sormak İstedikleriniz>>