Entri Populer
-
Pertama download Cantasia 8 disini Official site : Install Trial Version (Jangan Masukkan Serial keynya dulu) Disable Admin's Acc ...
-
Sebelum berkembangnya teknologi website seperti saat ini, logo atau gambar dengan efek animasi tambahan seperti animasi gerak, beruba... -
Mungkin anda pernah was was dengan keluarga, maupun pacar anda. ketika anda bepergian yang ada benak pikiran anda sedang apa pacar saya,... -
1.cari kode berikut (gunakan CTRL+F), ]]></b:skin> 5. Tepat diatas kode tersebut, paste kode dibawah ini, /*----- MBT Drop...
-
Untuk membuat tampilan website atau blog kita lebih menarik kita membutuhkan banyak ide intuk memodifikasi tampilannya, salah satunya denga...
Senin, 14 Januari 2013
Membuat Logo Berkilau Cahaya ala Animasi Flash dengan jQuery
Sebelum berkembangnya teknologi website seperti saat ini, logo atau gambar dengan efek animasi tambahan seperti animasi gerak, berubah bentuk, berkilauan, dlsb hanya bisa dilakukan dengan membuat logo/gambar tsb menggunakan flash atau gambar .GIF (Graphic Interchange Format).
Namun tidak dengan saat ini setelah berkembangnya teknologi pemrograman
website seperti HTML5, CSS3 dan jQuery. Dengan teknologi tersebut kita
dapat melakukan beragam hal yang sebelumnya tidak dapat dilakukan dalam
sebuah website menjadi sesuatu yang mungkin dan nyata. Contohnya saja,
dengan HTML5 kita tidak memerlukan flash player untuk memutar sebuah
video atau musik, membuat animasi interaktif dengan CSS3, atau beragam
fungsi menawan yang dapat dihasilkan oleh jQuery. Menakjubkan bukan? :DPada posting kali ini saya akan berbagi kepada kawan blogger bagaimana cara membuat Logo atau Gambar dengan efek animasi Kilau Cahaya ala flash dengan jQuery dan HTML5. Efek ini akan membuat anda terlihat profesional dalam mempresentasikan logo atau gambar dalam website anda. Ini merupakan nilai plus yang dibutuhkan oleh para marketer dalam memasarkan produknya, logo sebuah website korporat agar terlihat profesional, atau toko online yang ingin terlihat elegant. Anda dapat mengaplikasikan cara ini dalam sebuah website atau blogspot sekalipun :)
Penasaran? Yuk langsung lihat demonya pada logo WP di bawah ini:
Untuk dapat membuat efek tersebut, ikuti langkah-langkah yang telah saya rangkum menjadi 4 Tahap Mudah. Pastikan mengikuti tahap demi tahap agar dapat berjalan dengan lancar.
TAHAP #1 - PLUGIN JQUERY
Pastikan plugin jQuery terpasang pada website atau blog anda. Anda dapat
mengeceknya pada bagian kode HTML dengan melakukan pencarian (ctrl+f)
kata kunci 'jquery' yang diakhiri dengan ekstension .js (javascript).
Jika belum terpasang, maka anda dapat memasangnya dengan menyisipkan
kode <script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script> sebelum tag </body> atau </head>.
TAHAP #2 - PLUGIN EFEK KILAU
Sisipkan kode <script type="text/javascript" src="http://yourjavascript.com/2232081187/kilau.js"></script> tepat dibawah kode plugin jQuery pada tahap #1.
TAHAP #3 - KODE AKTIVASI EFEK
Jika anda memiliki beberapa gambar untuk diberi efek kilau, maka anda memerlukan kode aktivasi sesuai dengan jumlah gambar tersebut. Sisipkan kode aktivasi berikut dibawah plugin efek kilau pada tahap #2
TAHAP #2 - PLUGIN EFEK KILAU
Sisipkan kode <script type="text/javascript" src="http://yourjavascript.com/2232081187/kilau.js"></script> tepat dibawah kode plugin jQuery pada tahap #1.
TAHAP #3 - KODE AKTIVASI EFEK
Jika anda memiliki beberapa gambar untuk diberi efek kilau, maka anda memerlukan kode aktivasi sesuai dengan jumlah gambar tersebut. Sisipkan kode aktivasi berikut dibawah plugin efek kilau pada tahap #2
Kode untuk satu gambar
<script> $(window).load(function() {
$('#kilau').shiningImage();
});
</script>
Kode untuk dua gambar
<script> $(window).load(function() {
$('#kilau').shiningImage();
$('#kilau1').shiningImage();});
</script>
Kode untuk tiga gambar
<script> $(window).load(function() {
$('#kilau').shiningImage();
$('#kilau1').shiningImage();
$('#kilau2').shiningImage();
});
</script>
Dan seterusnya (tinggal tambahkan atau kurangi kode mengikuti bentuk di atas).
TAHAP 4# - MEMASANG EFEK PADA GAMBAR
Merupakan tahap terakhir, jika anda berhasil mengikuti langkah demi langkah maka akan tercipta efek kilau pada gambar. Untuk memasang efek pada gambar yang diinginkan anda tinggal menambahkan tag id='kilau' pada kode html penyisipan gambar.
Normalnya, untuk menyisipkan gambar pada website maka kode htmlnya ialah:
<img src='LINKGAMBAR.JPG'/>
Setelah disisipkan tag id='kilau' maka kodenya akan menjadi seperti di bawah ini:
<img id='kilau' src='LINKGAMBAR.JPG'/>
Jika lebih dari satu gambar maka akan menjadi seperti ini (contoh):
<img id='kilau' src='LINKGAMBAR.JPG'/>
<img id='kilau1' src='LINKGAMBAR1.JPG'/>
Hasilnya akan seperti ini (contoh untuk dua gambar dengan dua tag id='kilau' dan id='kilau1')
Sangat menarik bukan untuk diaplikasikan di website masing-masing? Visitor pun akan semakin tertarik dengan website anda! Sekali lagi, Bukan Flash lho!
Selamat Mencoba, Semoga Bermanfaat!!!
Langganan:
Posting Komentar (Atom)
0 komentar:
Posting Komentar