<div class="parallax">

  <div class="layer back">Arrière-plan</div>

  <div class="layer front">Avant-plan</div>

</div>

@import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap");

​

html,

body {

  font-family: "Major Mono Display", monospace;

  min-height: 100vh;

  background: rgb(30, 33, 41);

  margin: 0;

}

​

.parallax {

  height: 100vh;

  font-size: 10vmin;

  overflow-x: hidden;

  overflow-y: auto;

  perspective: 100px;

}

​

.layer {

  position: absolute;

  top: 0;

  left: 0;

  display: flex;

  letter-spacing: -1vmin;

  justify-content: center;

  align-items: center;

  width: 100%;

  height: 200vh;

  background: rgba(black, 0.1);

}

​

.front {

  color: #f06090;

  transform: translateZ(0);

  text-shadow: 1px 1px 2px rgb(30, 33, 41), 0 0 1em rgb(30, 33, 41),

    0 0 0.2em rgb(30, 33, 41);

}

​

.back {

  color: #2fb170;

  transform: translateZ(-100px);

}

​