OK နေတယ်

<div id="ticker">
  <ul id="ticker-list">
    <li>Loading feed...</li>
  </ul>
</div>

#ticker {
    width: 400px;
    height: 80px;
    overflow: hidden;
    border: 1px solid #ccc;
    font-family: Arial, sans-serif;
    position: relative;
    background: #fff;
  }
  #ticker ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
    #ticker ul li {
    height: 80px;
    line-height: 1.2;
    padding: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
  }

  .thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 5px;
    margin-right: 12px;
    flex-shrink: 0;
  }

  .content {
    flex-grow: 1;
  }

  .title {
    font-weight: bold;
    font-size: 1em;
    margin-bottom: 4px;
  }

  .meta {
    font-size: 0.85em;
    color: #666;
  }

const tickerList = document.getElementById('ticker-list');
  const itemHeight = 80;
  let position = 0;

  function moveUp() {
    position -= itemHeight;
    if (Math.abs(position) >= tickerList.scrollHeight / 2) {
      position = 0;
    }
    tickerList.style.transform = `translateY(${position}px)`;
  }

  // Fetch blog feed from rss2json API
  fetch('https://api.rss2json.com/v1/api.json?rss_url=https://www.aungko.ggff net/feeds/posts/default?alt=rss')
    .then(res => res.json())
    .then(data => {
      const posts = data.items.slice(0, 10);
      tickerList.innerHTML = '';

      posts.forEach(post => {
        const li = document.createElement('li');

        // Use post.thumbnail if available, else placeholder
        const thumbnail = post.thumbnail || 'https://via.placeholder.com/60';

        li.innerHTML = `
          <img src="${thumbnail}" class="thumbnail" alt="Thumbnail"/>
          <div class="content">
            <div class="title">${post.title}</div>
            <div class="meta">${new Date(post.pubDate).toLocaleDateString()} | ${post.author || 'Unknown'}</div>
          </div>
        `;

        tickerList.appendChild(li);
      });

      // Duplicate list for seamless scroll
      tickerList.innerHTML += tickerList.innerHTML;

      // Start scrolling every 2.5 seconds
      setInterval(moveUp, 5000);
    })
    .catch(err => {
      console.error(err);
      tickerList.innerHTML = '<li>Failed to load feed.</li>';
    });

0

0

Loading...