News ticker html
Here is an example of a basic news ticker HTML code:
<!-- News Ticker HTML Code -->
<div class="news-ticker">
<ul>
<li><span class="news-date">2023-02-20</span> <span class="news-title">Breaking News: New Study Reveals...</span></li>
<li><span class="news-date">2023-02-19</span> <span class="news-title">Local Business Owner Wins Award</span></li>
<li><span class="news-date">2023-02-18</span> <span class="news-title">Weather Alert: Heavy Rain Expected Tonight</span></li>
<!-- Add more news items here -->
</ul>
</div>
And here is some basic CSS to style the news ticker:
/* News Ticker CSS */
.news-ticker {
width: 300px; /* adjust the width to your liking */
height: 30px; /* adjust the height to your liking */
overflow: hidden;
background-color: #f0f0f0;
border: 1px solid #ccc;
padding: 5px;
font-size: 14px;
font-family: Arial, sans-serif;
}
.news-ticker ul {
list-style: none;
margin: 0;
padding: 0;
}
.news-ticker li {
display: inline-block;
margin-right: 10px;
}
.news-ticker span {
font-weight: bold;
}
.news-date {
color: #666;
}
.news-title {
color: #333;
}
And here is some basic JavaScript to animate the news ticker:
// News Ticker JavaScript
var newsTicker = document.querySelector('.news-ticker');
var newsItems = newsTicker.querySelectorAll('li');
var newsWidth = newsItems[0].offsetWidth;
var newsSpeed = 2; // adjust the speed to your liking
newsTicker.style.width = newsWidth * newsItems.length + 'px';
setInterval(function() {
newsTicker.style.left = '-' + newsWidth + 'px';
newsTicker.style.transition = 'left 0.5s';
}, newsSpeed * 1000);
newsTicker.addEventListener('transitionend', function() {
newsTicker.style.left = '0px';
});
This code creates a basic news ticker that displays a list of news items with dates and titles. The news items are animated to scroll horizontally across the screen at a specified speed. You can adjust the width, height, and speed of the news ticker to your liking.
Note: This is just a basic example, you can customize it as per your requirement and also add more functionality to it like adding more news items, adding images, adding links, etc.