Ticker

6/recent/ticker-posts

Header Ads Widget

Cara Membuat Animasi Dinamis Pada Element Html Menggunakan Css & jQuery

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim
Animasi banyak digunakan pada website, baik dalam bentuk GIF, SVG, video latar dan lain sebagainya. Ketika digunakan dengan benar, animasi dapat memberikan kesan hidup dan interaktifitas, menambahkan lapisan tambahan untuk meningkatkan pengalaman pengguna website.

Pada postingan ini, saya akan memperkenalkan sobat kepada animasi CSS, dan membuatnya menjadi dinamis dengan bantuan jquery.


Pengenalan @keyframes dan Animasi
Komponen utama dari animasi CSS adalah @keyframes, aturan CSS di mana sebuah animasi didefinisikan. Bayangkan @keyframes sebagai tahapan-tahapan yang merangkai timeline pada animasi. Di dalam @keyframes, sobat dapat menentukan tahapan ini, dengan masing-masing memiliki sebuah style yang berbeda.

Selanjutnya, agar animasi berjalan, anda perlu mengaitkan @keyframes tersebut ke dalam sebuah selector. Selector secara bertahap akan mengurai semua kode yang terkandung di dalam @keyframes dan mengubah style awal menjadi style baru, berdasarkan tahapan-tahapan yang telah ditentukan.
@keyframes

Di sini kita akan mengatur tahapan animasi. Properti-properti di dalam @keyframes kita adalah:
  • Nama animasi (myanimate dalam contoh ini).
  • Tahapan: 0%-100%; dari (sama dengan 0%) dan hingga (sama dengan 100%).
  • Style CSS: style yang sobat ingin aplikasikan dalam setiap tahapannya.
Contoh:

@keyframes myanimate {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Animasi
Properti animasi digunakan untuk memanggil @keyframes ke dalam sebuah selector CSS. Animasi dapat memiliki beberapa properti sebagai berikut:
  • animation-name: nama @keyframes (ingat kita memilih tutsFade).
  • animation-duration: durasi animasi, total durasi dari animasi dari awal hingga akhir.
  • animation-timing-function: mengatur kecepatan animasi ( linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier ).
  • animation-delay: durasi tunda ebelum animasi kita mulai.
  • animation-iteration-count: jumlah penambahan dalam animasi.
  • animation-direction: memberi anda kemampuan untuk mengubah arah loop, dari awal hingga akhir, atau dari akhir hingga awal, atau keduanya.
  • animation-fill-mode: menentukan style yang akan di terapkan ke dalam elemen ketika animasi kita selesai ( none | forwards | backwards | both )

Menambahkan Awalan Vendor
Selama masih menjadi working draft, kita butuh menambahakan properti animation dengan awalan khusus untuk memastikan dukungan terbaik browser. Standard awalan ini adalah:
  • Chrome & Safari: -webkit-
  • Firefox: -moz-
  • Opera: -o-
  • Internet Explorer: -ms-
Sebuah properti animation dengan menggunakan awalan akan nampak seperit berikut:
.element {
    -webkit-animation: myanimate 4s 1s infinite linear alternate;
    -moz-animation: myanimate 4s 1s infinite linear alternate;
    -ms-animation: myanimate 4s 1s infinite linear alternate;
    -o-animation: myanimate 4s 1s infinite linear alternate;
    animation: myanimate 4s 1s infinite linear alternate;
}

Untuk membuatnya menjadi dinamis, disini saya menggunakan animate.css untuk animasinya , dan jquery untuk library javascriptnya, Oke langsung saja.

Langkah Pertama
Silahkan sobat download File yang diperlukan disini.

Langkah keduanya
Sobat ketikan kode dibawah ini dan simpan dengan nama animate.html atau sesuai yang sobat inginkan.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
<title>Animated | Using Css</title> 
<link rel="stylesheet" href="css/bootstrap.css"> 
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/style.css">

</head> 
<body> 

<div id="wrapper">
 <div class="container">
  <div class="row">
   <!-- class animated dipanggil setiap kali ingin menggunkan animasi -->
   <!-- data-animation adalah jenis animasi yang digunakan bisa fadeIn, fadeOut, bounce dll -->
   <!-- data-animation-delay adalah durasi atau lama waktu munculnya animasi dihitung menggunakan detik -->
   <h1 class="animated" data-animation="fadeIn" data-animation-delay="500">Aguzrybudy</h1>
   <p class="animated" data-animation="fadeIn" data-animation-delay="1000">Aguzrybudy.com</p>
   <h1 class="animated" data-animation="fadeIn" data-animation-delay="1500">Animation</h1>
  </div>
 </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.appear.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body> 
</html>

Langkah ketiga
Buatlah sebuah file javascript dan kemudian copy code dibawah ini, disini saya simpan dengan nama main js.

/*==========  Animation  ==========*/    
    $('.animated').appear(function() {
        var elem = $(this);
        var animation = elem.data('animation');
        if ( !elem.hasClass('visible') ) {
            var animationDelay = elem.data('animation-delay');
            if ( animationDelay ) {
                setTimeout(function(){
                    elem.addClass( animation + " visible" );
                }, animationDelay);
            } else {
                elem.addClass( animation + " visible" );
            }
        }
    });  

Langkah keempat
Jalankan atau eksekusi script yang telah sobat buat, kemudian lihat hasilnya akan terlihat seperti gambar dibawah ini.



Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan diberi saran, untuk download source dan demo dari code diatas bisa klik link dibawah ini.

Post a Comment

1 Comments

Berkomentarlah dengan baik dan sopan

Rekomendasi Untuk Anda × +