Marquee (Tekst slider)

Denne marquee er uden huller + evig loop

Skal indsættes i et html element. Bemærk at der skal laves en del CSS for at designe dette element.

OBS. Husk at tjekke indstillingerne i CSS’en efter den er indsat, du kan ændre farve, hastighed og meget mere! Husk også at skift HTML teksten.

Koden herunder skal indsætte i et HTML widget:

<div class="marquee marquee--hover-pause">
  <ul class="marquee__content">
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
  </ul>

  <ul aria-hidden="true" class="marquee__content">
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
    <li>UDSKIFT DENNE TEKST</li>
    <li>─</li>
  </ul>
</div>

Koden herunder skal indsættes i “Tilpas” -> “Ekstra CSS”:

/* Marquee */
.marquee {
  --gap: 20px;
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  gap: var(--gap);
}

.marquee__content {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--gap);
  margin: 0px;
  padding: 0px;

  animation: scroll 10s linear infinite; /* Tiden her bestemmer animationstiden over skærmen */
}

.marquee__content li {
  list-style-type: none;
  gap: var(--gap);
}

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

/* Pause når hover - fjerne dette hvis du ikke ønsker dette sker */
.marquee--hover-pause:hover .marquee__content {
  animation-play-state: paused !important;
}