Community Learn Tools Library Leisure
search
English
Home > Web Front-end > HTML Tutorial > body text

How to achieve text scrolling effect in HTML

青灯夜游
Release： 2018-11-29 09:30:58
Original
34470 people have browsed it

In HTML, the text scrolling effect can be achieved through the HTML tag, and different text scrolling effects can be achieved by setting different attributes in the tag.

How to achieve text scrolling effect in HTML

It is actually very simple to realize the scrolling effect of text in HTML. This article will introduce to you the method of realizing the scrolling effect of text in HTML tag, so that everyone can Understand the different text scrolling effects achieved by setting different attributes of the tag.

HTML The Marquee tag is a non-standard HTML element that can be used to scroll images or text horizontally or vertically.

Simply put, it will automatically scroll images or text up, down, left or right.

Let’s take a lookAn example of implementing simple text scrolling: 

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >
Copy after login

Rendering:

How to achieve text scrolling effect in HTML

Isn’t it very simple? Just put the text you want to scroll in the tag.

Next let’s take a look at the properties of the HTML tag and see how the HTML tag can set images or text scroll.

The Marquee element contains several attributes used to control and adjust the appearance and scrolling method of the marquee rolling subtitles.

How to achieve text scrolling effect in HTML

Example of Marquee tag setting rolling subtitles:

Let’s use these properties to set

1. Simple rolling subtitle example: set width, scrolling method, background color 

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >     
	这是滚动字幕的一个例子......  
</marquee>
Copy after login

Effect picture:

How to achieve text scrolling effect in HTML

2. More complex scrolling subtitles

All content that needs to be scrolled will slide over the entire length of the scroll box, but stop at the end to permanently display the content. 

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >     
   这是一个复杂的滚动字幕例子......  
</marquee >
Copy after login

Rendering:

How to achieve text scrolling effect in HTML

3. Set the direction of HTML text scrolling

By setting the properties of the marquee tag, we can change the scrolling The direction of the text. Directions can be left, right, up and down.

Let’s look at an example of scrolling the selection box on the right. 

<marquee width = "100%">     
   文本默认从右向左滚动......  
</marquee >  
<marquee width = "100%" bgcolor = "pink"  direction = "right" >     
   设置文本从左向右滚动......  
</marquee >
Copy after login

Rendering:

How to achieve text scrolling effect in HTML

#4. Set the subtitles to scroll left and right in a circular motion

so that the text scrolls from right to left. Scroll from left to right. 

<marquee width = "100%" behavior = "alternate" bgcolor = "pink" >     
   文本从右向左滚动后，在从左向右滚动的例子......  
</marquee>
Copy after login

Rendering:

How to achieve text scrolling effect in HTML

5, html nested scrolling subtitle box ( tag)

<marquee width = "400px" height ="200px" behavior = "alternate" style ="border:2px solid red" >      
	<marquee behavior = "alternate" >   
	      嵌套滚动字幕框...  
	</marquee >  
</marquee>
Copy after login

Rendering:

How to achieve text scrolling effect in HTML

##HTML Disadvantages of the tag:

1) Marquee settings Scrolling subtitles can be distracting because the human eye is constantly drawn to the motion and subtitles.

2) Text set by Marquee can move, so clicking on static text is more difficult depending on scroll speed.

3) The Marquee tag element is a non-standard HTML element.

4) The scrolling subtitles set by Marquee draw the user's attention unnecessarily and make the text harder to read.

Browser support:

How to achieve text scrolling effect in HTML

##Summary:

That’s it for this article The entire content of the article is hoped to be helpful to everyone's study.

The above is the detailed content of How to achieve text scrolling effect in HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels：
html marquee
source：php.cn
Previous article：What is the difference between canvas and SVG in HTML5 Next article：What is the difference between HTML5 and HTML4
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Move the content to the left by adding the Width property I have provided margins to the body. main {left margin: 200px; right margin: 200px; text a...
From 2024-04-06 22:01:35
0
3
816
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Laravel 8 - How to redirect /{editable_text} route to /{user} route I've been trying to create a redirect route to lead me to a user profile. The redirect rou...
From 2024-04-06 17:26:11
0
1
410
React Three Fiber: Why are my scroll events lagging? In ReactThreeFiber, I have a React component that generates a sprite that I want to persis...
From 2024-04-06 13:39:24
0
1
410
Website using Live Server doesn't work when I launch it from a file I tried several browsers and in every case the website works fine with LiveServer. On the ...
From 2024-04-06 12:46:18
0
1
403
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template

Public welfare online PHP training，Help PHP learners grow quickly！

About us Disclaimer Sitemap

© php.cn All rights reserved