Animate.css Kullanımı

Animate.css kullanımı sitelerde çok güzel ve hızlı efektler oluşturmak için önemli bir css ‘ dir. Animate css özellikleri ve kullanımı için hazırlamış olduğumuz yazıda sizelere yarımdımcı olacağız. Videolu ve yazılı olarak animate.css kullanımına geçelim

Animate.css Nasıl İndirebilirim ?

Bu oldukça basit. Sayfadaki ” Github’ta İndir” bağlantısını tıklayın veya animate.css github sayfasını ziyaret etmek için bu bağlantıyı tıklayın . Bir .min.css dosyasının ne olduğunu biliyorsanız, hemen devam edin ve sadece bu sürümü kullanın. Yapmazsanız, kodlama kümesine erişmek için sayfanın ortasındaki animate.css bağlantısına tıklayın.

animasyon-Css ham kodAnimate.css öğesini tıkladıktan sonra, üstte bulunan seçeneklerle başka bir GitHub sayfasına yönlendirilirsiniz. Buradan Raw’ı tıklayın. Bu eklentinin tam kodlama spektrumunu temel metin formatında yükleyecektir. Buradan, bunu animate.css adlı bir dosyaya kopyalayıp yapıştırabilir veya Dosya> Sayfayı Farklı Kaydet’e aktarabilirsiniz.

Açıkçası dosyayı bir daha bilgisayarınıza tekrar bulabileceğin bir yere sakla. Sisteminizde yerel olarak indirilen dosyayla, dosyayı FTP sunucunuza yüklemeye hazırsınız. Bunu nasıl yapacağınızı bilmiyorsanız, sadece… bu eğiticiyi okumayı bırak. Size yardımcı olacak bir sorun yok, ancak bir sunucuya yüklemek, burada ele almadığımız 100 düzey öğelerdir.

Animate.css Siteye Ekleme

Herhangi bir dosyaya (css, js, vb.) Yüklediğinizle aynı, HTML sayfanızın başındaki dosyaya (veya header.php include) bir çağrı yerleştirmek zorundayız.

1
<link rel="stylesheet" href="css/animate.css">

Dürüst olmak gerekirse, bu kadar. Sadece bu aşamadan itibaren, küçük CSS3 animasyonlarından yararlanmaya başlamaya hazırız.

VİDEOLU ŞEKİLDE ANLATIM

 

Örnek Bir Animasyon Ekleme

Animate.css sayfasındaki koda bakmak size hiç yardımcı olmayacaktır. Kodlamaları, veri testi özniteliğini kullanarak tamamen bir javascript kümesiyle işleyecek şekilde kurulur. Hangi, daha önce öğrendiğiniz gibi, hiçbiri size yardımcı olmuyor!

Not: Animasyon, yükseklik ve genişliğe sahip öğelere eklenmelidir. Örneğin, içinde kayan bir öğeye sahip bir <a> etiketine eklenmek çok fazla kullanılmayacaktır. Aslında canlandırmak için bir şey yapmalısınız.

Animasyon eklemek için, sadece öğeye bir sınıf ekleyeceğiz. Yani eğer varsa:

1
<img src="/images/logo.png" />

Sadece “animasyonlu” bir sınıf için bir kaynak özellik ekleyeceğiz ve sonra nesnenin çoğaltılmasını istediğimiz bir etkiyi ekleyeceğiz.

1
<img src="/images/logo.png" class="animated bounce" />

Şimdi, sayfa yüklemesinde, elemanımız, adımında küçük bir geri dönüş ile yüklenecektir.

Sorun yaşıyorsanız, sayfanızın bir kopyasını oluşturun ve onu yıkmaya başlayın. Çalışmamanız gereken tüm öğeleri, en azından bunun en temel formda çalışmasını sağlamak için kaldırın. Hala çalışmıyorsa, site yolu ve daha fazlası gibi şeyleri kontrol etmeye başlamanız gerekir.

Site yolunu kontrol etmenin en kolay yolu, sayfanın kaynağını görmektir. Bu günlerde çoğu tarayıcı, sayfadaki harici dosya referanslarından bağlantılar oluşturacak. Görünüm kaynağı görünümünden animate.css bağlantısına tıklayın. Eğer biz üzerine kopyalanan Ham kodu yerine bir 401 sayfa yüklenirken anlaşıldığından, bu dosya doğru bağlı değildir mümkündür, yoksa yüklemek için unuttum.

Hover / Cliclik Kullanımı

Bizim sayfa yukarı ilk yüklemeden deliler gibi gidiyor istemedikçe, biz ya vurgulu bu animasyonları kontrol etmek veya tıklayın istediğiniz mümkündür. Bir kurulum prosedürünü belgeleyen tam bir video öğreticisinin yanı sıra Jose Browne’nin Çevrimiçi Oyun Alanı’ndakibu orijinal işlevlerini de bulabilirsiniz .

Satır içi işaretleme her zaman en güzeli olmayacak ve içerik, sunum ve işlevsellik arasındaki temel ayrılık kurallarımıza aykırı olacaktır. Jose, özellikle Animate.css entegrasyonu için aşağıdaki 2 fonksiyonu yaratmıştır. Bu komut dosyalarının birini veya her ikisini kopyalayıp sayfanıza yapıştırın; veya her şeyi düzgün bir şekilde organize etmeye çalışıyorsanız, bir scripts.js dosyasına.

Hover’da Animasyonu Başlat

1
2
3
4
5
6
7
8
9
10
11
12
13
function animationHover(element, animation){
    element = $(element);
    element.hover(
        function() {
            element.addClass('animated ' + animation);        
        },
        function(){
            // Sınıfları kaldırmadan önce animasyonun bitmesini bekle
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
        });
}

Tıklamada Animasyonu Başlat

1
2
3
4
5
6
7
8
9
10
11
12
function animationClick(element, animation){
    element = $(element);
    element.click(
        function() {
            element.addClass('animated ' + animation);        
            
// Sınıfları kaldırmadan önce animasyonun bitmesini bekle
            window.setTimeout( function(){
                element.removeClass('animated ' + animation);
            }, 2000);         
 
        });
}

Bu işlevleri çağırmak için biraz jQuery yığını yazmamız gerekecek. Amaç sadece hangi unsurların hangi işlevi gerektirdiğini bilmesidir. Eğer bir grup imaja sahip olsaydık, onlara bir çağrı verirdik ve jQuery aracılığıyla bunu çağırırdık. Bizim durumumuzda, bu animasyonu sadece logoya uyguluyoruz, bu yüzden sadece “#logo” ya ihtiyacımız var.

1
2
3
4
5
$(document).ready(function(){
    $('#logo').each(function() {
        animationHover(this, 'bounce');
    });
});

Fonksiyona, sadece “bu” yı geçiyoruz, çünkü fonksiyonu #logo’nun her yinelemesinde ve ardından belirlenen bir animasyonda çalıştırıyoruz. Bizim durumumuzda, “sıçrama”. OnHover yerine onClick işlevini çalıştırmak için işlev adını kolayca değiştirin ve kendinize belirlenmiş bir tıklama eylemi sağlayın.

Son

Makale olarak yazımızın sonuna ulaştık sizlerde kolayca bunun kullanımını yapabilirsiniz.

 

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir