Embla Carousel Parallax Slides — Free Scroll-Linked Parallax Snippet

<div class="epx">
  <div class="epx-viewport" id="epxViewport">
    <div class="epx-container" id="epxContainer"></div>
  </div>
  <div class="epx-foot">
    <span>Drag, swipe or use the arrows — images move slower than their frames</span>
    <div>
      <button type="button" id="epxPrev" aria-label="Previous">←</button>
      <button type="button" id="epxNext" aria-label="Next">→</button>
    </div>
  </div>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#0c0a09;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:#e7e5e4}
.epx{width:100%;max-width:820px}
.epx-viewport{overflow:hidden}
.epx-container{display:flex;touch-action:pan-y pinch-zoom;margin-left:-16px}
.epx-slide{flex:0 0 72%;min-width:0;padding-left:16px}
.epx-frame{position:relative;border-radius:18px;overflow:hidden;height:380px}
/* The layer is wider than its frame so it has room to move without
   exposing an edge. The image inside is what shifts sideways. */
.epx-layer{position:absolute;inset:0 -30%;display:flex;justify-content:center}
.epx-layer img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none;will-change:transform}
.epx-cap{position:absolute;left:18px;bottom:16px;right:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.epx-cap b{display:block;font-size:22px;letter-spacing:0;text-transform:none;margin-top:3px}
.epx-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px;font-size:12px;color:#a8a29e}
.epx-foot button{width:40px;height:40px;border-radius:50%;border:1px solid #44403c;background:#1c1917;color:#e7e5e4;font-size:16px;cursor:pointer;margin-left:6px}
.epx-foot button:hover{border-color:#f59e0b;color:#fbbf24}
.epx-foot button:focus-visible{outline:2px solid #f59e0b;outline-offset:2px}

var SLIDES = [
  { id: 1016, place: 'Utah', name: 'Canyon Light' },
  { id: 1022, place: 'Lapland', name: 'Northern Sky' },
  { id: 1047, place: 'Tokyo', name: 'City Grid' },
  { id: 1056, place: 'Morocco', name: 'Desert Road' },
  { id: 1067, place: 'Oslo', name: 'Harbour Walk' },
  { id: 1080, place: 'Kyoto', name: 'Quiet Street' },
];
var container = document.getElementById('epxContainer');
SLIDES.forEach(function (s) {
  container.insertAdjacentHTML('beforeend',
    '<div class="epx-slide"><div class="epx-frame"><div class="epx-layer">' +
    '<img src="https://picsum.photos/id/' + s.id + '/1200/800" alt="' + s.name + ', ' + s.place + '"></div>' +
    '<div class="epx-cap">' + s.place + '<b>' + s.name + '</b></div></div></div>');
});

var embla = EmblaCarousel(document.getElementById('epxViewport'), { loop: true, dragFree: false });
var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;

// How strongly images lag behind their frames. Multiplying by the number
// of snaps keeps the effect the same strength whatever the slide count.
var TWEEN_FACTOR_BASE = 0.2;
var tweenFactor = 0;
var layers = [];

function setup() {
  tweenFactor = TWEEN_FACTOR_BASE * embla.scrollSnapList().length;
  layers = embla.slideNodes().map(function (s) { return s.querySelector('.epx-layer'); });
}

function tween(eventName) {
  if (reduce) return;
  var engine = embla.internalEngine();
  var progress = embla.scrollProgress();
  var inView = embla.slidesInView();
  var isScroll = eventName === 'scroll';

  embla.scrollSnapList().forEach(function (snap, snapIndex) {
    // diff: how far this snap is from the current scroll position, where
    // 0 means "centred" and +/- values mean "to the right/left".
    var diff = snap - progress;
    engine.slideRegistry[snapIndex].forEach(function (slideIndex) {
      if (isScroll && inView.indexOf(slideIndex) === -1) return;

      // With loop on, Embla moves slides around the ends. A slide that has
      // been looped reports a diff from the wrong side, so correct it.
      if (engine.options.loop) {
        engine.slideLooper.loopPoints.forEach(function (lp) {
          var target = lp.target();
          if (slideIndex === lp.index && target !== 0) {
            if (Math.sign(target) === -1) diff = snap - (1 + progress);
            if (Math.sign(target) === 1) diff = snap + (1 - progress);
          }
        });
      }
      var translate = diff * (-1 * tweenFactor) * 100;
      layers[slideIndex].style.transform = 'translateX(' + translate + '%)';
    });
  });
}

setup();
tween();
embla
  .on('reInit', setup)
  .on('reInit', tween)
  .on('scroll', tween)
  .on('slideFocus', tween);

document.getElementById('epxPrev').addEventListener('click', function () { embla.scrollPrev(); });
document.getElementById('epxNext').addEventListener('click', function () { embla.scrollNext(); });