Softonic

เครื่องสร้างข้อความสำหรับการเลื่อนหน้า

ขั้นตอน 1 / 2
ถัดไป

หัวข้อข่าวแบบเลื่อนคือวิธีที่แถบประกาศ รหัสหุ้น และป้ายเหตุการณ์นำเสนอข้อมูลจำนวนมากไว้ในแถบที่แคบบนหน้าจอ เครื่องมือนี้สร้างเอฟเฟกต์คลาสสิกของ HTML <marquee> ขึ้นมาใหม่ด้วยแอนิเมชัน CSS แบบบริสุทธิ์ @keyframes และ transform: translateX() ทำให้เทคนิคนี้ทำงานได้ในเบราว์เซอร์สมัยใหม่ทุกรุ่นโดยไม่ต้องใช้แท็กที่เลิกใช้แล้ว คุณสามารถเลือกข้อความ ตั้งความเร็วในการวน (ในหน่วยวินาทีต่อรอบ) กำหนดสีและขนาดตัวอักษร แล้วดูตัวอย่างทิกเกอร์แบบสดก่อนจะนำไปสร้างใหม่ด้วย CSS ที่แสดงไว้ด้านล่าง

วิธีสร้างแบนเนอร์เลื่อน

  1. 1

    กรุณาป้อนข้อความ

    กรุณาป้อนหัวข้อ บรรทัดสั้น (4–10 คำ) จะแสดงผลได้ดีที่สุดบนแถบแสดงข้อมูลแบบเคลื่อนไหว

  2. 2

    เลือกความเร็ว

    ยิ่งเวลาการเลื่อนหน้าเว็บน้อยเท่าไร การเลื่อนก็จะรวดเร็วขึ้นเท่านั้น โดยการเลื่อนครบวงจรในช่วง 30–60 วินาทีเหมาะสมสำหรับตัวแสดงข้อมูลแบบข่าว

  3. 3

    ตั้งค่าสีและขนาด

    เลือกสีตัวอักษรสำหรับข้อความ พื้นหลังสำหรับแถบ และขนาดตัวอักษรที่เหมาะสมกับความสูงของหัวข้อ

  4. 4

    ดูตัวอย่างการเล่นแบบเรียลไทม์

    ตัวอย่างมีการเคลื่อนไหวแบบเรียลไทม์ เพื่อให้คุณสามารถประเมินความชัดเจนในการอ่านได้ก่อนเผยแพร่

  5. 5

    สร้างใหม่ด้วย CSS

    คัดลอกรูปแบบ `@keyframes` และ `transform: translateX()` ที่แสดงไว้ด้านล่างไปยังสไตล์ชีตของคุณเอง เพื่อจำลองทิกเกอร์บนเว็บไซต์ของคุณ

ทำไมถึงใช้การเคลื่อนไหวแบบ CSS แทน <marquee>

แท็ก <marquee> ถูกยกเลิกการใช้งานใน HTML5 และถูกระบุโดย WHATWG ว่าล้าสมัยแล้ว แม้เบราว์เซอร์จะยังคงแสดงผลแท็กนี้อยู่ในปัจจุบัน แต่เครื่องมือด้านความสามารถในการเข้าถึงเนื้อหาและตัวตรวจสอบรูปแบบการแสดงผลมักแสดงข้อเสียของแท็กนี้ ส่วนการควบคุมกระบวนการปรับรูปแบบภาพและการทำวน (looping) ก็ลดลงอย่างมาก การใช้แอนิเมชันประเภท transform: translateX() ภายในแท็ก overflow: hidden จะให้ผลลัพธ์ทางภาพที่เหมือนกันอย่างสมบูรณ์เมื่อใช้เครื่องมือสมัยใหม่

การปรับความเร็ว

ระยะเวลาในการเดินผ่านขึ้นอยู่กับทั้งระยะเวลาและความกว้างรวม โดยกฎคร่าวๆ สำหรับช่องแสดงผลขนาด 1200 พิกเซลคือ:

ระยะเวลา ความรู้สึก การใช้งานโดยทั่วไป
10–20 วินาที เร็ว มีความสนใจสูง การลดราคาพิเศษ หรือการแจ้งเตือนเร่งด่วน
30–45 วินาที แถบข่าว คะแนนการแข่งขันแบบเรียลไทม์ และแถบข้อมูลสำคัญ
60–90 วินาที สภาพแวดล้อมโดยรอบ ป้ายบอกทางในสถานที่จัดงานและห้องประชุม
120 วินาทีขึ้นไป เกือบไม่เคลื่อนไหวเลย ป้ายแบรนด์ระดับหรูสำหรับการตกแต่ง

รายการตรวจสอบความสะดวกในการใช้งาน

  • ห่อแถบด้วย role="marquee" หรือ aria-live="off" เพื่อไม่ให้โปรแกรมอ่านหน้าจอแสดงข้อความซ้ำในแต่ละรอบ
  • ลดการเคลื่อนไหวของรูปแบบการแสดงผลโดยใช้ @media (prefers-reduced-motion: reduce) { animation: none; } และแสดงข้อความในรูปแบบคงที่
  • ควรรักษาระดับอัตราส่วนคอนทราสต์ให้อยู่ที่อย่างน้อย 4.5:1 ระหว่างข้อความกับพื้นหลัง เนื่องจากข้อความที่เคลื่อนไหวจะอ่านได้ยากกว่าข้อความที่ไม่เคลื่อนไหว
  • อย่าใส่ข้อมูลสำคัญ (เช่น คำเตือนทางกฎหมาย ราคา หรือข้อความแสดงข้อผิดพลาด) เฉพาะในแถบเลื่อนเท่านั้น

คำถามที่พบบ่อย

ไม่ ตัวอย่างที่แสดงคือ <div> ซึ่งประกอบด้วย overflow: hidden และแอนิเมชัน CSS @keyframes ที่ควบคุมการเคลื่อนไหวของส่วนภายในโดยใช้ translateX โดยผ่านการตรวจสอบว่าเป็น HTML5 รูปแบบสมัยใหม่

เพิ่ม animation-play-state: paused ลงในตัวเลือกแบบลอย (hover selector) ของคอนเทนเนอร์ ผู้ใช้บางรายพบว่าวิธีนี้ใช้งานง่ายกว่าการใช้ลูปแบบคงที่

ใช่ ให้เปลี่ยนค่าปลายของ @keyframes จาก translateX(-100%) เป็น translateX(100%) และเริ่มต้นจาก -100% เพื่อเปลี่ยนทิศทางการทำงาน วิธีนี้มีประโยชน์สำหรับภาษา RTL

ไม่ใช่ เพราะการแปลงโค้ด CSS จะดำเนินการบน GPU ส่วนข้อความนั้นอยู่ในรูปแบบ HTML ธรรมดาภายใน DOM จึงสามารถถูกอ่านได้ตามปกติโดยเครื่องมือสแกนเว็บ และแอนิเมชันก็จะไม่ทำให้เธรดหลักทำงานหยุดชะงัก

ขณะที่คุณดูตัวอย่างเนื้อหา ข้อมูลทั้งหมดจะยังคงอยู่ในเบราว์เซอร์ของคุณ โดยไม่มีการอัปโหลดหรือบันทึกใดๆ เกิดขึ้น

เครื่องมือที่เกี่ยวข้อง

สัญลักษณ์น้อยกว่าหรือเท่ากับ

คัดลอกสัญลักษณ์ ≤ และสัญลักษณ์เปรียบเทียบทางคณิตศาสตร์ที่เกี่ยวข้อง รวมถึง Unicode เอนทิตี HTML และการเขียน LaTeX สำหรับสเปรดชีต งานวิจัย และหน้าเว็บ

สัญลักษณ์ลูกศรสำหรับคัดลอก

คัดลอกลูกศร Unicode ที่ใช้บ่อยได้ในคลิกเดียว ทั้งแบบตรง สองเส้น ทแยง มีขอ วงกลม และสามเหลี่ยม สำหรับเอกสาร แชต และงานออกแบบ

เครื่องแปลงตัวเลขเป็นคำไทย

เขียนจำนวนไม่เกิน 18 หลักเป็นคำไทย หรือเขียนจำนวนบาทและสตางค์ตามค่าที่กรอกในเบราว์เซอร์ รองรับเลขอารบิกกับเลขไทยและไม่ปัดค่า

เครื่องแปลงข้อความที่เหมาะกับผู้มีภาวะดิสเล็กเซีย

จัดเรียงข้อความที่วางใหม่เป็นย่อหน้าสั้นๆ และบรรทัดยาวประมาณ 72 ตัวอักษรเพื่อให้อ่านง่ายขึ้น คัดลอกผลลัพธ์ไปวางในเอกสาร อีเมล หรือโปรแกรมแก้ไขใดก็ได้

เครื่องมือสร้างตัวอักษรวงกลม

แปลงข้อความธรรมดาให้เป็นตัวอักษรวงกลม (Ⓐ Ⓑ Ⓒ) ที่คัดลอกแล้ววางลงในไบโอ Instagram, TikTok และ Discord ได้ มีทั้งตัวพิมพ์ใหญ่และตัวพิมพ์เล็กในวงกลม พร้อมตัวเลขในวงกลม โดยไม่ต้องใช้แอป

ตัวสร้างข้อความกลิตช์

สร้างข้อความกลิตช์สไตล์ Zalgo ด้วยเครื่องหมายประกอบ Unicode เลือกระดับความเข้ม ดูรูปแบบต่าง ๆ แล้วคัดลอกข้อความที่ดูเสียหายสำหรับโปรไฟล์ มีม หรือโพสต์สยองขวัญ

เครื่องมือนี้มีให้บริการในภาษาอื่น