Tips & Trik

Membuat Animasi Halaman dengan Animate.css & Wow.js

Rio Aditya21 Maret 20200 Comment03.2k

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">
        <h1>Galeri 3 Gambar </h1>

        <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>

        <h1>Galeri 2 Gambar </h1>

        <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>

        <h1>Galeri 4 Gambar </h1>

        <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:

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

        <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">
        <h1 class="wow pulse">Galeri 3 Gambar </h1>

        <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