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.