How to achieve text scrolling effect in HTML5

This article will introduce to you how to achieve text scrolling effect in HTML5. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

HTML5 implements text scrolling effect

<div class="custom-notice">
   <i class="icon-notice"></i>
   <marquee class="noticeText ng-binding" direction="left" behavior="alternate" scrollamount="100" scrolldelay="1000" loop="5" width="100%" onmouseover="this.stop();" onmouseout="this.start();"  style="width: 100%;">充值公告：首充100送1元</marquee>
</div>

1. Scroll direction attribute direction

The scrolling direction of this attribute can be set to four values: up (text up), down (text down), left (text to the left), right (text to the right).

2. Scroll mode attribute behavior

The value of this attribute has three values: scroll (cyclic scrolling, default effect), slide (scroll only once and then stop) , alternate (scroll back and forth alternately)

3. Scroll speed attribute scrollamount

This attribute can adjust the speed of text scrolling. The speed of scrolling text is actually set by The length of each movement of the scrolling text, in pixels. The value only contains numbers, without the px unit. If the unit is included, the setting will be invalid.

4. Scroll delay attribute scrolldelay

This attribute is used to set the time interval for scrolling text (the time interval between two scrolling steps).

The time interval unit of scrolldelay is milliseconds, and the value only writes numbers

5. The scrolling loop attribute loop

After setting the scrolling text, the default will be The loop continues indefinitely. If you want to control the number of loops, you can set this property.

6. Scroll range attributes width&height

If you want to control the scrolling range of text, you can use these two attributes in pixels and do not write px units. By default, the width of left and right scrolling is the same as the width of the browser window, and the height is the same as the height of the text. When up and down, the height is one-third of the browser window height.

7. Scroll background color attribute bgcolor

This attribute sets the background color for the scroll area (the value is a hexadecimal color code and English).

8. Scroll space attribute hspace&vspace

hsapce attribute can set the horizontal position of the scrolling range, and vspace is used to set the vertical position of the scrolling range. The units are all pixels, and the unit px is not written when writing the value.

For more programming-related knowledge, please visit: Introduction to Programming! !