Cara menggunakan ANIMATES pada JavaScript

Question

Animate.css merupakan sebuah library CSS3 yang dibuat oleh Dan Eden untuk mempermudah developer dalam membuat animasi pada element html tanpa harus membuatnya dari awal karena sudah disiapkan oleh animate.css. Fitur animate.css ini saya cukup sudah lumayan lengkap dari animasi masuk(in) sampai animasi keluar(out), cara penggunaan animate.css sangatlah mudah kita hanya perlu menambahkan class animasi yang ada pada animate.css ke element html yang ingin kita beri efek animasi. Penasaran? Scroll kebawah bro!!

Table of Contents Show

Here we go!
Final Words
Tentang Kami

CSS

Here we go!

1. Kita perlu library animate.css nya dulu, download disini.

2. Setelah didodwnload, masukan file animate.css ke folder website kamu.

3. Buka file html yang akan kamu beri animasi.

4. Pada tag <head> tambahkan baris kode berikut untuk memanggil file animate.css kedalam website kamu.

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

5. Cari element yang akan diberikan animasi, untuk contoh saya buat sebuah element html dengan text “Saya elemen dengan animasi”.

<div class="fadeIn animated">
Saya elemen dengan animasi
</div>

6. Simpan dan jalankan pada browser, elemen diatas akan menghasilkan efek animasi fadeIn.

Cara Penggunaan

Pada dasarnya cara penggunaan animate.css ini sangat mudah, cukup tambahkan class css yang telah disediakan oleh animate.css pada element html yang akan kita berikan efek animasi. Sebagai contoh:

<div class="fadeIn">Hello</div>

Class css diatas akan memberikan efek animasi fade in namun dengan class seperti itu element tidak akan berpengaruh apa-apa, karena kita perlu menambahkan class berikutnya untuk menjalankan animasi yang kita inginkan. Class apa? class berikutnya yaitu animated class tersebut sangatlah penting, karena class tersebut yang akan menjalankan animasi yang diinginkan. Sebagai Contoh:

<div class="fadeIn animated">Hello</div>

Nah, sekarang baru bisa jalan animasinya. Jadi intinya cukup menambahkan class animasi yang kita inginkan dan class animated untuk menjalankannya. Untuk class animasinya kamu bisa lihat sendiri di situs dimana kamu download animate.css tadi.

Final Words

Semoga bermanfaat tutorial cara penggunaan animate.css ini dan sampai jumpa ditutorial berikutnya.

Tentang Kami

Kawan Koding adalah media informasi, berita dan tempat belajar pemrograman secara online yang disajikan dalam format yang menarik dan mudah dipahami.

Assalamualaikum Warohmatullahi wabarakatuh.

Pada tulisan kali ini kita akan membuat tampilan website lebih menarik dengan mengkombinasikan antara boostrap, animate.css dan wow.js.

Langsung saja kita siapkan file index.html yang sudah ditambahkan bootstrap, pada contoh ini saya menggunakan cdn dari bootsrap.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
</head>
<body>
    <div class=" container">
        <h2>Galeri 3 Gambar </h2>

        <div class=" row mb-5">
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
        </div>

        <h2>Galeri 2 Gambar </h2>

        <div class=" row mb-5">
            <div class=" col-lg-6">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-6">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
        </div>

        <h2>Galeri 4 Gambar </h2>

        <div class=" row">
            <div class=" col-lg-3">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-3">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
            <div class=" col-lg-3">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-3">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
        </div>

    </div>
</body>
</html>

Tampilannya dari index.html yang kita buat diatas adalah seperti berikut:

Nah, sekarang kita sudah mempunyai tampilan website yang berisi galeri gambar. Baris pertama ada 3 gambar, baris kedua ada 2 gambar dan baris ketiga ada 4 gambar.

Berikutnya tambahkan css untuk menampilkan animate nya. Kita tambahkan saja cdn berikut pada file index yang kita buat:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">

Ada banyak animate yang disediakan, kawan-kawan bisa langsung cek di https://daneden.github.io/animate.css/ . kemudian untuk menerapkannya kita tinggal menerapakan class nya pada bagian yang diinginkan. Misalnya adalah sebagai berikut:

<h2 class="animated pulse">Galeri 3 Gambar </h2>

        <div class=" row mb-5 animated bounce">
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
    
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>
        </div>

Teman-teman bisa memperhatikan kalau tampilan yang kita buat sudah terdapat animasi. Namun animasinya masih bergerak secara bersamaan. Untuk membuat animasi nya bergerak mengikuti scroll kita membutuhkan yang namanya wow.js.

Buka laman wowjs.uk lalu pilih menu github dan download. Setelah itu tambahkan script berikut:

<script src="wow.min.js"></script>
    <script>
            new WOW().init();
    </script>

Lalu untuk menerapkannya ubah class animated menjadi wow, sehingga menajdi seperti berikut:

<div class=" container">
        <h2 class="wow pulse">Galeri 3 Gambar </h2>

        <div class=" row mb-5 wow bounce">
            <div class=" col-lg-4">
                <img src="http://placeimg.com/640/480/any" class=" img-thumbnail">
                <h6>Lorem ipsum dolor sit amet consectetur</h6>
            </div>

Sekian tutorial kali ini. Semoga bermanfaat