How to achieve text scrolling effect in HTML

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.

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 >

Rendering:

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.

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>

Effect picture:

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 >

Rendering:

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 >

Rendering:

#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>

Rendering:

5, html nested scrolling subtitle box ( tag)

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

Rendering:

##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:

##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!

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

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Show More

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Where is the login entrance for gmail email?

7536

15

CakePHP Tutorial

1379

52

What is the format of the account name of steam

82

11

win11 activation key permanent

55

19

nyt connections hints and answers

21

86

Show More

Related knowledge

Table Border in HTML Sep 04, 2024 pm 04:49 PM

Guide to Table Border in HTML. Here we discuss multiple ways for defining table-border with examples of the Table Border in HTML.

HTML margin-left Sep 04, 2024 pm 04:48 PM

Guide to HTML margin-left. Here we discuss a brief overview on HTML margin-left and its Examples along with its Code Implementation.

Nested Table in HTML Sep 04, 2024 pm 04:49 PM

This is a guide to Nested Table in HTML. Here we discuss how to create a table within the table along with the respective examples.

HTML Table Layout Sep 04, 2024 pm 04:54 PM

Guide to HTML Table Layout. Here we discuss the Values of HTML Table Layout along with the examples and outputs n detail.

HTML Input Placeholder Sep 04, 2024 pm 04:54 PM

Guide to HTML Input Placeholder. Here we discuss the Examples of HTML Input Placeholder along with the codes and outputs.

HTML Ordered List Sep 04, 2024 pm 04:43 PM

Guide to the HTML Ordered List. Here we also discuss introduction of HTML Ordered list and types along with their example respectively

Moving Text in HTML Sep 04, 2024 pm 04:45 PM

Guide to Moving Text in HTML. Here we discuss an introduction, how marquee tag work with syntax and examples to implement.

HTML onclick Button Sep 04, 2024 pm 04:49 PM

Guide to HTML onclick Button. Here we discuss their introduction, working, examples and onclick Event in various events respectively.

See all articles

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

About us Disclaimer Sitemap

© php.cn All rights reserved