Softonic

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

ขั้นตอน 1 / 3

พิมพ์ข้อความของคุณ

หนึ่งบรรทัด ไม่เกิน 500 ตัวอักษร ใช้อีโมจิได้ด้วย

ถัดไป: ปรับแต่ง

หัวข้อข่าวแบบเลื่อนคือวิธีที่แถบประกาศ รหัสหุ้น และป้ายเหตุการณ์นำเสนอข้อมูลจำนวนมากไว้ในแถบที่แคบบนหน้าจอ เครื่องมือนี้สร้างเอฟเฟกต์คลาสสิกของ 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) ของคอนเทนเนอร์ ผู้ใช้บางรายพบว่าวิธีนี้ใช้งานง่ายกว่าการใช้ลูปแบบคงที่

ได้ เพิ่ม animation-direction: reverse ให้กับองค์ประกอบที่มีแอนิเมชัน (.scrolling-text__track ในโค้ดที่สร้างขึ้น) ข้อความสองชุดช่วยให้การวนซ้ำต่อเนื่องไม่สะดุดทั้งสองทิศทาง จึงเหมาะกับภาษา RTL

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

ข้อความของคุณจะอยู่ในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการส่งไปยังเซิร์ฟเวอร์ของเราหรือเพิ่มลงในลิงก์ของหน้า แท็บนี้เก็บข้อความไว้เพื่อแสดงในขั้นตอนถัดไปเท่านั้น และข้อความจะถูกลบเมื่อคุณกด “เริ่มต้นใหม่” หรือปิดแท็บ ส่วนการตั้งค่าการแสดงผล (ความเร็ว ทิศทาง ฟอนต์ ขนาด สี และเอฟเฟกต์) จะถูกส่งต่อระหว่างขั้นตอนผ่านลิงก์ของหน้า

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

เครื่องสุ่มนามสกุล

สุ่มสร้างนามสกุลชุดหนึ่งจากนามสกุลที่พบบ่อยที่สุดในสหรัฐอเมริกา เฉพาะนามสกุล ไม่มีชื่อต้น

เครื่องมือแปลงข้อความเป็นเกียรุโมจิ

แปลงคานะญี่ปุ่น คันจิที่ใช้บ่อย และตัวอักษรละตินเป็นเกียรุโมจิ หรือเลือกแบบเต็มความกว้าง วงกลม สี่เหลี่ยม หรือตัวหนา แล้วคัดลอกได้ทันที

ตัวช่วยค้นหาคำสำหรับ Wordle

ป้อนคำเดาภาษาอังกฤษ 5 ตัวอักษรพร้อมระบุผลช่องสีเขียว สีเหลือง และสีเทา เพื่อค้นหาคำที่ตรงกัน ระบบตรวจสอบตัวอักษรซ้ำอย่างแม่นยำ

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

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

เครื่องสร้างชื่ออิตาลีแบบสุ่ม

จับคู่หนึ่งใน 40 ชื่ออิตาลีกับหนึ่งใน 40 นามสกุล ผลอาจซ้ำและไม่มีตัวกรองเพศหรือภูมิภาค

เครื่องสุ่มนามสกุลญี่ปุ่น

เลือกนามสกุลญี่ปุ่นแบบโรมาจิ 1–60 รายการโดยไม่ซ้ำในชุดเดียว จากรายการคงที่ 60 รายการ

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