Moving text in HTML
For more questions and answers visit our website at Frontend Interview Questions
Using the <marquee> Tag (Deprecated)
The <marquee> tag was used in older HTML versions to create scrolling text. However, since it has been deprecated in HTML5 and is no longer recommended for use in modern web development, it’s better to use CSS for similar effects.
Here is an example of the <marquee> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Text with Marquee</title>
</head>
<body>
<h2>Example of Moving Text Using Marquee</h2>
<marquee>Welcome to our website! This text is scrolling horizontally.</marquee>
</body>
</html>In this example, the text inside the <marquee> tag scrolls horizontally across the screen. You can adjust its direction, speed, and behavior by adding attributes like direction, scrollamount, and behavior. However, as <marquee> is no longer standard, using CSS is highly recommended.
Moving Text Using CSS
CSS animations are the modern way to create moving text. CSS gives you much more flexibility and control over the behavior of the text and ensures compatibility with current web standards.
Example: Moving Text Horizontally with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moving Text with CSS</title>
<style>
.moving-text {
position: relative;
animation: move-text 10s linear infinite;
font-size: 20px;
color: #000;
}@keyframes move-text {
0% {
left: 100%;
}
100% {
left: -100%;
}
}
</style>
</head>
<body>
<h2>Moving Text with CSS</h2>
<p class="moving-text">This text moves across the screen using CSS animations!</p>
</body>
</html>Explanation:
position: relative;: The text element is positioned relative to its normal position, allowing it to move across the screen.animation: move-text 10s linear infinite;: This defines the animation that will move the text. It will take 10 seconds for the text to complete its motion, and thelineartiming function ensures that the text moves at a constant speed. Theinfinitekeyword makes the animation repeat indefinitely.@keyframes move-text: This defines the starting and ending positions of the animation. At0%, the text starts from the right (100%) of the screen, and at100%, it moves to the left (-100%).
Example: Moving Text Vertically with CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical Moving Text with CSS</title>
<style>
.vertical-move {
position: relative;
animation: vertical-text 8s linear infinite;
font-size: 20px;
color: blue;
}@keyframes vertical-text {
0% {
top: 100%;
}
100% {
top: -100%;
}
}
</style>
</head>
<body>
<h2>Vertical Moving Text with CSS</h2>
<p class="vertical-move">This text moves vertically using CSS animations!</p>
</body>
</html>In this example, the text moves vertically from the bottom to the top of the screen, using the same CSS principles but applied to the top property.
Customizing Moving Text with CSS
CSS offers a wide range of options to customize the behavior of moving text. You can control the speed, direction, and style of the animation.
- Changing Speed: Adjust the animation duration to make the text move faster or slower. For instance,
animation: move-text 5s linear infinite;will make the text move twice as fast. - Pausing and Resuming: You can also make the text pause at certain points using keyframes.
Example:
@keyframes move-text {
0% { left: 100%; }
50% { left: 0; }
100% { left: -100%; }
}In this case, the text will pause in the center (left: 0) before continuing its animation.
3. Changing Direction: To make the text move in the opposite direction, you can adjust the keyframes:
@keyframes move-text {
0% { left: -100%; }
100% { left: 100%; }
}Conclusion
Moving text can add a dynamic element to your webpage, making it more engaging for users. Although the <marquee> tag was popular in the past, CSS animations are now the preferred method for creating moving text due to their flexibility and modern web standards. CSS allows developers to have complete control over the movement, speed, direction, and behavior of text, ensuring compatibility with modern browsers while enhancing the overall design and functionality of web pages.
Disclaimer: It has some affiliate links at no cost to you. Thanks for the support!
Buy here:- Practical and Comprehensive Guide to Angular