JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<div class="animated-banner">
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/1.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/2.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/3.webp" data-height="187" data-width="2000" height="224" width="2400">
  </div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/4.webp" data-height="187" data-width="2000" height="205" width="2200">
  </div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/5.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/6.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/7.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/8.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/9.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/10.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/11.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img src="https://cdn.jsdelivr.net/gh/Hongda-OSU/PicGo/image/12.webp" data-height="187" data-width="2000" height="187" width="2000"></div>
  <div class="layer"><img...

CSS

body {
    margin: 0;
    padding: 0;
    position: relative;
  }

  .animated-banner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    min-width: 1000px;
    min-height: 155px;
    height: 9.375vw;
  }

  .animated-banner>.layer {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

JavaScript

const banner = document.querySelector('.animated-banner');
const bannerLeft = banner.offsetLeft;
const bannerWidth = banner.offsetWidth;
let initMouseLeft = 0;

const styleMap = {
  0: {
    initialStyle: {
      height: '187px',
      width: '2000px',
      translateX: 0,
      translateY: 0,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: null,
    element: banner.querySelector('.layer:nth-child(1)').querySelector('img')
  },
  1: {
    initialStyle: {
      height: '187px',
      width: '2000px',
      translateX: 0,
      translateY: 0,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: {
      direction: 'y',
      scale: 10
    },
    element: banner.querySelector('.layer:nth-child(2)').querySelector('img')
  },
  2: {
    initialStyle: {
      height: '224.4px',
      width: '2400px',
      translateX: 300,
      translateY: 24,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: null,
    element: banner.querySelector('.layer:nth-child(3)').querySelector('img')
  },
  3: {
    initialStyle: {
      height: '205.7px',
      width: '2200px',
      translateX: 330,
      translateY: 33,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: {
      direction: 'x',
      scale: 50
    },
    element: banner.querySelector('.layer:nth-child(4)').querySelector('img')
  },
  4: {
    initialStyle: {
      height: '187px',
      width: '2000px',
      translateX: 0,
      translateY: 15,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: null,
    element: banner.querySelector('.layer:nth-child(5)').querySelector('img')
  },
  5: {
    initialStyle: {
      height: '187px',
      width: '2000px',
      translateX: 0,
      translateY: 15,
      rotate: 0,
      scale: 1,
      opacity: 1
    },
    style: {
      direction: 'x',
      scale: 10
    },
    element: banner.querySelector('.layer:nth-child(6)').querySelector('img')
  },
  6: {
    initialStyle: {
      height: '187px',
...