<div class="flexContainer">

  <h1>Scroll down to trigger the animations</h1>

</div>

​

<div class="demoWrapper dark">

  <div class="demo">

    <img class="stars" src="https://assets.codepen.io/32887/parallax-mountain-stars.png" />

    <img class="background" src="https://assets.codepen.io/32887/background.png" />

    <img class="middleground" src="https://assets.codepen.io/32887/middleground.png" />

    <img class="foreground" src="https://assets.codepen.io/32887/foreground.png" />

    <img class="text" src="https://assets.codepen.io/32887/night-drive-text.png" />

​

  </div>

</div>

<div class="flexContainer footer">

  <h1>more text</h1>

</div>

@import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@700&display=swap");

​

.demo img {

  position: absolute;

  width: 600px;

  height: 600px;

  filter: brightness(1.3);

}

​

.dark {

  background: #020202;

}

​

.dark h1 {

  color: #ccc;

}

​

body {

  font-family: "Barlow Semi Condensed", sans-serif;

  color: #333;

  margin: 0;

  background: #efefef;

}

​

.flexContainer {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

  text-align: center;

  width: 100%;

  height: 100vh;

  overflow: hidden;

}

​

.demoWrapper {

  width: 100%;

  height: 600px;

  display: flex;

  justify-content: center;

}

​

.demo {

  position: relative;

  overflow: hidden;

  width: 600px;

  background: #2e2155;

  background: -moz-radial-gradient(

    center,

    ellipse cover,

    #2e2155 1%,

    #040313 100%

  );

  background: -webkit-radial-gradient(

    center,

    ellipse cover,

    #2e2155 1%,

    #040313 100%

  );

  background: radial-gradient(ellipse at center, #2e2155 1%, #040313 100%);

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2e2155', endColorstr='#040313',GradientType=1 );

}

​

/* responsive css

@media only screen and (max-width: 600px) {

  .demo img {

    width:300px;

    height:300px;

  }

  .demoWrapper {

    height:300px;

  }

  .demo {

    height:300px;

    width:300px;

  }

}

*/

​