Tạo hiệu ứng văn bản chuyển động ngang trên trang web là một cách thú vị để thu hút sự chú ý của người dùng. Một trong những cách để thực hiện điều này là sử dụng thẻ <marquee> trong HTML. Thông qua bài viết này, bạn sẽ tìm hiểu cách sử dụng thẻ này để tạo hiệu ứng văn bản chạy ngang.
Sử dụng cơ bản của thẻ <marquee>
Thẻ này rất đơn giản để sử dụng. Bạn chỉ cần đặt văn bản muốn hiển thị chuyển động giữa hai thẻ <marquee>. Dưới đây là một ví dụ cơ bản:
<marquee>Đây là văn bản chạy ngang</marquee>
Khi trình duyệt hiển thị đoạn mã này, văn bản "Đây là văn bản chạy ngang" sẽ tự động di chuyển từ phải sang trái.
Tuỳ chỉnh hướng di chuyển
Bạn cũng có thể điều chỉnh hướng di chuyển của văn bản với thuộc tính direction. Có bốn giá trị chính là left, right, up và down. Dưới đây là một ví dụ sử dụng thuộc tính direction để di chuyển văn bản từ trái sang phải:
<marquee direction="right">Văn bản này di chuyển từ trái sang phải</marquee>
Điều chỉnh tốc độ chuyển động
Thẻ này còn cho phép bạn điều chỉnh tốc độ chạy của văn bản bằng cách sử dụng thuộc tính scrollamount (tính theo pixel) và scrolldelay (tính theo mili giây giữa mỗi khung hình). Ví dụ, để tạo hiệu ứng văn bản di chuyển với tốc độ chậm, bạn có thể thiết lập như sau:
<marquee scrollamount="2" scrolldelay="100">Văn bản này di chuyển chậm</marquee>
Điều chỉnh hành vi di chuyển
Thuộc tính behavior cho phép bạn kiểm soát cách văn bản di chuyển. Có ba tùy chọn chính là scroll, slide và alternate. Cụ thể, scroll là dạng mặc định và sẽ làm cho văn bản di chuyển liên tục. Giá trị slide sẽ dừng lại khi văn bản chạy hết không gian hiển thị, và alternate sẽ khiến văn bản di chuyển qua lại.
<marquee behavior="alternate">Văn bản di chuyển qua lại</marquee>
Lặp lại hoặc dừng sau một số lần nhất định
Để điều chỉnh số lần văn bản chạy, bạn có thể sử dụng thuộc tính loop. Bạn có thể đặt giá trị loop là infinite để chạy mãi mãi hoặc một số cụ thể để chỉ định số lần chạy. Ví dụ:
<marquee loop="3">Văn bản này chỉ chạy ba lần</marquee>
Kết hợp các thuộc tính
Tất cả các thuộc tính trên có thể được kết hợp để tạo ra hiệu ứng văn bản chạy đa dạng. Dưới đây là một ví dụ hoàn chỉnh sử dụng nhiều thuộc tính cùng lúc:
<marquee direction="left" scrollamount="5" scrolldelay="50" behavior="alternate" loop="2">
Văn bản này di chuyển với nhiều hiệu ứng
</marquee>
Lưu ý về sự hỗ trợ và sử dụng thẻ <marquee>
Mặc dù thẻ này rất tiện dụng và dễ dàng sử dụng để tạo hiệu ứng chuyển động, nó đã bị loại bỏ khỏi tiêu chuẩn HTML5 và được coi là thuộc tính lỗi thời. Thay vì sử dụng marquee, bạn nên xem xét sử dụng CSS và JavaScript để tạo hiệu ứng chuyển động cho văn bản, đảm bảo trang web của bạn tuân thủ các tiêu chuẩn hiện đại.
Dưới đây là một ví dụ đơn giản sử dụng CSS để tạo hiệu ứng tương tự:
<style>
.marquee {
display: inline-block;
white-space: nowrap;
overflow: hidden;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}
</style>
<div class="marquee">Đây là văn bản chạy ngang với CSS</div>
Thông qua các giải pháp hiện đại như CSS và JavaScript, bạn có thể tạo ra hiệu ứng động phức tạp và tuỳ chỉnh hơn, đồng thời duy trì tính tương thích và hiệu suất của trang web.
Comments