Enhance your website with an engaging Infinite Scrolling News Ticker that continuously displays breaking news headlines. This tutorial will guide you step by step to create a dynamic and stylish ticker using HTML, CSS, and JavaScript. Whether you’re building a news portal or simply want to showcase live updates, this feature will keep your visitors engaged! 🚀
📌 What is a News Ticker?
A news ticker is a scrolling text display that presents news headlines in a continuous loop. You may have seen it on news channels or stock market updates. This effect gives your website a modern, dynamic look while keeping users informed in real time.
🔹 What You’ll Learn
In this tutorial, you will learn:
✅ How to structure the news ticker using HTML 🏗️
✅ Styling the ticker with CSS for a smooth scrolling effect 🎨
✅ Implementing CSS animations to create an infinite scrolling effect 🔄
✅ Using JavaScript to dynamically update news headlines ✍️
✅ Customizing the ticker to fit your website’s theme and design 🎯
By the end of this tutorial, you’ll have a fully functional infinite scrolling news ticker that enhances your website’s interactivity! 🎉
🏗️ Step 1: HTML Structure
First, create the basic HTML structure for the ticker:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Infinite Scrolling News Ticker</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>📰 Live News Updates</h2>
<div class="news-container">
<span class="news-title">Breaking News</span>
<div class="news-ticker-wrapper">
<div class="news-ticker" id="news-ticker"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>This structure includes a container for the news ticker and a wrapper to handle scrolling.
🎨 Step 2: CSS Styling
Now, let’s style the news ticker using CSS:
body {
font-family: Arial, sans-serif;
background: #f4f4f4;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h2 {
color: #d32f2f;
margin-bottom: 50px;
}
.news-container {
width: 100%;
max-width: 600px;
overflow: hidden;
background: #d32f2f;
padding: 10px 0;
position: relative;
border-radius: 5px;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.news-title {
position: absolute;
left: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
font-weight: bold;
color: white;
background: #b71c1c;
padding: 5px 10px;
border-radius: 3px;
}
.news-ticker-wrapper {
display: flex;
overflow: hidden;
width: 100%;
}
.news-ticker {
display: flex;
white-space: nowrap;
animation: scroll 15s linear infinite;
}
.news-ticker span {
padding: 0 20px;
color: white;
font-size: 16px;
}
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}This styling ensures smooth scrolling and makes the ticker visually appealing.
🔥 Step 3: JavaScript for Dynamic Updates
Now, let’s use JavaScript to dynamically insert news items:
const newsList = [
"🚀 AI revolutionizing the tech industry!",
"🌍 Global warming concerns rise in 2025.",
"📱 New smartphone released with insane features!",
"🎬 Upcoming blockbuster movie breaks records!",
"⚽ Football championship finals this weekend!"
];
function updateNews() {
const ticker = document.getElementById("news-ticker");
const newsItems = newsList.map(news => `<span>${news}</span>`).join("");
// Duplicate content to ensure smooth looping
ticker.innerHTML = newsItems + newsItems;
}
updateNews();This script dynamically loads news headlines into the ticker and ensures smooth infinite scrolling.
🎥 Watch the Video Tutorial
For a complete walkthrough, watch our detailed video tutorial on YouTube:
🚀 Demo and Customization
You can modify the ticker’s speed, colors, and news items to match your website’s theme. Play around with the CSS animation duration to control the scrolling speed.
🎯 Related Tutorials
Interested in more web effects? Check out our tutorial on Custom Cursor Effect: Custom Cursor Effect Tutorial.
💡 Conclusion
You’ve successfully built an Infinite Scrolling News Ticker using HTML, CSS, and JavaScript! This feature enhances user engagement and keeps your visitors informed with the latest updates.
If you found this tutorial helpful, share it with your friends and subscribe to our updates for more exciting web development guides! 🔥💻
💾 Get the Code
Find the complete source code on GitHub: ➡️ GitHub Repository
📢 Follow Madras Academy for More Tutorials!
Don’t forget to like, comment, and subscribe for more web development tutorials! 🚀🎥
#HTML #CSS #JavaScript #NewsTicker #WebDesign #WebDevelopment #FrontendDevelopment #Coding #TechTutorial #BreakingNews #ScrollingEffect