Параллакс эффект на чистом CSS

* { 
  box-sizing: border-box; 
} 
 
html, 
body{ 
  height: 100%; 
  overflow: hidden; 
   
  padding: 0; 
  margin: 0; 
} 
body { 
  margin: 0; 
  padding: 0; 
  perspective: 1px; 
  transform-style: preserve-3d; 
  overflow-y: scroll; 
  overflow-x: hidden; 
  font-family: sans-serif; 
  color: #fff; 
} 
header { 
  box-sizing: border-box; 
  text-align: center; 
  padding-top: 20%; 
  transform-style: inherit; 
  width: 100vw; 
  height: 50vw; 
} 
header::before { 
  content: ''; 
  display: block; 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  top: -100px; 
  z-index: -1; 
  transform-origin: center; 
  min-height: 100vh; 
  background-image: url('https://github.com/RussianButman/RussianButman.github.io/blob/master/background.png?raw=true'); 
  background-repeat: no-repeat; 
  background-size: cover; 
  transition: 1s; 
  /* Параллакс */ 
  transform: translateZ(-1px) scale(2); 
} 
header img { 
 
  max-height: 100%; 
} 
header h1 { 
  margin-top: -20vw; 
  font-size: 5vw; 
  margin-bottom: -5vw; 
} 
 
h2 { 
  font-size: 5vw; 
} 
.nav_bar { 
  margin: 0; 
  padding: 0; 
  position:sticky; 
  top:0; 
  right:0; 
  left:20vw; 
  z-index:99; 
} 
 
.nav_bar ul { 
  list-style: none; 
} 
 
.nav_bar > ul { 
  display: flex; 
} 
 
.nav_bar > ul li a { 
  display: block; 
  background-color:rgba(0, 0, 0, 0); 
  padding: 1vw 3vw 1vw 3vw; 
  font-size: 0.7vw; 
  color: white; 
  text-decoration: none; 
  text-transform: uppercase; 
  transition: all 0.3s; 
  text-align: center; 
} 
 
.nav_bar > ul li { 
  position: relative; 
} 
 
.nav_bar li a:hover { 
  background: pink; 
} 
 
.nav_bar a::before { 
  content: ''; 
  bottom:0; 
  right:0; 
  position: absolute; 
  width: 100%; 
  height: 2px; 
  background-color: black; 
  transition: 0.2s; 
  transform: scaleX(0); 
} 
 
.nav_bar a:hover:before { 
  transform: scaleX(1); 
} 
 
.nav_bar li ul { 
  position: absolute; 
  margin-left: -40px; 
  min-width: 100%; 
  display: none; 
} 
 
.nav_bar li:hover > ul{ 
  display: block; 
} 
 
div { 
    color: black; 
    position: fixed; 
}

  <nav class="nav_bar"> 
    <ul> 
      <li><a href="#">Главная</a></li> 
      <li><a href="#">побочная</a> 
        <ul> 
          <li><a href="#">Главная</a></li> 
          <li><a href="#">Главная</a></li> 
          <li><a href="#">Главная</a></li> 
          <li><a href="#">Главная</a></li> 
          <li><a href="#">Главная</a></li> 
        </ul> 
      </li> 
      <li><a href="#">Главная</a></li> 
      <li><a href="#">Главная</a></li> 
      <li><a href="#">Главная</a></li> 
    </ul> 
  </nav> 
  <header> 
      <h1>Культура Японии</h1> 
      <h2>Театр</h2> 
      <img src = 'https://github.com/RussianButman/RussianButman.github.io/blob/master/dancers.png?raw=true'> 
  </header> 
  <div> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      <br> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel molestie purus, in consectetur enim. Mauris suscipit, nulla ac rutrum porttitor, turpis sem aliquam turpis, vel hendrerit libero dolor at nulla. Aenean tincidunt elit at mattis feugiat. Vivamus eget purus at quam porta commodo vel a turpis. Ut luctus eleifend erat vitae pulvinar. Curabitur mauris odio, luctus non risus in, rutrum semper mi. Sed facilisis eu ipsum ac mattis. Integer lectus velit, bibendum non ornare quis, dapibus non dui. Donec interdum, augue nec auctor iaculis, ex velit ornare magna, vitae porttitor metus arcu ut est. Nam in dui nisl. Nam nec ullamcorper mauris. Nam dictum mattis lectus eu scelerisque. Praesent in congue arcu. 
 
    Nulla viverra nunc ut iaculis bibendum. Curabitur nisi nisi, gravida ut lacinia ac, suscipit nec lacus. Suspendisse aliquet orci vel purus cursus, vitae facilisis ex tempus. Cras ullamcorper lacinia diam in ullamcorper. Proin cursus sollicitudin maximus. In efficitur lorem in dui placerat porttitor non ut neque. Etiam fermentum non arcu quis ultrices. Etiam ligula justo, sodales id suscipit id, hendrerit ut elit. Maecenas accumsan dui risus, eget feugiat nunc sagittis non. 
 
    Etiam mattis lorem in tellus placerat pretium. Nulla pulvinar nisl eu elit tempus efficitur. Vivamus et ipsum nisi. Vestibulum posuere elit sed turpis mattis tincidunt vitae id nibh. Donec tincidunt vitae dolor non fermentum. Proin bibendum, risus eu euismod aliquam, purus massa posuere felis, sed auctor odio felis in nulla. Vivamus interdum sem gravida erat pellentesque efficitur. 
 
    Donec ut diam et erat semper tincidunt non et ex. Integer vel lorem nec tortor condimentum scelerisque. Duis auctor, magna vel convallis vulputate, enim enim blandit est, vitae mattis felis sem consequat magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce auctor, metus sed euismod dictum, nisi eros congue nisi, eu mollis magna quam at ligula. Etiam eget lacus ut mi varius fermentum vel ut neque. Nulla nulla odio, sagittis vitae finibus non, porttitor vel sapien. 
 
    Ut dictum sagittis nibh, et fermentum tellus viverra semper. Donec convallis sapien nec turpis tempor, sed consectetur augue pulvinar. Fusce vel dolor eu tortor dapibus commodo. Integer eros tortor, bibendum ac vestibulum id, malesuada sit amet nunc. Phasellus sit amet sem eu nisi ultricies ultricies. Vestibulum ultrices vulputate urna, sed vestibulum enim vulputate ut. Pellentesque massa sapien, pharetra eu egestas nec, scelerisque at risus. Aenean nec lorem mattis, posuere nunc ut, convallis felis. Nulla facilisi. Quisque euismod massa ac libero laoreet pharetra. Nunc non nisi at sapien aliquet aliquam. Integer sapien arcu, sagittis eu consequat sit amet, congue sed mauris. 
 
    Fusce consectetur nibh augue, non lacinia elit euismod ac. Nunc varius tempus sodales. Vivamus non diam est. In enim elit, bibendum non risus a, auctor varius turpis. Sed fermentum pretium sollicitudin. Nulla placerat ipsum a ornare blandit. Nullam feugiat lacus nec elit facilisis, id egestas velit tempor. Phasellus ut vehicula sem, sed rutrum leo. Nunc at est eget augue vulputate tincidunt. Vivamus convallis purus vel pretium tristique. 
 
    Phasellus ut porttitor ipsum, eu pulvinar justo. Fusce venenatis lacinia lectus eu interdum. Nunc interdum ante non urna efficitur rutrum. Integer iaculis urna non felis tincidunt mattis. Phasellus sed neque laoreet, consectetur leo id, fringilla nisi. Nulla elementum enim vitae imperdiet lobortis. Cras tincidunt a tellus et tempus. Etiam porta nulla a augue hendrerit laoreet. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In bibendum consectetur ex quis ornare. Vestibulum consequat ipsum sed nisi viverra consectetur. Mauris posuere justo enim, sit amet congue mi dapibus sit amet. Etiam at dolor pretium, efficitur purus nec, porttitor lacus. 
 
    Cras imperdiet id est mollis malesuada. Nullam porta, justo quis malesuada volutpat, quam tortor ornare dolor, ac ornare nulla felis eu sem. Ut non neque tincidunt, sagittis tortor et, molestie felis. Etiam eu pretium nulla. Duis erat arcu, luctus sit amet eleifend a, feugiat ac enim. Duis fringilla volutpat molestie. Cras euismod vestibulum dolor vitae congue. Vestibulum id ultricies nisi, vitae tincidunt sapien. 
 
    Nunc in vulputate enim, a blandit ante. Donec ipsum nisl, egestas eu suscipit nec, sodales eget urna. Pellentesque eu dolor at velit auctor scelerisque. Pellentesque sollicitudin, elit quis elementum luctus, elit ligula maximus sem, at sollicitudin velit purus sed eros. Vestibulum non vehicula justo. Pellentesque elit ipsum, pellentesque mattis velit nec, ultricies ornare velit. Maecenas quis massa magna. Aenean dapibus nunc eget convallis malesuada. Donec ornare dapibus viverra. Duis malesuada ac lacus at lobortis. Pellentesque a imperdiet velit, a semper neque. Curabitur feugiat risus nec justo condimentum, vitae elementum diam congue. Aliquam erat volutpat. Etiam sollicitudin turpis vitae finibus dignissim. Etiam vitae urna sed diam cursus vulputate. Morbi nunc lorem, hendrerit ut elit et, porta maximus risus. 
 
    Donec eleifend, velit vel congue hendrerit, odio nulla tempus ante, non varius ex turpis nec eros. Donec volutpat pulvinar rutrum. Nullam finibus elit quis elit rutrum ultricies. Vivamus malesuada nisl ullamcorper suscipit consectetur. Curabitur libero arcu, lobortis at libero vitae, sodales molestie nisi. Pellentesque hendrerit cursus tempor. Nunc et faucibus urna. Proin sodales vehicula nulla id vehicula. Duis viverra odio sit amet turpis auctor ultrices. Nulla vel placerat mi. Cras nec massa a est accumsan efficitur eu non nisl. Donec dignissim elementum dolor, ac malesuada est. Donec est purus, consequat id libero non, venenatis tempus arcu. Nullam vel blandit libero. Proin volutpat sem egestas est dapibus, vitae bibendum sapien tincidunt. 
 
    Donec egestas erat aliquet, faucibus augue non, finibus ligula. Integer id eleifend urna. Donec fermentum sollicitudin rhoncus. Nam fermentum dapibus dolor. Integer justo mauris, fermentum eu condimentum sed, tempor sit amet ipsum. Sed in vulputate metus, in facilisis nulla. Phasellus a mi eu ipsum lobortis dictum ac ut nibh. Phasellus cursus, arcu sed pulvinar sodales, risus felis porta enim, in maximus risus eros vel libero. Proin augue lacus, egestas nec scelerisque vel, finibus non elit. Pellentesque mauris leo, finibus in erat sit amet, sagittis imperdiet tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse aliquet tincidunt vulputate. 
 
    Nullam mattis elementum massa, in posuere erat euismod nec. Aliquam iaculis scelerisque velit, eget aliquet sapien blandit vitae. Morbi dictum nunc ut arcu porta, a feugiat quam lobortis. Fusce imperdiet in tortor eu congue. Suspendisse potenti. Cras lacus odio, euismod et vehicula eu, dapibus in enim. Pellentesque hendrerit, sapien vel tincidunt fermentum, dolor diam imperdiet felis, in interdum justo quam et ipsum. Suspendisse quis arcu tristique, elementum ipsum varius, vulputate nibh. Proin bibendum metus non euismod accumsan. Suspendisse sed diam rutrum, varius mauris semper, interdum sem. 
 
    Donec ornare orci eu justo euismod, et scelerisque magna maximus. Praesent et lacus in ante faucibus porta eget et ligula. Donec porta fermentum lectus congue vestibulum. Phasellus at tempor purus. Maecenas aliquam urna ut libero tristique, in laoreet risus blandit. Ut non tristique eros, vel sollicitudin quam. Integer pretium viverra facilisis. Donec tempor augue erat, id volutpat nisi tempor ac. Suspendisse sit amet libero in arcu facilisis fermentum id eu justo. Etiam ligula nisi, euismod id neque ac, viverra viverra mauris. Etiam dignissim enim tellus. 
 
    Nunc nisl orci, mattis quis vehicula quis, rhoncus quis erat. Praesent sagittis porttitor quam, sit amet aliquam felis cursus nec. Sed sit amet congue nulla, nec sollicitudin mi. Praesent consectetur dui vel est ultricies pulvinar. Donec quis feugiat mi. Donec blandit nibh nec mauris rutrum, vitae blandit urna maximus. Donec ullamcorper feugiat ante, ac placerat est imperdiet vel. Phasellus molestie diam in quam sodales, at convallis metus facilisis. Sed nibh ante, congue nec gravida vel, fermentum sed velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi pretium sed est at interdum. Aenean venenatis quis lectus vel faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut laoreet quam a sapien euismod porta. Mauris et ullamcorper velit, eu tincidunt velit. Integer sit amet tristique dolor. 
 
    Nullam et eros vitae tellus rhoncus ornare. Aenean in libero turpis. Vivamus sed suscipit nulla, egestas porta enim. Mauris tempus eget odio ac ultrices. Integer fermentum orci id ante varius molestie. Mauris dictum sagittis ornare. Pellentesque eleifend a urna tincidunt congue. In suscipit purus eu elementum vehicula. Quisque placerat purus a erat elementum porta. Integer vel pulvinar diam. Sed dignissim nulla dictum erat dapibus, non sollicitudin nisi faucibus. 
  </div>