ข้อความวิ่ง (Marquee) คืออะไร ?

                    Marquee คือข้อความที่เคลื่อนที่ไปบนหน้าจอเว็บไซต์ เช่น  วิ่งจากขวาไปซ้าย ⬅️  วิ่งจากซ้ายไปขวา ➡️ วิ่งขึ้นหรือลง ⬆️⬇️  มักใช้สำหรับ

• • • • • ✅ ข่าวประชาสัมพันธ์

        • ✅ ข้อความต้อนรับ (Welcome Message)

        • ✅ ประกาศสำคัญ

        • ✅ ข้อความสร้างความน่าสนใจบนหน้าแรกเว็บไซต์
          
          

ตัวอย่าง

วิธีทำข้อความวิ่งใน Google Sites

        Google Sites ไม่มีเครื่องมือ Marquee โดยตรง แต่สามารถใช้ Embed Code (HTML) ได้

วิธีที่ 1: ใช้โค้ด Marquee แบบง่าย

1. 1. 1. 1. เลือกตำแหน่งที่ต้องการทำข้อความวิ่ง ใน  Google Sites

         2. เลือก แทรก (Insert)

         3. เลือก ฝัง (Embed)

         4. เลือก ฝังโค๊ด (Embed Code)

         5. วางโค้ดนี้ 

         6. กด ถัดไป (Next)  →แทรก (Insert)

<marquee behavior="scroll" direction="left">

🌈 Welcome to Web Classroom ✨ Fun Learning 💻 Creative Thinking 🚀 Explore the AI World

</marquee>

<div style="

background:#f0fffe;

padding:10px;

border-radius:20px;

font-size:20px;

font-weight:bold;

color:#2196f3;

">

<marquee behavior="scroll" direction="left" scrollamount="5">

🌈 Welcome to Web Classroom ✨ Fun Learning 💻 Creative Thinking 🤖 Explore the AI World 🚀

</marquee>

</div>

<div style="

background:linear-gradient(90deg,#e3f2fd,#f0faff,#ffffff);

padding:12px;

border-radius:25px;

font-family:'Prompt',sans-serif;

font-size:22px;

font-weight:700;

color:#1976d2;

box-shadow:0 4px 12px rgba(0,0,0,0.08);

">

<marquee behavior="scroll" direction="left" scrollamount="6">

🚀 Welcome to Suphalak Website ✨ Learn • Create • Code • Innovate 🤖 AI • Coding • Technology • Future Skills 🌈

</marquee>

</div>

<div class="marquee-container">

  <div class="marquee-text">

    🌈 Welcome to Suphalak Website 🚀 Welcome to Suphalak Website ✨ Learn • Create • Code • Innovate 🤖 AI • Coding • Technology • Future Skills 🌈

  </div>

</div>

<style>

.marquee-container {

  width: 100%;

  overflow: hidden;

  background: #f0fffe;

  padding: 12px 0;

  border-radius: 14px;

}

.marquee-text {

  display: inline-block;

  white-space: nowrap;

  font-size: 24px;

  font-weight: bold;

  color: #6a5acd;

  font-family: 'Poppins', sans-serif;

  animation: marquee 15s linear infinite;

}

@keyframes marquee {

  from {

    transform: translateX(100%);

  }

  to {

    transform: translateX(-100%);

  }

}

</style>