Mosaic Slideshow

index.html

<div class="slideshow">
  <div class="grid">
    <!-- 14 blokken voor een grotere mozaïek -->
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
    <div class="tile"></div>
  </div>
</div>

mosaic-slideshow.markdown

Mosaic Slideshow

A Pen by tofjadesign on CodePen.

License.

script.js

const images = Array.from(
  { length: 24 },
  (_, i) => `https://picsum.photos/400/400?random=${i + 1}`
);
const tiles = document.querySelectorAll(".tile");
let index = 0;

// shuffle array
function shuffleArray(array) {
  let arr = array.slice();
  for (let i = arr.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [arr[i], arr[j]] = [arr[j], arr[i]];
  }
  return arr;
}

// animatie van één tegel
function animateTile(tile, imgIndex, delay) {
  setTimeout(() => {
    tile.style.backgroundImage = `url(${images[imgIndex % images.length]})`;
    tile.classList.add("show");
    setTimeout(() => tile.classList.remove("show"), 2500); // fade out
  }, delay);
}

// continue animatie
function animateGridContinuously() {
  const order = shuffleArray([...Array(tiles.length).keys()]);
  order.forEach((i, idx) => {
    animateTile(tiles[i], index + idx, idx * 500); // snellere overlap
  });
  index = (index + tiles.length) % images.length;
}

// start continu animatie
setInterval(animateGridContinuously, 2000);
animateGridContinuously();

style.css

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #111;
  font-family: sans-serif;
}

.slideshow {
  width: 90vw;
  max-width: 800px;
  aspect-ratio: 4/3; /* behoud verhoudingen */
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}

.grid {
  display: grid;
  gap: 4px;
  width: 100%;
  height: 100%;

  /* responsive grid: 4 kolommen op desktop, 3 op tablet, 2 op mobiel */
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 1fr;
}

.tile {
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease, transform 1s ease;
}

.tile.show {
  opacity: 1;
  transform: scale(1);
}