News ticker bootstrap

A news ticker is a great way to display a stream of updates on your website or application. Here's a basic example of how you can create a news ticker using Bootstrap:

HTML:

<div class="ticker-container">
  <div class="ticker">
    <ul>
      <li>News item 1</li>
      <li>News item 2</li>
      <li>News item 3</li>
      <li>News item 4</li>
      <li>News item 5</li>
    </ul>
  </div>
</div>

CSS (using Bootstrap):

.ticker-container {
  position: relative;
  overflow: hidden;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #f9f9f9;
}

.ticker {
  position: relative;
  width: 100%;
  height: 30px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  text-align: center;
  overflow: hidden;
}

.ticker ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ticker li {
  display: inline-block;
  margin-right: 10px;
}

.ticker li:last-child {
  margin-right: 0;
}

.ticker-container:hover.ticker {
  animation: ticker-scroll 10s linear infinite;
}

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

JavaScript (optional):

// Get the ticker container and the ticker element
const tickerContainer = document.querySelector('.ticker-container');
const ticker = document.querySelector('.ticker');

// Set the ticker interval
setInterval(() => {
  // Get the current width of the ticker
  const tickerWidth = ticker.offsetWidth;

  // Animate the ticker
  ticker.style.transform = `translateX(${tickerWidth}px)`;
}, 10000);

This code creates a basic news ticker that displays a list of news items. The ticker is animated using CSS keyframes, and the JavaScript code sets the ticker interval to update the animation every 10 seconds.

You can customize the appearance and behavior of the news ticker by modifying the CSS and JavaScript code. For example, you can change the animation duration, add more news items, or modify the layout of the ticker.

Here's a live demo of the news ticker:

https://codepen.io/anon/pen/wvWbWbR