JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="scroll-container"></div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow: hidden;
}

.scroll-container {
  height: 100vh;
  position: relative;
}

.item {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: 1s ease-in-out;
}

.item img {
  position: absolute;
  width: 100%;
  height: 100vh;
  object-fit: cover;
  transition: 1s;
}

.item.prev,
.item.next {
  z-index: 1;
  height: 0;
}

.item.next {
  bottom: 0;
}

.item.next img {
  bottom: 0;
  transform: translateY(10%);
}

.item.prev img {
  transform: translateY(-10%);
}

.scroll-up .item.prev {
  height: 100%;
}

.scroll-down .item.next {
  height: 100%;
}

.scroll-up .item.cur img {
  transform: translateY(10%);
}

.scroll-up .item.prev img {
  transform: translateY(0);
}

.scroll-down .item.cur img {
  transform: translateY(-10%);
}

.scroll-down .item.next img {
  transform: translateY(0);
}

JavaScript

const imgs = [
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img1l99wbel5ip2y1oivo40zrh051humxd.png",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img9az9ag8f964xjn2z9xgcptcek2dutmr.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/imgl7nga0eot9mfzdog0r7hja2avzx8jzf%20(1).jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img%E5%85%8B%E9%B2%81%E8%B5%9B%E5%BE%B7%E6%88%98%E8%AE%B03.jpg",
  "https://raw.githubusercontent.com/Hongda-OSU/PicGo-2.3.1/master/img735yqkuspzfqxatav0t55gipvv1zzh2.jpg"
];

const scrollContainer = document.querySelector('.scroll-container');
let currentIndex = 0;

const createItem = (index) => {
  const imgUrl = imgs[index];
  const item = document.createElement("div");
  item.classList.add("item");
  item.innerHTML = `<img src="${imgUrl}" />`;
  scrollContainer.appendChild(item);
  return item;
}

const resetElement = () => {
  scrollContainer.innerHTML = "";
  const prevIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1;
  const nextIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1;
  createItem(prevIndex).classList.add("prev");
  createItem(currentIndex).classList.add("cur");
  createItem(nextIndex).classList.add("next");
}

resetElement();

let isAnimating = false;

scrollContainer.addEventListener("wheel", (e) => {
  if (!e.deltaY) {
    return;
  }
  if (isAnimating) {
    return;
  }
  isAnimating = true;
  if (e.deltaY > 0) {
    scrollContainer.classList.add("scroll-down");
    currentIndex = currentIndex + 1 > imgs.length - 1 ? 0 : currentIndex + 1;
  } else {
    scrollContainer.classList.add("scroll-up");
    currentIndex = currentIndex - 1 < 0 ? imgs.length - 1 : currentIndex - 1;
  }
})

scrollContainer.addEventListener("transitionend", () => {
	isAnimating = false;
  scrollContainer.classList.remove("scroll-down");
  scrollContainer.classList.remove("scroll-up");
  resetElement();
})