.webp)
Yazı Numarası22
Bugün sizlere Animated CSS kullanımı hakkında bilgi vereceğim. Sitenizde yazıların özellikle başlıkların güzel animasyonlarla gelmesi göze daha cazip gelecektir. İlk önce animated.css için buradaki siteye giriyoruz. Birbirinden farkı bir çok animasyon barındıran sitede kendinize uygun güzel animasyonlar bulabilirsiniz. Kullanımına gelelim, İlk önce sitemize animated.css kodlarını eklememiz lazım. Bunun için 2 yol var;
link rel="stylesheet" type="text/css" href="css/animate.css"
Siteden indirdiğimiz dosyayı kök klasörümüze atıyoruz isterseniz css klasörünüzün içine atabilirsiniz. href ile dosya yolumuzu gösteriyoruz.
link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax /libs/animate.css/3.5.2/animate.min.css"
2.yol ise dosyayı indirmeden direkt olarak siteden çekebilirsiniz. Onun içinde yukarıdaki kodu kullanıyoruz.Kullanımı ise şöyle oluyor;
ornek animated pulse
yazımızın class etiketine gelip sonuna animated "animasyon ismi" eklediğimizde animasyon çalışacaktır. Ancak eğer bu animasyonları böyle kullanırsak sayfa yüklendiğinde direkt olarak animasyonlar çalışır. Eğer kullanıcı fareyle aşağı tarafa indiği zaman tam o noktada animasyonların çalışmasını istiyorsak o zaman wow kullanmamız gerekir. Önce wow scriptini kodumuza ekliyoruz.
wow = new WOW(
{
animateClass: 'animated',
offset: 100,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
}
);
wow.init();
document.getElementById('moar').onclick = function() {
var section = document.createElement('section');
section.className = 'section--purple wow fadeInDown';
this.parentNode.insertBefore(section, this);
};
{
animateClass: 'animated',
offset: 100,
callback: function(box) {
console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
}
}
);
wow.init();
document.getElementById('moar').onclick = function() {
var section = document.createElement('section');
section.className = 'section--purple wow fadeInDown';
this.parentNode.insertBefore(section, this);
};
Kullanımı ise;
"title wow flipInX" data-wow-delay="0s"
İyi günler :)
Yorum Bırakın
Yorum yapmak için lütfen giriş yapınız.Yazı Videosu Yok
Benzer Yazılar
.jpg)
