• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tutorial Efek Animasi Visual jQuery untuk Web Desainer - Panel Geser, Mengilangkan Elemen seperti DIV dan Transisi Berantai

09‘11
February

noimg.jpg

Artikel ini berisi beberapa tutorial visual untuk para web designer dan pemula tentang bagaimana menerapkan efek Javascript dengan jQuery. Jika anda tidak tahu tentang jQuery saya terangkan lagi sedikit bahwa jQuery memiliki banyak fitur yang memungkinkan kita untuk meningkatkan kemudahan dalam penggunaan Ajax, Javascript dan coding semantik. Jika masih bingung dan tertarik untuk bersama-sama mendalami jQuery, sebelum melanjutkan silahkan baca artikel pengenalan jQueri saya yang lalu disini Pengantar dan Penggunaan jQuery pada Website. Ok, karena tutorial kali ini difokuskan pada jQuery maka pada tutorial ini saya tidak akan terlalu rinci membahas CSS.

1. Membuat Slide Panel Sederhana

Mari kita mulai dengan membuat sebuah panel slide sederhana dengan jQuery. Anda mungkin pernah melihat banyak contoh slide panel pada saat browsing di website, di mana anda meng-klik sebuah link dan kemudian panel naik turun ke atas atau ke bawah. supaya lebih jelas kira-kira tampilan slide panel adalah seperti dibawah silahkan klik slide panel untuk melihat demonya

tempatkan content / isi / sebuah paragraph pada panel anda disini

 

Kalau sekilas di perhatikan mungkin sepertinya susah untuk membuatnya tapi jangan salah cara membuatnya gampang sekali dengan jQuery, berikut codingnya :

$(".btn-slide").click(function(){
	$("#panel").slideToggle("slow");
	$(this).toggleClass("active"); 
	return false;
});

Integrasi coding diatas dengan css dan html adalah sebagai berikut:

<script type="text/javascript" src="NamaFileJquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".btn-slide").click(function(){
		$("#panel").slideToggle("slow");
		$(this).toggleClass("active"); 
		return false;
	});
});
</script>
<style type="text/css">
a:focus {
	outline: none;
}
#panel {
	background: #555;
	border:1px solid #000;
	color:#FFFFFF;
	height: 100px;
	line-height:100px;
	display: none;
	text-align:center;
}
.slide {
	margin: 0;
	padding: 0;
	border-top: solid 4px #422410;
	background: url(/* image anda */) no-repeat center top;
}
.btn-slide {
	background: url(/* image anda */) no-repeat right -50px;
	text-align: center;
	width: 144px;
	height: 31px;
	padding: 10px 10px 0 0;
	margin: 0 auto;
	display: block;
	font: bold 120%/100% Arial, Helvetica, sans-serif;
	color: #fff;
	text-decoration: none;
}
.active {
	background-position: right 12px;
}
</style>
  
Tempatkan content / isi / sebuah paragraph pada panel anda disini

Slide Panel!

Sedikit penjelasan coding jadi ketika sebuah elemen yang memiliki class = "btn-slide" diklik, maka dengan fungsi slideToggle elemen yang memiliki id="panel" akan slide ke bawah atau ke atas (naik / turun). div dengan class ="btn-slide" juga akan ditambahkan classnya menjadi active yang akan mengaktifkan posisi latar belakang gambar panah (CSS). Silahkan coba dan praktekan sendiri.

2. Efek Menghilangkan Elemen Seperti Div

Ok selanjutnya saya akan menunjukkan kepada anda bagaimana untuk membuat sesuatu seperti elemen div atau elemen yang lainnya menghilang bila tombol gambar atau link delete diklik, penasaran berikut ini demonya silahkan klik tombol delete / tanda silang dibawah:

Contoh heading / Judul

delete

Contoh heading / Judul

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

delete

berikut saya perlihatkan codingnya :

$(".panel .delete").click(function(){ 
	$(this).parents(".panel").animate({ opacity: 'hide' }, "slow"); 
});

Integrasi coding diatas dengan css dan html adalah sebagai berikut:

<script type="text/javascript" src="NamaFileJquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".panel .delete").click(function(){ 
		$(this).parents(".panel").animate({ opacity: 'hide' }, "slow"); 
	});
});
</script> 

<style type="text/css">
.panel {
	background: #edf5e1;
	padding: 10px 20px 10px;
	margin:0 auto;
	width: 450px;
	position: relative;
	border-top: solid 2px #c4df9b;
}
.panel .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
.panel h4{
	background: #edf5e1;
	padding: 10px 20px 10px;
	position: relative;
	border-top: solid 2px #c4df9b;
}
.panel .delete {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}
</style>

Contoh heading / Judul

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

delete

Contoh heading / Judul

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi malesuada, ante at feugiat tincidunt, enim massa gravida metus, commodo lacinia massa diam vel eros. Proin eget urna. Nunc fringilla neque vitae odio. Vivamus vitae ligula.

delete

elemen yang memiliki class = "delete" merupakan child atau anak dari elemen dengan class = "panel" atau dalam hal ini disebut parent, dengan jQuery diatas maka pada saat class ="delete" di klik maka element panel akan di sembunyikan $(this).parents(".pane").animate({ opacity: 'hide' }, "slow") . silahkan coba dan praktekan sendiri.

3. Efek Pemindahan (Transisi) Elemen Berantai

Sekarang mari kita melihat kekuatan berantai jQuery. Dengan hanya beberapa baris kode, saya bisa membuat kotak dengan elemen div dan sebagainya terbang disekitar dengan berbagai efek transisi scaling dan fading. silahkan lihat demo berikut klik tombol Jalankan.

Jalankan Demo

Bagaimana dengan efeknya suka? seperti halnya diatas coding yang dibutuhkan sangat sedikit untuk menghasilkan efek tersebut. berikut merupakan baris coding yang diperlukan :

$(".run").click(function(){
	$("#demobox").animate({opacity: "0.1", left: "+=400"}, 1200)
	.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
	.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
	.animate({top: "0"}, "fast")
	.slideUp()
	.slideDown("slow")
	return false;
});

Integrasi coding diatas dengan css dan html adalah sebagai berikut:

<script type="text/javascript" src="NamaFileJquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".run").click(function(){
		$("#demobox").animate({opacity: "0.1", left: "+=400"}, 1200)
		.animate({opacity:"0.4", top:"+=160", height:"20", width: "20"}, "slow")
		.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
		.animate({top: "0"}, "fast")
		.slideUp()
		.slideDown("slow")
		return false;
	});
});
</script> 

<style type="text/css">
#demobox {
	background: #3cab1c;
	height: 100px;
	width: 100px;
	position: relative;
}
</style>

Jalankan Demo

Okay sampai sini dulu, nanti saya lanjut tutorial jquerynya dibagian selanjutnya. semoga artikel saya bermanfaat untuk para pengunjung dan terimakasih atas kunjungannya :)

Anda juga mungkin suka dengan artikel ini :

  1. Trik Membuat Animasi Tooltip Balon dengan jQuery
  2. Tutorial membuat Submit Form Email dengan jQuery dan PHP tanpa harus Refresh Halaman Web
  3. jQuery 2.0 Sudah Resmi Di Luncurkan
  4. Pengantar dan Penggunaan jQuery pada Website
  5. Membuat Drop Down Menu Sederhana dengan jQuery

Komentar

  • Beny (17 May 2016 11:26:57)

    artikel yang bermanfaat

    kunjungi aplikasipbbonline.wordpress.com
    kami penyedia aplikasi sistem informasi PBB Online:

    - SIMPBB (Sistem Informasi Manajemen Pajak Bumi dan Bangunan)
    - SIBPHTB (Sistem Informasi Bea Perolehan Hak Tanah dan Banguan)
    - SIG (Sistem Informasi Geografis)

    Informasi lebih lanjut hubungi www.aplikasipemda.com
    brahmanto@cendana2000.co.id Telp. 089691540880

  • tekeliwai (27 Apr 2016 01:06:20)

    terima kasih atas ilmu nya, semoga bermanfaat (y)
    salam web developer .

  • Jam Tangan (08 Jun 2014 12:39:20)

    wah mantap bro mau coba nih

  • foezi (18 Jun 2013 05:27:54)

    mantap gan tutorialnya..

  • am4869 (11 May 2013 05:41:08)

    mantap nih, makasih :D

» Muat Komentar Sebelumnya (12 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff