-
  const CONFIG = [
    {
      positionX: 50,
      positionY: 55,
      height: 59,
      width: 55,
    },
    {
      positionX: 74,
      positionY: 15,
      height: 17,
      width: 17,
    },
    {
      positionX: 12,
      positionY: 51,
      height: 24,
      width: 19,
    }
  ]

img(src="https://assets.codepen.io/605876/kody-flying_blue.png")
.parallax
  - for (const ITEM of CONFIG)
    .parallax__item(style=`--width: ${ITEM.width}; --height: ${ITEM.height}; --x: ${ITEM.positionX}; --y: ${ITEM.positionY};`)

*
  box-sizing border-box
  
body
  min-height 100vh
  display grid
  place-items center
  background hsl(210, 20%, 20%)
  
img
  position fixed
  top 50%
  left 50%
  height 50vmin
  transform translate(-50%, -50%)
  opacity 0.5
  
.parallax
  height 50vmin
  width calc(50 * (484 / 479) * 1vmin)
  background hsla(180, 50%, 50%, 0.25)
  position relative
  
  &__item
    position absolute
    left calc(var(--x, 50) * 1%)
    top calc(var(--y, 50) * 1%)
    height calc(var(--height, auto) * 1%)
    width calc(var(--width, auto) * 1%)
    background hsla(0, 50%, 50%, 0.5)
    transform translate(-50%, -50%)