Membuat Animasi Halaman Gallery Dengan Cepat dan Mudah

efeck listnya : KLIK DISINI

Gallery salah satu elemen panting di website, gallery biasanya digunakan untuk menampilkan Foto-foto dokumentasi kegiatan atau event.
Sebagian orang agak kesulitan untuk mempercantik halaman gallery ini.
Pada artikel ini kami akan tunjukan cara paling mudah membuat halaman gallery untuk website anda, apa yang kita buat ini bisa juga digabung dengan teknik yang ada di tutorial kami sebelumnya yaitu Membuat Popup Image Gallery Dengan Jquery dan HTML5.
Untuk membuat halaman gallery ikuti langkah-langkah berikut ini.
1. Membuat Struktur HTML
Pertama buat struktur HTML disini, perhatikan pada bagian javascript, style css, dan body html, kok semuanya kosong?
Jangan khawatir karena kita akan mengisinya dengan script yang akan kita dapat dari website “liffect effect for lists“.

<!DOCTYPE HTML>

<html lang="en-US">

<head>

    <meta charset="UTF-8">

    <title>Gallery</title>

    <style type="text/css">

        .gallery{width:600px}

        ul{list-style-type: none}

        ul li{display:inline-block;}

        ul li im{width:100px;height:100px}

        /* CSS Liffect here */

    </style>

    <!-- Javascript / Jquery Liffect Here -->

</head>

<body>

    <div class="gallery">

        <!-- HTML Liffect Here -->

    </div>

</body>

</html>

2. Setelah Struktur HTML dibuat, maka sekarang buka website : liffect effect for lists
3. Lalu atur pilihan efek yang ada sesuka anda, kami mencoba dengan settingan seperti gambar dibawah ini.

4. Selanjutnya klik tombol Generate
Maka kamu akan diberikan code HTML, CSS serta Javascript/Jquery.
Nah letakan masing – masing kode di Struktur HTML yang sudah kita buat diatas.
5. Selesai, berikut adalah DEMO yang dihasilkan, silahkan pilih efek yang anda inginkan untuk hasil yang lebih baik.

Kesimpulan:

Cara ini digunakan untuk membantu anda menciptakan kesan pertama saat halaman dibuka saja
Untuk lebih lanjut anda bisa gabungkan dengan tutorial kita sebelumnya yaitu : Membuat Popup Image Gallery Dengan Jquery dan HTML5
Oke sekian tutorial kali ini
Salam web design Indonesia

sumber : http://www.tutorial-webdesign.com