Tutorial Cara Buat Marquee Image | Gambar Bergerak | Scrolling Image

Tutorial Cara Buat Marquee Image | Gambar Bergerak | Scrolling Image | Salam hormat, terdahulu telah saya kongsikan Tutorial Buat Text Bergerak atau dalam bahasa HTML di kenali sebagai Marquee. Kali ini masih lagi dalam tajuk Marquee HTML kod ataupun lebih popular di kalangan blogger menggelarnya "text bergerak" dan ada yang menyebutnya sebagai Scrolling text.

Tutorial Cara Buat Marquee Image

Tutorial Cara Buat Maquee Gambar bergerak kali ini tidak banyak bezanya dengan tajuk yang saya kongsikan pada entry yang terdahulu. kalau masih belum mengetahui apa itu Marquee atau scrolling text bolehlah [rujuk di sini..] untuk basic asas Marquee. Seperti yang anda sedia maklum asas marquee terbahagi kepada beberapa jenis. Apa yang asasnya adalah seperti berikut ;

1. Slide-in text marquee
2. Continuous scrolling text marquee
3. Text bouncing back and forth (zig zag) marquee
4. Text Scrolling Upwards marquee
5. The Scrolling Speed marquee

Serba sedikit jenis-jenis asas marquee adalah seperti di atas, dan pada entry kali ini kita cuma nak belajar sedikit lagi teknik asas marquee. Saya tidak mahu menyentuh beberapa jenis marquee kali ini. Bagi yang sudah biasa mungkin tiada masalah dalam HTML ini. Cara buat marquee ini adalah untuk yang baru berjinak-jinak dalam HTML sahaja.

Ok!, selalunya kita seringkali di dedahkan dengan teknik marquee atau scrolling text atau pun text bergerak atau juga dipanggil tulisan bergerak. kali ini kita bermain dengan image ataupun gambar pula.

2 Jenis Marquee Image | Gambar bergerak yang hendak di kongsikan kali ini adalah seperti berikut ;

Jenis : Change the Scrolling Speed
Masih sama dengan Scrolling speed text seperti yang saya kongsikan terdahulu tetapi kali ini kita menggunakan Images (gambar). Lihat contoh seperti di bawah;

Kod marquee ini menggunakan kod yang sama akan tetapi di ulang-ulang sehingga 3 kali pada kadar kelajuan yang berlainan. Kod marquee images bergerak ini seperti di bawah ;

<marquee behavior="scroll" direction="left" scrollamount="1"><img src="LINK IMAGES ANDA"/></marquee><marquee behavior="scroll" direction="left" scrollamount="10"><img src="LINK IMAGES ANDA"/></marquee><marquee behavior="scroll" direction="left" scrollamount="20"><img src="LINK IMAGES ANDA"/></marquee>

Penerangan kod marquee | gambar bergerak di atas

* behavior="scroll" - bahasa arahan jenis scroll kepada image / gambar.

- boleh di gantikan mengikut jenis-jenis scroll seperti yang saya nyatakan di atas;

* direction="left" - bahasa arahan hala tuju images / gambar.

- boleh di gantikan dengan "right" "up" "down" "alternate".

* scrollamount="1" - bahasa arahan kelajuan pergerakkan images /gambar.

- boleh di gantikan mengikut kesesuaian "1" bersamaan perlahan dan menaik dengan menambahkan seperti "5" atau "20" atau berapa sahaja yang anda suka.

Anda masih lagi boleh mengubah dengan memasukkan link images / gambar anda sendiri dan juga boleh memasukkan link pada gambar-gambar tersebut. sebagai contoh seperti di bawah ;

<marquee behavior="scroll" direction="left" scrollamount="5"><a href='http://www.blogger2u.com' target='_blank'><img src="http://www.newyorker.com/online/blogs/photobooth/Gif-1.gif"/></marquee>

Dan akan kelihatan seperti ini / cuba klik pada gambar ;

Perhatikan pada kod di atas , link yang bewarna merah adalah link blog ini, manakala link images bewarna biru. Sengaja saya gunakan gambar yang berformat GIF supaya kelihatan lebih menarik. Namun anda boleh gunakan apa sahaja gambar walaupun bukan berformat GIF atau pun animasi (animated).

Selesai sudah untuk tutorial cara buat;

Marquee Images / Gambar bergerak / Scrolling Images bagi;

-Marquee images / Gambar sahaja.
-Marquee Images / Gambar dengan link blog.
-Marquee Images / Gambar dengan kelajuan tersendiri. (speed)

Ikuti pula tutorial seterunya iaitu ;

Marquee Images / Gambar dengan latar belakang (Background)

DEMO : Tutorial Cara Buat Marquee Image | Gambar Bergerak | Scrolling Image

Ok ! untuk tutorial yang kedua ini kita pergi ke step yang lebih advance sikit, yang mana kod gambar bergerak ini menggunakan dua images / gambar bergerak dan di set kan dengan CSS (style). Apa yang bergerak yang saya maksudkan? untuk tidak memeningkan biar saya jelaskan satu persatu apakah kod yang saya gunakan seperti gambar yang bergerak di atas.

1. Pertama - saya masih lagi memilih gambar animasi (GIF) gambar raksasa berlari dan bergerak tanpa kod marquee.
2. Kedua - masih lagi gambar animasi (GIF) iaitu kartun askar dan yang ini diarahkan menggunakan kod marquee.

Konsepnya tetap sama cuma dengan cara ini lebih mudah bagi yang sudah memahami HTML atau CSS. Cuba perhatikan kodnya di bawah;

<style type="text/css">
.html-marquee {height:110px;width:560px;background-color:ffff33;background-image:url(http://www.gifs.net/Animation11/Animals/Dragons/dragon_runs.gif);font-family:Cursive;font-size:14px;color:000000;border-width:1;border-style:dotted;border-color:000000;}
</style>
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="12" ><img src="http://images.wikia.com/tolololpedia/images/a/a5/Prajurit.gif"> DEMO : Tutorial Cara Buat Marquee Image | Gambar Bergerak | Scrolling Image</marquee>

Penerangan Tutorial Cara buat marquee images | gambar Bergerak dengan Background

• height:100px;width:630px adalah ketinggian dan kelebaran (boleh di edit ikut kesesuaian)
• background-color:ffff33 adalah warna latar belakang jika anda tidak menggunakan gambar raksasa sebagai latar belakang.
• http://www.gifs.net/Animation11/Animals/Dragons/dragon_runs.gif ini adalah URL gambar raksaa tersebut. masih boleh di buang. Jika hendak membuangnya perlu buang dari " background-image:url(http://www.gifs.net/Animation11/Animals/Dragons/dragon_runs.gif); ".
• size:14px; (saiz tulisan atau font), color:000000; (warna tulisan) border-width:1; (ketebalan border) border-style:dotted; (jenis border) border-color:000000; (warna boder). Maklumat lanjut untuk Cara buat Border Style [Rujuk Sini..]
• direction="left" adalah arahan ke kiri atau gantikan ke "right" untuk ke kanan.
• scrollamount="12" adalah kelajuaannya yang masih boleh di edit.
• <img src="http://images.wikia.com/tolololpedia/images/a/a5/Prajurit.gif">  adalah kod dan link gambar kartun askar tersebut.
• DEMO : Tutorial Cara Buat Marquee Image | Gambar Bergerak | Scrolling Image adalah text pada scrolling yang di letakkan sebaris dengan gambar kartun askar di atas.
• lain-lain adalah sama seperti keterangan yang saya beri di tutorial di atas.

Banyak lagi tip-tip yang ingin di kongsikan dalam penggunaan asas HTML ini. Tapi cukuplah setakat ini bagi permulaannya. Sebelum itu sila pelajari dan fahami topik berkenaan Tutorial Buat Text Bergerak | Marquee Code dan Cara Buat Border Style untuk kesenangan pada tutorial akan datang.

Dimana ada kemahuaan di di situ ada jalan. Selamat Mencuba. (sebenarnya aku penat nak olah ayat untuk tutorial ni demi atas permintaan seseorang. maaf tak habiskan yang seterusnya panjang sangat..)

tutorial tutorial blog 6/28/2017 10:00:00 am