Sitenizi görsel anlamda ilgi çekici hale getirmek için sitenizde animations efektler verebilirsiniz. bazı sitelerde muhakka görmüşünüzdür kimisinin logosunda siteye girdiğimiz zaman logosu sağdan veya soldan gelir kimisi yukardan aşağı inerek karşımıza çıkıyor.
Ben size kendi sitemde uyguladığım kodları gösteriğim. uyguladığım kod aşağıdadır. Mavi kısımda belirttiğim alana siz hangi eklentiye efekt vermek istiyorsanız o eklentinin ismini yazıyorsunuz. örnek olarak sidebar kullanıcaksınız. siz bu alanı #sidebar-wrapper veya bazılarında .sidebar-wrapper olarakta geçebilir. daha farklıda olabilir yada post alanı için kullanmak istiyorsanız. o mavi alanı .post olarak değiştirmeniz gerekiyor
css kodu bukadardır başka bi işlem yapmanıza gerek kalmıyor.
Bu efekler sitenizde herhangi bir kasma veya zorlanma yaratmaz çünki ekliceğimiz kod çok kısa javascript gerektirmiyor sadece css olarak eklememiz yeterli olacaktır.
Blogger şablonumuz genişletip ]]></b:skin> burdaki kodu bulup aşağıdaki kodları hemen üstüne eklemeniz hepsi bu kadar.
2 ci olarak verdiğim adresteki kodları alıp sadece aşağıdaki kodları değiştirin yeşil olanları yani üstekiler sabit kalcak ve birde sadece animations efek isimleri değişceksiniz.ben örnek olarak ( fadeInDown ) kullanmışım siteye girdiğiniz zaman efekt isimleri görürsünüz zaten
@keyframes fadeInDown {
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}
#content-wrapper { animation : fadeInDown 3s; }
@-webkit-keyframes fadeInDown{
0%{opacity:0;-webkit-transform:translateY(-20px)}
100%{opacity:1;-webkit-transform:translateY(0)}
}
@-moz-keyframes fadeInDown{
0%{opacity:0;-moz-transform:translateY(-20px)}
100%{opacity:1;-moz-transform:translateY(0)}
}
@keyframes fadeInDown{
0%{opacity:0;transform:translateY(-20px)}
100%{opacity:1;transform:translateY(0)}
}
.fadeInDown{
-webkit-animation-name:fadeInDown;
-moz-animation-name:fadeInDown;
animation-name:fadeInDown
}
Sizin değiştirmeniz gereken yerler aşağıdada verdiğim adresteki 2 ci olanda o siteye girdiğiniz zaman yukarda`da resimde belirttiğim alanlar kopyalacaksınız sadece .
Diğer efektler içinde yine aynı işlemi yapıcaksınız.
1. Animation efek isminin nasıl göründüğünü test etmek için bu siteyi inceleyin.
http://daneden.github.io/animate.css/
2. Animation efek css kodları eklemek için burdaki siteden kodları alıcaksınız.
https://dl.dropboxusercontent.com/s/jz1hh3xb6dl7nn3/animation.css
0 yorum: