ilmugrafis.com
Home Tutorials News Artikel Fonts Download Gallery Kontak
Google Powered Search
 
ilmu grafis » JQUERY

Membuat Efek Animasi Image Overlay

Publish: 25 Maret 2013 | Author & Copyright: Johan | Status: FREE tutorial jQuery

Di Tutorial sebelumnya yaitu cara implementasi dan menggunakan jQuery tentu kalian telah mengetahui bagaimana cara kerja dan penempatan jQuery. Ok selanjutnya di tutorial kali ini adalah membuat efek image keren yaitu Overlay seperti ketika kita mengklik photo di Facebook. Efek animasi website ini biasa disebut Image Overlay (efek gambar melayang).

Catatan :
Overlay adalah suatu keadaan yang membuat elemen / object menjadi terfokus yang menyebabkan object di sekitarnya menjadi tidak aktif sampai overlay-nya ditutup. Ibarat sebuah lapisan, maka overlay adalah lapisan pada tumpukan paling atas.

Pada contoh kali ini saya akan menerapkan efek animasi overlay ini pada gallery foto sebuah website dimana ketika kita klik salah satu foto maka foto tersebut akan membesardan ditampilkan secara apik sebagai foto yang paling depan.

1. Download jQuery.Min.Tools , dimana ? di website ini : http://jquerytools.org/
Centang semua pilihan termasuk Overlay Images lalu Pilih download! Simpan di Direktori Website seperti yang kita lakukan di tutorial sebelumnya yaitu implementasi jQuery.

Buka program editor website semacam notepad atau dreamweaver. Jika anda belum menguasai dreamweaver maka anda bisa belajar dreamweaver di ilmuGrafis

Buat dokumen baru dan isi dengan script :
script overlay
gambar : script overlay
Penjelasan :
Baris 3 : ini untuk memanggil CSS kita
Baris 5 : memanggil jquery.tools.min.js
Baris 7 - 11 : script untuk membuat overlay image

 

2. Berikut ini script lengkapnya :

<html>
<head>

<link rel="stylesheet" type="text/css" href="css/overlay-basic.css">

<script type="text/javascript" src="jquery.tools.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
$("img[rel]").overlay();
});
</script>


</head>
<body>
<!-- elemen foto -->

<img src="images/kcb_small.jpg" width="100" height="119" rel="#mies1">
<img src="images/sangpemimpi_small.jpg" width="100" height="119" rel="#mies2">


<!-- overlays -->
<div class="simple_overlay" id="mies1"><div class="close"></div>
<img src="images/kcb.jpg">

<div class="details">
<h3>Ketika Cinta Bertasbih</h3><br />
<p>Ketika cinta bertasbih merupakan film Indonesia yang dirilis pada tanggal 19 Juni 2009 yang disutradarai oleh Chaerul Umam</p>
<p>Film ini diangkat dari novel best seller karangan Habiburrahman El Shirazy yang berjudul sama dengan tokoh utama bernama Khairul Azzam</p>
<p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di www.ilmugrafis.com</p>
</div>
</div>

<div class="simple_overlay" id="mies2"><div class="close"></div>
<img src="images/sangpemimpi.jpg">


<div class="details">
<h3>Sang Pemimpi</h3><br />
<p>Sang Pemimpi adalah novel kedua dalam tetralogi Laskar Pelangi karya Andrea Hirata yang diterbitkan oleh Benteng Pustaka pada Juli 2006</p>
<p>Dalam Novel ini berkisah persahabatan antara Ikal dan Arai serta kekuatan mimpi mereka yang dapat membawa dua anak kampung dari Belitong untuk bersekolah di Perancis</p>
<p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di www.ilmugrafis.com</p>
</div>
</div>


</body>
</html>

<!-- elemen foto -->
<img src="images/kcb_small.jpg" width="100" height="119" rel="#mies1">
<img src="images/sangpemimpi_small.jpg" width="100" height="119" rel="#mies2">

Penjelasan :
- ini untuk preview image sebelum di klik dan menjadi Overlay (images/kcb_small.jpg , images/sangpemimpi_small.jpg)
- ini untuk membuat pengelompokkan dari images yang akan di overlay. lihat rel #mies1 , #mies2 , dll

<!-- overlays -->
<div class="simple_overlay" id="mies1"><div class="close"></div>
<img src="images/kcb.jpg">

Penjelasan :
ini script untuk menjalankan Overlay sehingga nanti waktu kita klik maka yang keluar adalah image yang resolusi lebih besar yaitu kcb.jpg

<div class="details">
<h3>Sang Pemimpi</h3><br />
<p>Sang Pemimpi adalah novel kedua dalam tetralogi Laskar Pelangi karya Andrea Hirata yang diterbitkan oleh Benteng Pustaka pada Juli 2006</p>
<p>Dalam Novel ini berkisah persahabatan antara Ikal dan Arai serta kekuatan mimpi mereka yang dapat membawa dua anak kampung dari Belitong untuk bersekolah di Perancis</p>
<p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di www.ilmugrafis.com</p>
</div>
</div>

Penjelasan :
ini adalah detail tulisan yang akan muncul di sebelah gambar sebagai keterangan

Oke script di bawah ini sama aja dengan penjelasan di atas yaitu menjalankan overlay dan menampilkan detail overlay images
<div class="simple_overlay" id="mies2"><div class="close"></div>
<img src="images/sangpemimpi.jpg">


<div class="details">
<h3>Sang Pemimpi</h3><br />
<p>Sang Pemimpi adalah novel kedua dalam tetralogi Laskar Pelangi karya Andrea Hirata yang diterbitkan oleh Benteng Pustaka pada Juli 2006</p>
<p>Dalam Novel ini berkisah persahabatan antara Ikal dan Arai serta kekuatan mimpi mereka yang dapat membawa dua anak kampung dari Belitong untuk bersekolah di Perancis</p>
<p>sinopsis ini hanya untuk latihan tutorial JQuery - overlay image di www.ilmugrafis.com</p>
</div>
</div>

Jika anda punya gambar lebih dari 2 maka anda tinggal menambahkan #mies3, #mies4, dst...

3. Ok anda bisa melihat hasil dari image Overlay Klik Disini
Contoh Overlay Image
Gambar : Screenshot Hasil. Contoh Overlay Image - Laskar Pelangi

Hasil Overlay Images dan Penjelasan : saat anda mengklik gambar misal poster "Laskar Pelangi" maka gambar akan membesar dan menampilkan info mengenai gambar tersebut di sebelah kanan gambar. Disinilah peran overlay dalam menyajikan tampilan foto secara unik dengan tambahan tombol close di bagian kanan atas untuk menutup gambar tersebut.

Untuk Source Code ( buat Belajar ) bisa kalian
download now
Download Disini

Anda bisa mengutak-atik file CSS nya untuk customisasi sesuai keinginan anda.

Demikian cara membuat efek Overlay Images dengan menggunakan jQuery. Sampai jumpa di tutorial jQuery berikutnya yaitu Tooltip Efek. Terima kasih. Semoga Bermanfaat.

Share URL Share the URL of this Tutorial in IM, Email or post in forums

* Klik Link, copy (ctrl + c) dan paste (ctrl + v)
Keep In Touch : youtube channeltwitterfacebookgoogle+rss
IlmuGrafis Apk : android apk
Berlangganan Tutorial dan News ilmuGrafis.com via Email


author
<> Info dan Kontak Penulis
Johan Felisitas
Tentang Penulis : Lahir di Surabaya 1986, Menyukai Desain Grafis sejak SMA, hobby Sepakbola, Bersepeda dan Wisata Kuliner
Motto : Mensyukuri nikmatNya adalah sumber kebahagiaan

Penulis dapat dihubungi via:
Twitter: @johanfelisitas
Google+ : johan felisitas
Facebook : facebook.com/tomuramaster
Email : johan.felisitas[at]gmail[dot]com
Blog : http://www.jasuke.com , http://www.ilmugrafis.org


Rekomendasi Resmi ilmuGrafis
Metode Belajar Cepat dan Mudah dengan Video Tutorial dan Desain Grafis Source
Dipersembahkan oleh www.ilmuGrafis.net
HTML CSS
WEBSITE - HTML CSS

Video Tutorial Cara Pembuatan Website dengan HTML Fundamental dan CSS Style
PHP 1
Pemrograman Web PHP

Video Tutorial Cara Membuat dan Memprogram Website Dinamis dengan PHP
DREAMWEAVER
Webdesain Dreamweaver

CD Tutorial ini berisi tips dan trik desain website dengan Dreamweaver dan Photoshop


Aturan dan Kebijakan di website ilmugrafis

  • Semua Konten di ilmuGrafis.com bertujuan sebagai media pendidikan dan pembelajaran, oleh karena itu dimohon tidak menyalahgunakan informasi dan pengetahuan yang diperoleh untuk hal - hal yang merugikan diri sendiri maupun orang lain
  • Kami melakukan segala upaya untuk memastikan bahwa informasi di ilmuGrafis.com tersaji seakurat dan sebaik mungkin. Anda bisa melaporkan jika ada konten ataupun informasi yang tidak berkenan di Kontak
  • Jika anda ingin memposting ulang atau mengcopy konten yang ada di ilmuGrafis.com maka silahkan membaca terlebih dahulu Terms Of Use

Promotion Link :

ARTSENSE 1

PHOTOSHOP
Photoshop Dasar
Photoshop Teks Effect
Photoshop Photo Efek
Photoshop Alternatif
Photoshop Extra

CORELDRAW
CorelDRAW Dasar
CorelDRAW Logo
CorelDRAW Bebas
CorelDRAW Extra Tools

PHOTOGRAPHY
Lightroom

VECTORIZE
Adobe Illustrator

ANIMATION
Flash
Swishmax

MODELING
3dsMAX
AutoCAD
Cinema 4D
Maya

VIDEO EDITING
Adobe Premiere
After Effect
Pinnacle

WEB DEVELOPER
Dreamweaver
jQuery
Fireworks

PUBLISHING
Freehand
InDesign
Ms. Paint
Ms. Visio

FREEWARE
Gimp
Inkscape

CREATIVE-ZONE
Gallery
Papercraft
Liga Grafis
Hall Of Fame

EXTRA
News
Artikel
Hiburan
Bursa Kerja
Jasa Grafis
Donasi

Advertise with us
http://ilmugrafis.info/cdn/banner_ilmu_grafis_180x500px.gif

Artsense 3

Our Banner :

ilmugrafis indonesia
Link to ilmuGrafis

Peta Situs Term of Use web edukasi - ilmugrafis.com Indonesia
© 2008 - 2014 ilmuGrafis.com Design and Development by IG Team.
All other trademarks are the property of their respective owners.
kembali ke atas / back to top