การใช้ HTML marquee แบบง่าย ๆ และการปรับแต่ง

บทความนี้เรามาดูวิธีการใช้ HTML marquee แบบง่าย ๆ กันครับ และการปรับแต่ง เช่นความเร็ว ทิศทาง ซึ่งแท็ก marquee เป็นการ scrolling ข้อความหรือรูปภาพทั้งแนวตั้งและแนวนอน ในเว็บเพจ เรามาดูว่ามีวิธีการใช้ยังไงกันครับ

ข้อแนะนำ
แท็ก marquee นี้บาง browser อาจจะไมี support ดังนั้นเราไม่แนะนำให้ใช้แท็กนี้ ซึ่งถ้าจะใช้ effect แบบนี้เราอาจจะใช้ javascript หรือใช้ CSS เข้ามาช่วย

เรามาดู Syntax กันก่อนครับ ตามด้านล่างเลย

<marquee attribute_name="attribute_value"....more attributes>
One or more lines or text message or image
</marquee>

จากตัวอย่าง Syntax ต่อไปเรามาดู Attributes กันต่อเลยครับตามด้านล่างเลย

- width เป็นการกำหนดขนาดความกว้างของ marquee เราสามารถใส่ค่าเป็นเปอร์เซ็นได้ เช่น 10 หรือ 20% และอื่น ๆ
- height เป็นการกำหนดขนาดความสูงของ marquee เราสามารถใส่ค่าเป็นเปอร์เซ็นได้ เช่น 10 หรือ 20% และอื่น ๆ
- direction เป็นการกำหนดทิศทางของ marquee ที่ต้องการจะเลื่อน ค่าที่สามารถใส่ได้ เช่น up, down, left หรือ right.
- behavior เป็นการกำหนดชนิดที่ใช้ในการเลื่อนของ marquee ค่าที่สามารถใส่ได้เช่น scroll, slide และ alternate.
- scrolldelay เป็นการกำหนดค่าในการ delay ระหว่างแต่ละรอบ ค่าที่สามารถใส่ได้ เช่น 10 และอื่น ๆ
- scrollamount เป็นการกำหนดความเร็วของ marquee text ค่าที่สามารถใส่ได้ เช่น 10 และอื่น ๆ
- loop เป็นการกำหนดเวลาในแต่ละรอบซึ่งค่า default ของมันก็คือ INFINITE
- bgcolor เป็นการกำหนดสีพื้นหลังใน terms
- hspace เป็นการกำหนด horizontal space รอบ ๆ marquee ค่าที่สามารถใส่ได้ เช่น 10 หรือ 20% หรืออื่น ๆ
- vspace เป็นการกำหนด vertical space รอบ ๆ marquee ค่าที่สามารถใส่ได้ เช่น 10 หรือ 20% หรืออื่น ๆ


ตัวอย่างโค้ดที่ 1
<marquee>นี่คือตัวอย่างพื้นฐานของการใช้แท็ก marquee</marquee>

ผลลัพธ์ที่ได้
นี่คือตัวอย่างพื้นฐานของการใช้แท็ก marquee

ตัวอย่างโค้ดที่ 2
<marquee direction="right">นี่จะเป็นการใช้แท็ก marquee ที่เลื่อนจากซ้ายไปขวา</marquee>

ผลลัพธ์ที่ได้
นี่จะเป็นการใช้แท็ก marquee ที่เลื่อนจากซ้ายไปขวา