<ul>
  <li> <img src="
https://source.unsplash.com/ezSFnAFi9hY/500x500" alt="cut citrus fruits. " />Lorem Ipsum</li>
  <li> <img src="https://source.unsplash.com/TIGDsyy0TK4/500x500" alt="sliced mango. " />Dolor Sit</li>
  <li> <img src="https://source.unsplash.com/TdDtTu2rv4s/500x500" alt="a bunch of blueberries. " />Amet Consectetur</li>
  <li> <img src="https://source.unsplash.com/eudGUrDdBB0/500x500" alt="a pineapple sitting on a table. " />Adipiscing Elit</li>
  <li> <img src="https://source.unsplash.com/eJH4f1rlG7g/500x500" alt="frozen raspberries. " /> Nunc Tortor</li>
  <li> <img src="https://source.unsplash.com/24RUrLSW1HI/500x500" alt="a sliced strawberry. " />Metus Mollis</li>
  <li> <img src="https://source.unsplash.com/h5yMpgOI5nI/500x500" alt="an arrangement of assorted sliced fruits. " />Congue Sagittis</li>
  <li> <img src="https://source.unsplash.com/2TYrR2IB72s/500x500" alt="sliced watermelons. " />Vestibulum Et</li>
  <li> <img src="https://source.unsplash.com/1cWZgnBhZRs/500x500" alt="grapefruits, lemons, and pomegranates. " />Donec Eget</li>
  <li> <img src="https://source.unsplash.com/9aOswReDKPo/500x500" alt="half of an avocado. " />Maecenas et Justo</li>
  <li> <img src="https://source.unsplash.com/Nl7eLS8E2Ss/500x500" alt="half of a lime. " />Malesuada Quam</li>
  <li> <img src="https://source.unsplash.com/3HhXWJzG5Ko/500x500" alt="a single cherry with stem. " />Ultricies Sollicitudin</li>
  <li> <img src="https://source.unsplash.com/fczCr7MdE7U/500x500" alt="a bunch of bananas. " />Gravida Nibh</li>
  <li> <img src="https://source.unsplash.com/uI900SItAyY/500x500" alt="three pears. " />Pellentesque Sapien</li>
  <li> <img src="https://source.unsplash.com/0AynZdszfz0/500x500" alt="a basket full of peaches next to a plate with sliced peaches. " />Suspendisse Vel</li>
  <li> <img src="https://source.unsplash.com/C6JhUKs9q8M/500x500" alt="a bowl of avocados. " />Mauris Consectetur</li>
</ul>
* {
  box-sizing: border-box;
}

body,
ul,
li {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 100vh;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
}

li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  scroll-snap-align: start;
  font: normal 36px/1 times;
  font-variant: small-caps;
  perspective: 1000px;
}

li img {
  --rotation-x: 66deg;
  --rotation-y: 33deg;
  max-width: 80vw;
  max-height: 80vh;
  margin-bottom: 5vh;
  border-radius: 24px;
  opacity: var(--panel-activation);
  transform:
    rotateX(
      calc(
        var(--rotation-x) -
        var(--panel-activation) * var(--rotation-x)
      )
    )
    rotateY(
      calc(
        var(--rotation-y) -
        var(--panel-activation) * var(--rotation-y)
      )
    )
    scale(
      calc(.5 + var(--panel-activation) / 2),
      calc(.5 + var(--panel-activation) / 2)
    )
    translateZ(0);
  transform-style: preserve-3d;
  will-change: transform opacity;
}

$backgrounds: (
  hsl(30, 80%, 90%),
  hsl(40, 5%, 90%),
  hsl(240, 15%, 80%),
  hsl(40, 5%, 85%),
  hsl(340, 25%, 80%),
  hsl(180, 25%, 80%),
  hsl(46, 92%, 81%),
  hsl(16, 62%, 85%),
  hsl(40, 50%, 85%),
  hsl(341, 76%, 85%),
  hsl(91, 37%, 85%),
  hsl(0, 0%, 100%),
  hsl(51, 99%, 65%),
  hsl(18, 31%, 71%),
  hsl(33, 14%, 85%),
  hsl(106, 14%, 70%)
);

@for $i from 1 through 16 {
  li:nth-child(#{$i}) {
    background: nth($backgrounds, $i);
  }
}
View Compiled
import { reportVariable, reportScroll } from 'https://enes.in/kicss/kicss.js'

const slider = document.querySelector('ul')
const panels = Array.from(document.querySelectorAll('li'))

reportVariable('--panel-activation', {
  value: 1,
  scope: panels[0]
})

slider.addEventListener(
  'scroll',
  reportScroll('--slider-scroll', {
    interpolations: [
      ...panels.map((panel, panelIndex) => ({
        name: '--panel-activation',
        scope: panel,
        inputRange() {
          return panels.map((p) => p.offsetTop);
        },
        outputRange: panels.map((p, i) => (i === panelIndex ? 1 : 0))
      }))
    ]
  })
)

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.