Tạo đoạn Text chuyển động

Để tạo sự chú ý, chúng ta có thể sử dụng các cách thức như tạo đoạn văn bản kiểu chữ đậm, chữ màu, hoặc nhấp nháy... Ngoài ra còn có thể tạo ra đoạn text chuyển động với tag Marquee trong ngôn ngữ HTML.

Thẻ <marquee> trong HTML điều khiển text area hay images trượt theo ý muốn, tương tự như blink tag làm chữ nhấp nháy marquee tag rất hữu ích nếu bạn muốn làm nổi bật một vùng nào đó trong trang web cho người xem để ý. Marquee tag có vài thuộc tính (attribute) cơ bản nhưng cũng đủ cho ta tạo được một text chuyển động thật như ý.

Mời các bạn tìm hiểu cơ bản về Marquee tag:



Cú pháp:

<marquee attributes ...>HTML text, img, tag </marquee>


ALIGN : top, bottom, right, left, middle
HEIGHT, WIDTH
BEHAVIOR : scroll, slide, alternate
DIRECTION : up, down, left, right
HSPACE, VSPACE
LOOP : -1, n
SCROLLAMOUNT, SCROLLDELAY
BGCOLOR, CLASS, STYLE

Tạo đoạn Text chuyển động
Chi tiết:

ALIGN: căn lề cho text bên trong thẻ <marquee>, đoạn text này sẽ dồn về phía mà ta định.
HEIGHT, WIDTH: bề rộng và bề ngang của vùng Marquee. Ví dụ:

<marquee align="right" height="50" width="400"> Text Here </marquee>

<marquee align="right" height="50" width="400"> Text Here </marquee>

BEHAVIOR: scroll - trượt hết miền marquee và bắt đầu lại từ đầu, slide - trượt đến điểm cuối miền marquee (tính theo hướng trượt) và đứng lại tại đó, alternate - trượt qua lại. Ví dụ:


<... behavior="alternate">Text Here

<... behavior="alternate">Text Here </...>

DIRECTION: hướng trượt. Ví dụ:

<... direction="right">Text Here </...>

<... direction="right">Text Here

HSPACE, VSPACE: khoảng cách ngang và dọc giữa text xung quanh và rìa vùng Marquee. Ví dụ:

<... hspace=100>Text Here </...>


<... hspace=100>Text Here


LOOP: lặp lại số lần trượt, nếu -1 : lặp lại vĩnh viễn. Ví dụ:

<... loop="-1">Text Here </...>

<... loop="-1">Text Here


SCROLLAMOUNT, SCROLLDELAY: đột mượt và độ nhanh chậm của text trượt. SCROLLAMOUNT càng nhỏ thì càng mượt. SCROLLDELAY càng lớn thì càng chậm. Ví dụ:

<... scrollamount="5" scrolldelay="50">Text Here </...>

<... scrollamount="5" scrolldelay="50">Text Here


BGCOLOR, CLASS, STYLE: định style cho marque thí dụ như màu nền, text bên trong,... (đòi hỏi phải biết chút css).

Trên đây là một số thuộc tính cơ bản của Marquee mà tôi được biết. Ngoài ra còn một số sự kiện tương tác của người dùng tới marquee, thí dụ như onclick, onmouseover,... bạn hãy tự nghiên cứu thêm về cái này nhé. Tôi làm một ví dụ: khi user rà chuột vào marquee (onmouseover), nếu tôi muốn đoạn text đang chuyển động tạm dừng, sau khi user không rà chuột vào nữa (onmouseout), đoạn text lại tiếp tục chuyển động? thì làm như sau:

<... onmousemove="this.stop()" onmouseout="this.start()">Text Here </...>
<... onmousemove="this.stop()" onmouseout="this.start()">Text Here

Còn nhiều điều mới lạ đang chờ bạn, chắc chắn bạn sẽ biết được nhiều điều thú vị hơn nữa.

Posted in: Thiết kế blogspot