นี่คือโค้ด HTML ที่ใช้สำหรับสร้างเอฟเฟกต์ “อักษรวิ่ง” ที่ใช้ในหน้าเว็บ คุณสามารถใช้ CSS เพื่อเพิ่มรูปแบบและความสวยงามให้กับข้อความที่วิ่งได้
```html
<!DOCTYPE html>
<html lang="th">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>อักษรวิ่ง</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
font-family: Arial, sans-serif;
}
.marquee {
width: 100%;
overflow: hidden;
white-space: nowrap;
box-sizing: border-box;
border: 2px solid #007BFF;
background-color: #ffffff;
}
.marquee-text {
display: inline-block;
padding-left: 100%; /* เริ่มจากขวา */
animation: marquee 10s linear infinite; /* ควบคุมความเร็ว */
}
@keyframes marquee {
0% {
transform: translate(0);
}
100% {
transform: translate(-100%);
}
}
</style>
</head>
<body>
<div class="marquee">
<div class="marquee-text">นี่คือข้อความที่วิ่งจากขวามาซ้าย.</div>
</div>
</body>
</html>
```
### คำอธิบาย
1. **HTML Structure**: เรากำหนดโครงสร้าง HTML ที่เรียบง่าย มี `div` สำหรับ "marquee" ที่จะเก็บข้อความที่วิ่ง
2. **CSS Styles**:
- เราใช้ `flexbox` เพื่อจัดกลางเนื้อหาในแนวตั้งและแนวนอน
- `.marquee` จะมี border และพื้นหลังที่กำหนด
- `.marquee-text` มีการตั้งค่า `animation` ซึ่งใช้ `@keyframes` เพื่อสร้างเอฟเฟกต์การวิ่ง
3. **Animation**: เอฟเฟกต์การวิ่งจะถูกควบคุมด้วย `translate()` โดยข้อความจะเริ่มจากขวาและวิ่งออกไปทางซ้าย
### การใช้งาน
คุณสามารถคัดลอกโค้ดด้านบนไปวางในไฟล์ HTML แล้วเปิดด้วยเว็บเบราวเซอร์เพื่อดูผลลัพธ์ได้เลย! หากต้องการปรับความเร็วหรือข้อความ สามารถแก้ไขค่าต่างๆ ใน CSS ได้ตามต้องการ