Selamat Datang

Membuat Animasi Halaman Gallery Dengan Cepat dan Mudah

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





Penulis :

Website yang berisi Tutorial, Tips, Trik, Inspirasi, Opini, Cerita, Studi kasus, dan berbagai hal menarik tentang Web Design, Web Development dan Graphic Design untuk orang-orang kreatif di Indonesia. View all posts by TWD Editorial

Comments

One thought on “Membuat Animasi Halaman Gallery Dengan Cepat dan Mudah

  1. yosuaaps says:

    selain gambar itu gimana ? ap buat sendiri dan ap hrs di situ mhn bimbingan nya

Leave a Comment

XHTML: You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Klik Tombol Like / Suka ya kawan..

Klik tombol "Like" atau "Suka" untuk mendapatkan update tutorial, tips & tricks serta info terbaru seputar dunia web design & development