Scrolling text, also known as a marquee, is a creative way to display dynamic content on your website. It can capture attention and make your website more engaging. In this article, we will discuss how to create scrolling text using HTML, CSS, and JavaScript. We will include step-by-step instructions and practical code examples.
What Is Scrolling Text?
Scrolling text is a visual effect where text moves horizontally, vertically, or in other patterns across the screen. It is often used to display announcements, news tickers, or promotional content. Modern implementations rely on CSS and JavaScript for customization and interactivity, replacing the deprecated <marquee> HTML tag.
Basic Scrolling Text with HTML and CSS
The simplest way to create scrolling text is by using CSS animations. Let’s start with horizontal scrolling text.
HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scrolling Text</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="scrolling-text">Welcome to our website! Stay tuned for updates.</div>
</body>
</html>CSS Styling
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.scrolling-text {
white-space: nowrap;
overflow: hidden;
display: block;
width: 100%;
text-align: center;
color: #fff;
background: #007bff;
font-size: 1.5rem;
padding: 10px 0;
animation: scroll-horizontal 10s linear infinite;
}
@keyframes scroll-horizontal {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}In this example, the @keyframes rule defines the scrolling effect, moving the text from right to left. The animation property in .scrolling-text controls the duration, timing, and repetition.
Adding Vertical Scrolling Text
Vertical scrolling text is another common effect. Here’s how you can achieve it.
HTML Structure
<div class="vertical-scrolling-text">
<p>Breaking News: Major updates coming soon!</p>
<p>New features are being rolled out weekly.</p>
<p>Stay connected for the latest insights.</p>
</div>CSS Styling
.vertical-scrolling-text {
height: 100px;
overflow: hidden;
position: relative;
background: #28a745;
color: #fff;
font-size: 1.2rem;
padding: 10px;
}
.vertical-scrolling-text p {
margin: 0;
position: absolute;
width: 100%;
animation: scroll-vertical 5s linear infinite;
}
@keyframes scroll-vertical {
0% {
transform: translateY(100%);
}
100% {
transform: translateY(-100%);
}
}Each <p> element scrolls vertically within the container using the scroll-vertical animation.
Customizing Scrolling Behavior with JavaScript
To create more interactive scrolling effects, JavaScript can be used. Here’s an example:
HTML Structure
<div id="scroll-container">
<div id="scroll-content">Limited-time offer: Get 50% off on all products!</div>
</div>CSS Styling
#scroll-container {
width: 100%;
overflow: hidden;
white-space: nowrap;
background: #ff5722;
color: #fff;
font-size: 1.5rem;
padding: 10px 0;
position: relative;
}
#scroll-content {
display: inline-block;
position: absolute;
white-space: nowrap;
}JavaScript Code
// script.js
const scrollContainer = document.getElementById('scroll-container');
const scrollContent = document.getElementById('scroll-content');
let scrollAmount = 0;
const speed = 2; // Adjust this value for faster or slower scrolling
function scrollText() {
scrollAmount -= speed;
if (scrollAmount < -scrollContent.offsetWidth) {
scrollAmount = scrollContainer.offsetWidth;
}
scrollContent.style.transform = `translateX(${scrollAmount}px)`;
requestAnimationFrame(scrollText);
}
scrollText();This implementation dynamically adjusts the text position, creating a continuous scrolling effect. The requestAnimationFrame method ensures smooth performance.
Combining Multiple Scrolling Effects
You can mix horizontal and vertical scrolling effects to create complex animations. Here’s an example.
HTML Structure
<div class="combined-scrolling">
<div class="horizontal-text">Exclusive Deals: Don’t miss out!</div>
<div class="vertical-text">Flash Sale | New Arrivals | Limited Stock</div>
</div>CSS Styling
.combined-scrolling {
display: flex;
flex-direction: column;
align-items: center;
background: #6c757d;
color: #fff;
padding: 20px;
}
.horizontal-text {
animation: scroll-horizontal 8s linear infinite;
}
.vertical-text {
animation: scroll-vertical 6s linear infinite;
}These effects can be further customized with different speeds, colors, and fonts to align with your design goals.
Conclusion
Scrolling text is a versatile tool to enhance your website’s user experience. While the <marquee> tag is outdated, modern CSS and JavaScript techniques provide powerful and flexible alternatives. With CSS, you can create smooth animations for simple scrolling text. Adding JavaScript allows for advanced interactivity and customization. By combining different scrolling effects, you can create visually engaging designs that keep your audience engaged.
Whether you’re creating a news ticker, promotional banner, or any other dynamic content, the techniques discussed here will help you implement effective scrolling text on your website. Experiment with these examples to find the perfect solution for your project.