<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div class="parallax">
    <div class="fixed">SCROLL ME</div>
    <div class="parallax__layer parallax__layer--back">
      <div class="starfield">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="parallax__layer parallax__layer--back2">
      <div class="starfield">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="parallax__layer parallax__layer--back3">
      <div class="starfield">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="parallax__layer parallax__layer--base">
      <div class="starfield">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>    
  
  </div>
  
</body>

</html>
* {
  margin: 0;
  padding: 0;
}
body {
  font: 100% / 1.5 Arial;
/*   background: linear-gradient(135deg, #3e028c -50%, #000 100%); */
  background-image: linear-gradient(135deg, #e7627d 0%, #b8235a 25%, #801357 50%, #3d1635 75%, #1c1a27 100%);
}
::-webkit-scrollbar { 
    display: none; 
}
.fixed {
  position: fixed;
  color: white;
  font-weight: 700;
  text-align: center;
  width: 100vw;
  top: 50%;
  font-size: 24px;
}
.parallax {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 1px;
  perspective: 1px;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.parallax__layer--back {
  -webkit-transform: translateZ(-2px) scale(3);
  transform: translateZ(-2px) scale(3);
}
.parallax__layer--back2 {
  -webkit-transform: translateZ(-6px) scale(5);
  transform: translateZ(-6px) scale(5);
}
.parallax__layer--back3 {
  -webkit-transform: translateZ(-12px) scale(6);
  transform: translateZ(-12px) scale(6);
}

/* add some padding to force scrollbars */
.parallax__layer {
  padding: 100vh 0;
}

.starfield > * {
  background-size: 200px 200px;
  background-image: radial-gradient(
      2px 2px at 40px 60px,
      #ccc,
      rgba(0, 0, 0, 0)
    ),
    radial-gradient(2px 2px at 20px 50px, #ddd, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 30px 100px, #eee, rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 40px 60px, rgb(0, 255, 0), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 110px 90px, rgb(255, 0, 0), rgba(0, 0, 0, 0)),
    radial-gradient(2px 2px at 190px 150px, rgb(255, 200, 0), rgba(0, 0, 0, 0));
  background-repeat: repeat;
}
.starfield > * {
  position: absolute;
  top: -250%;
  left: 0;
  height: 500%;
  width: 100%;
}

.starfield span:nth-child(2) {
  transform: rotate(45deg);
}
.starfield span:nth-child(3) {
  transform: rotate(69deg);
}
.starfield span:nth-child(4) {
  transform: rotate(123deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.