Marquee

Also sometimes referred to as a 'news slider' or 'news slider', this WebYep-editable scrolling marquee was inspired by this article. It predominantly uses HTML and CSS, making it lightweight and accessible. Used carefully in moderation, it could potentially form a handy component to display important messages. I wrote some Javascript to clone the list items, and therefore achieve a seamless 'repeat' of the news items. I also setup a conditional that adds a class of 'edit_mode' to prevent the marquee running while it's being edited by WebYep. The speed is set within the animation property, of the CSS.

Example

HTML & PHP

<div class="marquee edit_mode" data-marquee-container>
  <ul class="marquee_content" data-marquee-content>
    aLoopIDs("News Ticker") as $webyep_oCurrentLoop->iLoopID) { $loopid=$webyep_oCurrentLoop->iLoopID; $_SESSION["loopid"]=$loopid; $webyep_oCurrentLoop->loopStart(true,$webyep_oCurrentLoop->iLoopID); // WebYepV2 ?>
    <li><?php webyep_shortText("News Item", false, 550, 240); ?></li>
    <?php $webyep_oCurrentLoop->loopEnd(); } unset($_SESSION["loopid"]); // WebYepV2 ?>
  </ul>
</div>

CSS

.marquee:not(.edit_mode) {
  --gap: 1rem;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
  background-color: rgba(191, 176, 232, 0.8);
  padding: 0.75rem;
  font-size: 1.25rem;
}

.marquee:not(.edit_mode) .marquee_content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  min-width: 100%;
  gap: var(--gap);
  animation: scroll 20s linear infinite; /* Set the speed here */
  padding: 0;
  margin: 0;
  list-style: none;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

.marquee:not(.edit_mode) .marquee_content li {
  padding: 0;
}

/* Pause animation when reduced-motion is set */
@media (prefers-reduced-motion: reduce) {
  .marquee_content {
    animation-play-state: paused !important;
  }
}

/* Optional - add bullet points between news items */
.marquee:not(.edit_mode) .marquee_content li:before {
  content: '•';
  margin-right: var(--gap);
}

Javascript

const marqueeContainer = document.querySelectorAll('[data-marquee-container]:not(.edit_mode)');
marqueeContainer.forEach((marqueeContent) => {
  const marqueeItems = marqueeContent.querySelector('[data-marquee-content]');
  marqueeContent.innerHTML += `
${marqueeItems.innerHTML}
`;
});