HTML Bilder in einem scrollenden Div anzeigen

1 Pluspunkt 0 Minuspunkte

Wie kann ich ein HTML Div mit Bildern in einem Div in einer Reihe anzeigen und automatisch nach links scrollen so wie marquee Text?

<style>
.container {
  max-width: 600px;
}

.scrolldiv {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
</style>

<div class="container">
  <div class="scrolldiv">
    <img src="https://i.pravatar.cc/150?img=1" alt="" />
    <img src="https://i.pravatar.cc/150?img=2" alt="" />
    <img src="https://i.pravatar.cc/150?img=3" alt="" />
    <img src="https://i.pravatar.cc/150?img=4" alt="" />
    <img src="https://i.pravatar.cc/150?img=5" alt="" />
    <img src="https://i.pravatar.cc/150?img=6" alt="" />
  </div>
</div>
von  

1 Antwort

0 Pluspunkte 0 Minuspunkte

Das kannst du mit Javascript und CSS Animation Frames. JSFiddle

<div class="container" data-direction="left" data-speed="slow">
  <div class="scrolldiv">
    <img src="https://i.pravatar.cc/150?img=1" alt="" />
    <img src="https://i.pravatar.cc/150?img=2" alt="" />
    <img src="https://i.pravatar.cc/150?img=3" alt="" />
    <img src="https://i.pravatar.cc/150?img=4" alt="" />
    <img src="https://i.pravatar.cc/150?img=5" alt="" />
    <img src="https://i.pravatar.cc/150?img=6" alt="" />
  </div>
</div>

CSS

<style>
.container {
  max-width: 600px;
}

.scrolldiv {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.container[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);
}

.container[data-animated="true"] .scrolldiv {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--_animation-duration, 40s)
    var(--_animation-direction, forwards) linear infinite;
}

.container[data-direction="right"] {
  --_animation-direction: reverse;
}

.container[data-direction="left"] {
  --_animation-direction: forwards;
}

.container[data-speed="fast"] {
  --_animation-duration: 20s;
}

.container[data-speed="slow"] {
  --_animation-duration: 60s;
}

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

Javascript

<script type="text/javascript">
const scrollers = document.querySelectorAll(".container");

if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  addAnimation();
}

function addAnimation() {

  scrollers.forEach((scroller) => {

    // add data-animated="true" to every `.scroller` on the page
    scroller.setAttribute("data-animated", true);

    // Make an array from the elements within `.scroller-inner`
    const scrollerInner = scroller.querySelector(".scrolldiv");
    const scrollerContent = Array.from(scrollerInner.children);

    // For each item in the array, clone it
    // add aria-hidden to it
    // add it into the `.scroller-inner`
    scrollerContent.forEach((item) => {
      const duplicatedItem = item.cloneNode(true);
      duplicatedItem.setAttribute("aria-hidden", true);
      scrollerInner.appendChild(duplicatedItem);
    });
    
  });
 
}
</script>
von  

Ähnliche Fragen