Alright, so you need some text, links, or images to scroll across your website from left to right. Some folks call this a “news ticker”, some call it a “text scroller” — we will stick with news ticker for the sake of keeping our references simple.
Sure, you can make this happen with JavaScript but why complicate matters when good ol’ HTML and CSS can get your simple news ticker up and running in no time.
How To Create A Simple News Ticker Using HTML and CSS
Let’s get straight to it. First we will look at your HTML code, the main code we will put into play is the container, wrapper, transition, and of course our ticker items. This will look like:
<div class="ticker-container">
<div class="ticker-wrapper">
<div class="ticker-transition">
<div class="ticker-item">Item 1.</div>
<div class="ticker-item">Item 2.</div>
<div class="ticker-item">Item 3.</div>
<div class="ticker-item">Item 4.</div>
</div>
</div>
</div>Next up, we need to add our CSS code that makes the news ticker magic happen.
The functionality we want to achieve is a continuous left to right scrolling of our ticker items, we also want the items to pause if a user hovers over a particular ticker item. The CSS code will look like:
<style>
.ticker-container {
width: 100%;
overflow: hidden;
}
.ticker-wrapper {
width: 100%;
padding-left: 100%;
background-color: transparent;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-transition {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 20s;
}
.ticker-transition:hover {
animation-play-state: paused;
cursor: pointer;
}
.ticker-item {
display: inline-block;
padding: 0 2rem;
}
</style>Now, for testing purposes, let’s put it all together in a single HTML document for you to give it a spin. Here is the full code snippet:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple News Ticker Using HTML and CSS</title>
<style>
.ticker-container {
width: 100%;
overflow: hidden;
}
.ticker-wrapper {
width: 100%;
padding-left: 100%;
background-color: transparent;
}
@keyframes ticker {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-100%, 0, 0);
}
}
.ticker-transition {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 20s;
}
.ticker-transition:hover {
animation-play-state: paused;
cursor: pointer;
}
.ticker-item {
display: inline-block;
padding: 0 2rem;
}
</style>
</head>
<body>
<div class="ticker-container">
<div class="ticker-wrapper">
<div class="ticker-transition">
<div class="ticker-item">Item 1.</div>
<div class="ticker-item">Item 2.</div>
<div class="ticker-item">Item 3.</div>
<div class="ticker-item">Item 4.</div>
</div>
</div>
</div>
</body>
</html>There you have it!
Now you can customize the look and feel of your news ticker as well as add text, links, images, or whatever you like within each .ticker-item <div>.
There are countless ways you can utilize this code, so get creative and I hope you found this helpful.