โค้ดตัวอักษรเลื่อน

การสร้างตัวอักษรเลื่อนใน 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 ที่ดีกว่า

บทความอื่น ๆ