JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<div class="wrapper">
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=1" /></div>
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=2" /></div>
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=3" /></div>
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=4" /></div>
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=5" /></div>
	<div><img src="https://dummyimage.com/600x400/9e089e/ffffff.png&text=6" /></div>
</div>

SCSS

.wrapper {
	overflow: scroll;
	max-width: 100%;
	padding-bottom: 50%;
	scroll-snap-type: x;
	scroll-padding: 0;
	transform: rotate(180deg);
	font-size: 0;
	white-space: nowrap;

	> div {
		display: inline-block;
		font-size: 1rem;
		white-space: normal;
		width: 40%;
		transform-origin: 0 0;
		scroll-snap-align: center;

		img {
			display: block;
			width: 100%;
			height: auto;
			opacity: .5;
			transform: rotate(-180deg);
		}
	}
}

JavaScript

var supportsPassive = false;

try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("testPassive", null, opts);
  window.removeEventListener("testPassive", null, opts);
} catch (e) {}

var wrapper = document.querySelector(".wrapper");
var slides = wrapper.children;
wrapper.addEventListener("scroll", scrollHandler, supportsPassive ? { passive: true } : false);

var scale = 1.5;
var scrollIndex = 0;

function scrollHandler () {
	var { scrollLeft, scrollWidth } = wrapper;
	var slideWidth = scrollWidth / slides.length;
	var slideWidthOffset = (slideWidth * 1.5) / 2;
	var p = (scrollLeft / scrollWidth) * slides.length;
	var a = Math.floor(p);
	var z = Math.ceil(p);
	if (a > 0) {
		slides[a - 1].style.transform = `translateX(${-50}%)`;
	}
	slides[a].style.transform = `scale(${(1 - (p - a)) * (scale - 1) + 1}) translateX(${(p - a) * -50}%)`;
	slides[z].style.transform = `scale(${(1 - (z - p)) * (scale - 1) + 1}) translateX(${(z - p) * 50}%)`;
	if (z < slides.length - 1) {
		slides[z + 1].style.transform = `translateX(${50}%)`;
	}
}