Défilement infini de tags

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 December 2024

Iframe réactif avec navigation d'aperçu de l'appareil

HTML

CSS

.scroller {
    max-width: 900px;
  }
  
  .scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 40s;
  }

@keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }

html {
    color-scheme: dark;
  }
  
  body {
    display: grid;
    min-block-size: 100vh;
    place-content: center;
    font-family: system-ui;
    font-size: 1.125rem;
  }
  
  .tag-list {
    margin: 0;
    padding-inline: 0;
    list-style: none;
  }
  
  .tag-list li {
    padding: 1rem;
    background-color: transparent;
    border: 1px solid #eceff133;
    border-radius: 0.5rem;
  }

Défilement infini de tags

Recommandé

Un code par hunganh

Un code par codex

Iframe réactif avec navigation d'aperçu de l'appareil

HTML

CSS

JS

Recommandé

Un code par hunganh

Un code par codex

Iframe réactif avec navigation d'aperçu de l'appareil

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS