Sampul Sando Mpokuvava

Rabaca Mpapola, lee...

Macam-macam efek Jquery 1.4.2 | Special Jquery tutorial

Bagi sobat yang suka menaruh gambar dalam artikel akan lebih mengasikan lagi apabila gambar tersebut terlihat atraktif atau dengan kata lain agar pembacapun tidak merasa bosan dengan gambar yang di suguhkan dalam artikel sobat.
Di artikel ini saya ingin berbagi macam-macam efek yang di padukan antara Jquery 1.4.2 dan CSS3, di sini sobat bisa memilih kira-kira efek apa yang ingin sobat berikan. Sebelum lanjut bacanya bisa melihat terlebih dahulu demo yang saya sudah gabungkan di bawah.

Demo diatas hanya contoh pengabungan efek yang ada, disini saya akan memisahkannya sehingga sobat bisa menentukan mana efek yang sobat sukai. Untuk membuatnya mudah, sobat hanya mengkopi kode di bawah lalu paste di dalam postingan di edit html.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://h1.ripway.com/hendro/animasi1.js" type="text/javascript">
</script><script src="http://h1.ripway.com/hendro/animasi2.js" type="text/javascript"></script>
<script src="http://h1.ripway.com/hendro/animasi3.js" type="text/javascript">
</script><style type="text/css">
.amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" />
<img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
<script type="text/javascript">
SILAHKAN PILIH SALAH SATU KODE JQUERY YANG SOBAT SUKA KEMUDIAN MASUKAN KODENYA DI SINI.
</script>

Setelah memasukan kode silahkan simak keterangan berikut:
<script type="text/javascript">
SILAHKAN PILIH SALAH SATU KODE JQUERY YANG SOBAT SUKA KEMUDIAN MASUKAN KODENYA DI SINI.
</script>
Kode tersebut belum ada kode Jquery yang di berikan, untuk memberikannya sobat bisa memilih salah satu kode Jquery di bawah yang sobat suka.

Jquery 1.4.2 efek drop down image

Efek ini bisa membuat gambar seperti terjatuh kebawah Untuk kode yang di berikan adalah: 
$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
Maka hasilnya akan seperti ini:

Jquery 1.4.2 Efek zoom speedin, speedout

Efek Jquery ini bisa membuat gambar menjadi seperti di zoom, jika tertarik dengan efek ini silahkan kopi kode di bawah:
$('#ke2').cycle({fx:'zoom',speedIn:2500,speedOut: 500,easeIn:'bouncein',easeOut: 'easeout',sync:0,delay:-4000});
Maka hasil yang di berikan adalah:

Jquery 1.4.2 Slide diagonal

Efek ini akan membuat gambar menjadi slide yang pergerakannya diagonal, kode yang di berikan adalah:
$('#ke2').cycle({fx:'custom',cssBefore:{left: 232,top: -232,display: 'block'},animIn: {left: 0,top: 0},animOut: {left: 232,top: 232},delay: -3000});
 Maka hasilnya seperti demo di bawah ini:

Jquery 1.4.2 efek Slide vertikal dan horizontal

Kalu yang ini mungkin sobat sudah tahu, tapi saya mengabungkannya menjadi vertikal dan horizontal, jika tertarik dengan efek ini silahkan kopi kode di bawah ini:
$('#ke2').cycle({fx:'custom',sync: 0,cssBefore: {top:0,left: 360,display: 'block'},animIn:{left: 0},animOut: {top: 232},delay: -1000});
Hasil Demonya adalah:

Jquery 1.4.2 efek opacity dan zoom

Efek ini menggabungkan antara opacity dan zoom, jadi ketika gambar menghilang maka secara tiba-tiba ada gambar lagi yang muncul dengan pergerakan seperti di zoom. Apabila sobat tertarik silahkan ambil kodenya di bawah ini:
$('#ke2').cycle({fx:'custom',cssBefore: {left: 115,top: 115,width: 0,height: 0,opacity: 1,zIndex: 1},animOut: {opacity: 0},animIn: {left: 0,top: 0,width: 400,height: 200},cssAfter: {zIndex: 0},delay: -3000});

Jquery 1.4.2 Efek zoom in, zoom out

Efek Jquery ini akan membuat gambar menjadi seperti di zoom in dan zoom out yang saling bergantian, untuk kodenya adalah:
$('#ke2').cycle({fx: 'custom',cssBefore: {top:0,left: 0,width: 0,height: 0,zIndex: 1},animIn:{width: 400,height: 200},animOut:{top:200,left: 200,width: 0,height: 0},cssAfter:{zIndex: 0},delay: -1000});
Maka hasilnya akan seperti demo di bawah.

Jquery 1.4.2 efek jump atau shuffle

Kalu di lihat efek ini seperti kodok loncat, karena efek ini bisa membuat gambar menjadi seperti loncat., dan berganti dengan gambar yang lainnya. Untuk kode yang di berikan adalah:
$('#ke2').cycle({fx:'shuffle',shuffle: {top:-280,left: 280},easing:'backinout',delay: -2000});
Hasilnya gambar akan loncat dan berpindah kebelakang seperti demo di bawah.

Jquery 1.4.2 efek curtain horizontal

Efek Jquery ini dapat membuat gambar seperti curtain kalu kata orang betawi namanya hordeng. kalu ente berminat ente bisa ambil nih kodenya:
$('#ke2').cycle({fx:'curtainX',sync: false,delay: -2000});
Hasilnya seperti yang ente lihat di bawah.

Jquery 1.4.2 efek curtain vertikal

Nyang ini juga same aje cuman bentuknye pertikal (wah, bang hendro keluar bahasa aslinya, wkwkwkwkwk) pokonya mantap dah. Nih ane kasih kodenya, di kopi ye, jangan lupa pake susu! hehehe.
$('#ke2').cycle({fx:'curtainY',sync: false,delay: -2000});

Jquery 1.4.2 efek covering image

Efek ini bisa membuat gambar seperti berlapis, kalu di lihat tak jauh beda dengan slide. Kodenya adalah:
$(function(){$('#ke2').cycle({fx:'cover',delay:-2000,cssBefore:{opacity:1 },animOut:{ opacity: 0 }});});
Hasilnya seperti demo dibawah.

Jquery 1.4.2 efek wipe diagonal

Kalu yang ini seperti efek jendela yang sedang di bersihkan/wipe, sangat menarik apabila di berikan banyak gambar di dalamnya. Kode yang di berikan adalah:
$('#ke2').cycle('wipe');
Kode yang singkat, jelas dan padat, itu bisa menghasilkan efek yang bagus seperti contoh di bawah.

Jquery 1.4.2 efek wipe horizontal

Efek Jquery wipe horizontal ini tidak jauh berbeda dengan yang diagonal hanya di berikan speed, delay dan clip. Untuk kodenya juga sederhana seperti di bawah.
$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,delay:-4000,clip:'l2r'});
Hasilnya gambar akan terlihat tersapu horizontal.

Jquery 1.4.2 efek clip zoom

Nah..kalu yang ini bang hendro suka efeknya, karena gambar seperti terlihat di clip dan juga seperti terlihat di zoom.
Kalu sobat tertarik silahkan kopi kodenya di bawah.
$('#ke2').cycle({fx:'wipe',speed:1000,timeout: 6000,clip:'zoom'});
Hasilnya akan seperti ini:

Oke, silahkan di pilih kode yang sobat anggap menarik untuk di terapkan dalam postingan. Untuk URL gambar sobat bisa menambahkannya sesuai keinginan sobat. Yups!! segitu aja dulu deh, mudah-mudahan berguna dan bermanfaat efek Jquery 1.4.2 ini.

Referensi kode :

1. http://plugins.jquery.com/projects/plugins/animation-and-effects
2. http://docs.jquery.com/Tutorials
3. http://plugins.jquery.com/plugin-tags/unique-effects
4. http://www.authenticsociety.com/blog/jQueryPluginTutorial_Beginner
5. http://h1.ripway.com/hendro/animasi3.js
6. http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

Rabaca Mpapola, lee...

Cara Membuat Kunci Folder

1). Buat folder baru.

2). Masukan code dibawah ke dalam folder yang anda buat tadi, sebelumnya Buka Notepad, copy code dibawah ke idalam notepad.

Code:



cls
@ECHO OFF
title Folder FolderRahasia
if EXIST "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" goto UNLOCK
if NOT EXIST FolderRahasia goto MDLOCKER
:CONFIRM
echo Apakah anda ingin mengunci FolderRahasia tersebut ? (Y/N)
set/p "cho=>"
if %cho%==Y goto LOCK
if %cho%==y goto LOCK
if %cho%==n goto END
if %cho%==N goto END
echo Ketik Y atau N.
goto CONFIRM
:LOCK
ren FolderRahasia "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
attrib +h +s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
echo FolderRahasia Terkunci
goto End
:UNLOCK
echo Masukkan Password untuk membuka kunci
set/p "pass=>"
if NOT %pass%== masukkanpassword goto FAIL
attrib -h -s "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}"
ren "Control Panel.{21EC2020-3AEA-1069-A2DD-08002B30309D}" FolderRahasia
echo FolderRahasia sudah di buka
goto End
:FAIL
echo Password salah
goto end
:MDLOCKER
md FolderRahasia
echo FolderRahasia Sukses di buat
goto End
:End



3). Setelah anda mengcopy Comand diatas, liat pada line ( 23), anda akan menemukan "password here" <-- ( ubah kata "password here" dengan password yang anda inginkan ).

4). Setelah itu, simpan code di dalam notepad tadi dengan nama "locker.bat" .

5). Sekarang kembali ke folder tadi dan anda akan melihat Comand (LOCKER ).

6). Klik Comand tersebut dan akan muncul folder baru dengan nama "Private" .

7). Nah.. sekarang tinggal menjalankan misi penyembunyian file pribadi dengan cara memindah file2 pribadi anda kedalam folder "private" tadi, setelah yakin semua file g ada yang tersisa, kembali ke Comand "LOCKER" tadi dan klik Comand tersebut, dia akan menanyakan "apakah anda mau mengunci folder anda?" Y/N ?

Jika anda mengikuti cara diatas, file2 anda tidak akan ditemukan meskipun anda search, melalui start menu.

Kelebihannya : Simple, tanpa perlu download software lagi, semua org bisa kalo mo coba.

Rabaca Mpapola, lee...