इनफिनिट टैग्स स्क्रॉल

4858 alex

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

24 May 2024

लंबन स्क्रॉल एनीमेशन

30 August 2024

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

25 August 2024

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

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;
  }

अनुशंसित

लंबन स्क्रॉल एनीमेशन

स्क्रॉल संचालित एनिमेशन स्क्रॉल डिटेक्शन

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS