การสร้างตัวอักษรเลื่อนใน HTML สามารถทำได้โดยใช้แท็ก <marquee> ค่ะ

โครงสร้างพื้นฐาน

HTML

<marquee>ข้อความที่ต้องการให้เลื่อน</marquee>

ใช้โค้ดอย่างระมัดระวัง

ตัวอย่าง

HTML

<!DOCTYPE html>
<html>
<head>
  <title>ตัวอย่างตัวอักษรเลื่อน</title>
</head>
<body>

<marquee>สวัสดีปีใหม่ 2568!</marquee>

</body>
</html>

ใช้โค้ดอย่างระมัดระวัง

คุณสมบัติเพิ่มเติม (Attributes)

  • direction: กำหนดทิศทางการเลื่อน
    • left (ค่าเริ่มต้น): เลื่อนจากขวาไปซ้าย
    • right: เลื่อนจากซ้ายไปขวา
    • up: เลื่อนจากล่างขึ้นบน
    • down: เลื่อนจากบนลงล่าง
  • behavior: กำหนดรูปแบบการเลื่อน
    • scroll (ค่าเริ่มต้น): เลื่อนต่อเนื่องไปเรื่อยๆ
    • slide: เลื่อนไปจนสุดขอบแล้วหยุด
    • alternate: เลื่อนไปกลับ
  • scrollamount: กำหนดความเร็วในการเลื่อน (ค่าเป็นตัวเลข ยิ่งมากยิ่งเร็ว)
  • scrolldelay: กำหนดระยะเวลาหน่วงระหว่างการเลื่อนแต่ละครั้ง (ค่าเป็นมิลลิวินาที)
  • loop: กำหนดจำนวนครั้งที่ให้วนลูป (ค่าเป็นตัวเลข หรือ infinite สำหรับการวนลูปไม่สิ้นสุด)
  • bgcolor: กำหนดสีพื้นหลังของพื้นที่ตัวอักษรเลื่อน
  • height: กำหนดความสูงของพื้นที่ตัวอักษรเลื่อน
  • width: กำหนดความกว้างของพื้นที่ตัวอักษรเลื่อน

ตัวอย่างการใช้คุณสมบัติเพิ่มเติม

HTML

<marquee direction="right" behavior="alternate" scrollamount="10" scrolldelay="50" bgcolor="yellow">
  ข้อความนี้จะเลื่อนไปกลับจากซ้ายไปขวา
</marquee>

ใช้โค้ดอย่างระมัดระวัง

ข้อควรระวัง

  • แท็ก <marquee> เป็นแท็กที่เลิกใช้แล้วใน HTML5 (deprecated) แต่เบราว์เซอร์ส่วนใหญ่ยังคงรองรับอยู่
  • การใช้ <marquee> มากเกินไป อาจทำให้เว็บไซต์ดูรก และรบกวนผู้ใช้งานได้
  • แนะนำให้ใช้ CSS หรือ JavaScript ในการสร้าง Animation สำหรับตัวอักษรเลื่อน แทนการใช้ <marquee> เพื่อความทันสมัย และ SEO ที่ดีกว่า