Softonic

Bộ tạo văn bản cuộn

Bước 1 / 2
Tiếp theo

Các tiêu đề cuộn là cách các thanh thông báo, mã chứng khoán và biểu ngữ sự kiện trình bày lượng lớn thông tin trên một dải màn hình hẹp. Bộ tạo này tái hiện hiệu ứng HTML cổ điển <marquee> bằng hoạt ảnh CSS thuần túy @keyframes và transform: translateX(), do đó kỹ thuật này vẫn hoạt động trên mọi trình duyệt hiện đại mà không cần thẻ đã lỗi thời. Bạn chỉ cần chọn nội dung thông điệp, điều chỉnh tốc độ (tính bằng giây mỗi vòng lặp), thiết lập màu sắc và kích thước chữ, rồi xem trước trực tiếp dải ticker trước khi tự dựng lại bằng CSS hiển thị bên dưới.

Cách tạo biểu ngữ cuộn

  1. 1

    Nhập thông điệp

    Nhập tiêu đề. Các dòng ngắn (4–10 từ) sẽ hiển thị rõ ràng nhất trên thanh di động.

  2. 2

    Chọn tốc độ

    Thời gian trượt càng ngắn thì tốc độ cuộn càng nhanh. Khoảng thời gian 30–60 giây cho mỗi vòng hoàn toàn phù hợp với các bảng tin kiểu tin tức.

  3. 3

    Chọn màu sắc và kích thước

    Hãy chọn nền trước cho văn bản, nền sau cho thanh thông báo, và kích thước chữ phù hợp với chiều cao phần tiêu đề.

  4. 4

    Xem trước trực tiếp

    Phần trình diễn hoạt hình được hiển thị theo thời gian thực, giúp bạn đánh giá độ dễ đọc trước khi xuất bản.

  5. 5

    Dựng lại bằng CSS

    Sao chép mẫu `@keyframes` và `transform: translateX()` hiển thị bên dưới vào biểu định kiểu của riêng bạn để tái tạo dải ticker trên trang web của bạn.

Tại sao nên sử dụng hiệu ứng hoạt ảnh CSS thay vì <marquee>?

Thẻ <marquee> đã bị loại bỏ trong HTML5 và được WHATWG xác định là lỗi thời. Các trình duyệt vẫn hiển thị thẻ này cho đến nay, nhưng các công cụ hỗ trợ khả năng truy cập và bộ kiểm tra đều phản ánh những hạn chế; đồng thời người dùng cũng mất đi khả năng kiểm soát chính xác đối với các hiệu ứng làm mượt và lặp lại. Một hoạt ảnh transform: translateX() nằm bên trong thẻ overflow: hidden sẽ tạo ra hiệu ứng hình ảnh hoàn toàn giống nhau khi sử dụng các công cụ hiện đại.

Điều chỉnh tốc độ

Thời gian di chuyển phụ thuộc cả vào độ dài và chiều rộng tổng thể của khung hình. Một quy tắc tham khảo đối với khung hình có kích thước 1200 pixel là:

Thời gian sử dụng Cảm giác khi dùng Cách sử dụng thông thường
10–20 giây Nhanh chóng, đòi hỏi sự chú ý cao Giảm giá đặc biệt, cảnh báo khẩn cấp
30–45 giây Dòng tin tức Kết quả thi đấu thời gian thực và các tiêu đề chính
60–90 giây Không khí thông thường Tấm biển chỉ dẫn tại địa điểm và phòng hội nghị
120 giây trở lên Hầu như không chuyển động Bảng hiệu trang trí của các thương hiệu cao cấp

Danh sách kiểm tra khả năng truy cập

  • Bọc dải này trong role="marquee" hoặc aria-live="off" để các trình đọc màn hình không đọc lại thông điệp trong mỗi vòng lặp.
  • Tôn trọng chế độ chuyển động giảm bằng @media (prefers-reduced-motion: reduce) { animation: none; } và hiển thị văn bản một cách tĩnh.
  • Giữ tỷ lệ tương phản giữa văn bản và nền ít nhất là 4,5:1; văn bản chuyển động khó đọc hơn so với văn bản tĩnh.
  • Không bao giờ đặt các thông tin quan trọng (thông báo pháp lý, giá cả, thông báo lỗi) chỉ trong thanh cuộn.

Câu hỏi thường gặp

Không. Bản xem trước là một <div> chứa overflow: hidden và một hoạt ảnh CSS @keyframes dùng để di chuyển phần nội dung bên trong thông qua translateX; nó được xác thực là tuân thủ tiêu chuẩn HTML5 hiện đại.

Hãy thêm animation-play-state: paused vào công cụ chọn di chuyển trên container. Một số người dùng cho rằng cách này thuận tiện hơn so với vòng lặp cố định.

Đúng vậy. Hãy thay giá trị cuối của @keyframes từ translateX(-100%) thành translateX(100%) và bắt đầu từ -100% để đảo chiều. Thích hợp với các ngôn ngữ RTL.

Không. Các phép biến đổi CSS được thực hiện trên GPU và văn bản dưới dạng HTML thông thường trong DOM; do đó các công cụ thu thập dữ liệu có thể đọc nó bình thường mà không làm gián đoạn luồng chính của chương trình.

Tất cả nội dung đều được lưu trong trình duyệt khi bạn xem trước; không có dữ liệu nào được tải lên hay ghi nhận.

Công cụ liên quan

Trình tìm cờ emoji

Tìm emoji cờ của 195 quốc gia theo tên địa phương, tên tiếng Anh hoặc mã hai chữ cái. Kiểm tra chuỗi Unicode và sao chép ngay trong trình duyệt.

Ký hiệu mũi tên để sao chép

Sao chép các mũi tên Unicode phổ biến chỉ với một lần nhấp: thẳng, đôi, chéo, móc, vòng và tam giác cho tài liệu, chat và thiết kế.

Trình dịch chữ nổi Braille

Dịch văn bản sang chữ nổi Braille Unicode cấp 1 và giải mã Braille trở lại thành chữ cái. Xử lý chữ hoa, chữ số và dấu câu.

Bộ tạo phông chữ Discord

Chuyển văn bản bình thường thành các kiểu chữ Unicode phù hợp với tên dùng trong Discord, tên máy chủ và tin nhắn, bao gồm các dạng đậm, nghiêng, fraktur, monospace và dạng trang trí.

Trình tạo font Instagram

Tạo "font" Unicode (đậm, nghiêng, viết tay, đẳng khoảng, fraktur) để dán thẳng vào bio, tên, caption và bình luận Instagram của bạn.

Ký hiệu nhỏ hơn hoặc bằng

Sao chép ký hiệu ≤ cùng các ký hiệu so sánh toán học liên quan. Bao gồm Unicode, thực thể HTML và cú pháp LaTeX cho bảng tính, tài liệu nghiên cứu và trang web.

Công cụ này có phiên bản bằng các ngôn ngữ khác