CodePen Embed - work page

<div class="carousel">
  
  
  <div class="bg-text">
    
  </div>
  

 
	<div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/vtmnessentials">
          <button type="button1">View Project
          </button>
        </a>
      </div>
			<div class="title">VTMNessentials
        <ul>
          <li>Branding</li>
          <li>Packaging</li>
          <li>Product 3D Shot</li>
        </ul>
      </div>
			<div class="num">01</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/dataau">
          <button type="button2">View Project
          </button>
        </a>
      </div>
			<div class="title">DataAU
        <ul>
          <li>Platform UI</li>
          <li>Social Media</li>
          <li>Feature Video</li>
        </ul>
      </div>
			<div class="num">02</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/nutrition-depot">
          <button type="button3">View Project
          </button>
        </a>
      </div>
			<div class="title">Nutrition Depot
        <ul>
          <li>Graphic Design</li>
          <li>Packaging</li>
          <li>Social Media</li>
        </ul>
      </div>
			<div class="num">03</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/crookie-mate">
          <button type="button4">View Project
          </button>
        </a>
      </div>
			<div class="title">Crookie Mate
        <ul>
          <li>Branding</li>
          <li>Packaging</li>
        </ul>
      </div>
			<div class="num">04</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/crookie-mate">
          <button type="button5">View Project
          </button>
        </a>
      </div>
			<div class="title">SPM
        <ul>
          <li>Logo Redesign</li>
          <li>Style Guide</li>
          <li>Merchandise</li>
        </ul>
      
      </div>
			<div class="num">05</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/lifo">
          <button type="button6">View Project
          </button>
        </a>
      </div>
			<div class="title">Lifo
         <ul>
          <li>UX Research</li>
          <li>UI Design</li>
        </ul>
      
      
      </div>
			<div class="num">06</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
			<div class="title">New Brand</div>
			<div class="num">07</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/townsvillemodernjazzclub">
          <button type="button6">View Project
          </button>
        </a>
      </div>
			<div class="title">Townsville Modern Jazz Club
         <ul>
          <li>Branding</li>
          
        </ul>
      </div>
			<div class="num">08</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
  
  
  <div class="carousel-item">
		<div class="carousel-box">
      <div class="buttons">
        <a href="www.by-ab.space/arts">
          <button type="button6">View Project
          </button>
        </a>
      </div>
			<div class="title">
        <ul>
          <li>Illustration</li>
          <li>3D Arts</li>
          <li>Music</li>
        </ul>
      
      </div>
			<div class="num">ARTS</div>
			<img src="https://media.istockphoto.com/id/949299844/it/foto/vista-prospettica-dellesterno-delledificio-contemporaneo.jpg?s=612x612&w=0&k=20&c=_DR1aRHuTEV3EYBJo1ZXq1pF4SgwB9EVWQLaBj4sC5g=" />
		</div>
	</div>
  
 


  

</div>






<div class="cursor"></div>
<div class="cursor cursor2"></div>





<!--



© images from istockphoto.com

-->

body {
  overflow: hidden;
  font-family: 'Fukwang', serif;
  background: linear-gradient(135deg, black, #4a1a00);
}

.carousel {
  position: relative;
  z-index: 1;
  height: 100vh;
  overflow: hidden;
  pointer-events: none;
}

.carousel-item {
  --items: 10;
  --width: clamp(240px, 24vw,  360px);
  --height: clamp(320px, 32vw,  480px);
  --x: calc(var(--active) * 600%);
  --y: calc(var(--active) * 200%);
  --rot: calc(var(--active) * 120deg);
  --opacity: calc(var(--zIndex) / var(--items) * 3 - 2);
  overflow: hidden;
  position: absolute;
  z-index: var(--zIndex);
  width: var(--width);
  height: var(--height);
  margin: calc(var(--height) * -0.5) 0 0 calc(var(--width) * -0.5);
  border-radius: 10px;
  top: 50%;
  left: 50%;
  user-select: none;
  transform-origin: 0% 100%;
  box-shadow: 0 10px 50px 10px rgba(0, 0, 0, .5);
  background: black;
  pointer-events: all;
  transform:  translate(var(--x), var(--y)) rotate(var(--rot)) ;
  transition: transform .8s cubic-bezier(0, 0.02, 0, 1);

  .carousel-box {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    opacity: var(--opacity);
    font-family: 'Fukwang', serif;

    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, .3), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .5));
    }
  }

  .title {
    position: absolute;
    z-index: 1;
    
    color: #fff;
    bottom: 20px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 3vw, 30px);
    text-shadow: 0 4px 4px rgba(0, 0, 0, .1);
    
    ul {
    font-family: Avenir;
    font-size: clamp(12px, 2vw, 14px);
    list-style-type: none;
    margin: 0px;
    padding-left: 2px;
    padding-top: 3px;
    }
    
    
    
    
  }

  .num {
    position: absolute;
    z-index: 1;
    font-family: "Catavalo", serif;
    color: #fff;
    top: 10px;
    left: 20px;
    transition: opacity .8s cubic-bezier(0, 0.02, 0, 1);
    font-size: clamp(20px, 10vw, 80px);
  }

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
  }
  
  
  
  .buttons {
    position: absolute;
    top: 50%;
    right: 20px;
    z-index: 3;
    margin-top: -20px;
    
  
  
    button {
      display: inline-block;
      background-color: rgba(0, 0, 0, .05);
      backdrop-filter: blur(8px);
      border-radius: 2px;
      border: none;
      font-weight: bold;
      color: #fff; /* font color base */
      text-align: center;
      font-size: clamp(16px, 4vw, 12px);
      padding: 20px;
      width: flex;
      transition: all 0.5s;
      
      z-index: 3;
      font-family: "Fukwang", serif;
      }
    button span {
      
      display: inline-block;
      position: relative;
      transition: 0.5s;
    }
    button span:after {
      content: '\00bb';
      position: absolute;
      opacity: 0;
      top: 0;
      right: -20px;
      transition: 0.5s;
    }
    button:hover {
      background-color: #f57f2c;
    }
    button:hover span {
      padding-right: 25px;
    }
    button:hover span:after {
      opacity: 1;
      right: 0;
    }
  } /* whole button section ends */
  
} /* carousle ends here */

.layout {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;

  &:before {
    content: '';
    position: absolute;
    z-index: 1;
    top: 0;
    left: 90px;
    width: 10px;
    height: 100%;
    border: 1px solid #fff;
    border-top: none;
    border-bottom: none;
    opacity: .15;
  }

  .box {
    position: absolute;
    bottom: 0;
    left: 30px;
    color: #fff;
    transform-origin: 0% 10%;
    transform: rotate(-90deg);
    font-size: 9px;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: .4;
  }
}

.logo {
  position: absolute;
  z-index: 2;
  top: 28px;
  right: 28px;
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  opacity: .5;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Orelo-sw-db', serif;
  pointer-events: all;
  color: black;
  text-decoration: none;
  font-size: 20px;
  overflow: hidden;
  padding-bottom: .1em;
}

.social {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  right: 25px;
  color: #fff;
  opacity: .4;

  a {
    display: inline-block;
    margin-left: 3px;
  }

  svg {
    --fill: #fff;
    width: 35px;
    height: 35px;
  }
}

.cursor {
  backdrop-filter: invert(100%);
  
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  --size: 40px;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .9);
  margin: calc(var(--size) * -0.5) 0 0 calc(var(--size) * -0.5);
  transition: transform .85s cubic-bezier(0, 0.02, 0, 1);
  display: none;
  pointer-events: none;
  
  @media (pointer: fine) {
    display: block;
  }
}

.cursor2 {
  --size: 10px;
  transition-duration: .7s;
}

View Compiled

/*--------------------
Vars
--------------------*/
let progress = 50
let startX = 0
let active = 0
let isDown = false

/*--------------------
Contants
--------------------*/
const speedWheel = 0.02
const speedDrag = -0.1

/*--------------------
Get Z
--------------------*/
const getZindex = (array, index) => (array.map((_, i) => (index === i) ? array.length : array.length - Math.abs(index - i)))

/*--------------------
Items
--------------------*/
const $items = document.querySelectorAll('.carousel-item')
const $cursors = document.querySelectorAll('.cursor')

const displayItems = (item, index, active) => {
  const zIndex = getZindex([...$items], active)[index]
  item.style.setProperty('--zIndex', zIndex)
  item.style.setProperty('--active', (index-active)/$items.length)
}

/*--------------------
Animate
--------------------*/
const animate = () => {
  progress = Math.max(0, Math.min(progress, 100))
  active = Math.floor(progress/100*($items.length-1))
  
  $items.forEach((item, index) => displayItems(item, index, active))
}
animate()

/*--------------------
Click on Items
--------------------*/
$items.forEach((item, i) => {
  item.addEventListener('click', () => {
    progress = (i/$items.length) * 100 + 10
    animate()
  })
})

/*--------------------
Handlers
--------------------*/
const handleWheel = e => {
  const wheelProgress = e.deltaY * speedWheel
  progress = progress + wheelProgress
  animate()
}

const handleMouseMove = (e) => {
  if (e.type === 'mousemove') {
    $cursors.forEach(($cursor) => {
      $cursor.style.transform = `translate(${e.clientX}px, ${e.clientY}px)`
    })
  }
  if (!isDown) return
  const x = e.clientX || (e.touches && e.touches[0].clientX) || 0
  const mouseProgress = (x - startX) * speedDrag
  progress = progress + mouseProgress
  startX = x
  animate()
}

const handleMouseDown = e => {
  isDown = true
  startX = e.clientX || (e.touches && e.touches[0].clientX) || 0
}

const handleMouseUp = () => {
  isDown = false
}

/*--------------------
Listeners
--------------------*/
document.addEventListener('mousewheel', handleWheel)
document.addEventListener('mousedown', handleMouseDown)
document.addEventListener('mousemove', handleMouseMove)
document.addEventListener('mouseup', handleMouseUp)
document.addEventListener('touchstart', handleMouseDown)
document.addEventListener('touchmove', handleMouseMove)
document.addEventListener('touchend', handleMouseUp)

Run Pen

This Pen is owned by Abby Li on CodePen. It is a fork of this Pen.

See more by @AbbyBlah on CodePen

External CSS

https://fonts.googleapis.com/css2?family=Roboto

External JavaScript

This Pen doesn't use any external JavaScript resources.