Создание изменяющегося при прокрутке фона с использованием только CSS

Демонстрация работы изменяющегося при прокрутке фона с использованием только CSS, адаптация примера из урока Dudley Storey, специально для сайта dejurka.ru

HTML

<section>
  <h1>Приезжайте в Исландию</h1>
</section>

<section>
  <h1>Населенная последней в Европе, большая чать Исландии остается чистой и нетронутой.</h1>
</section>

<section class="pop">
  <h1>Население: 325,671<br/><br/>
  Территория: 103,001км<sup>2</sup><br/><br/>
  = 3 человека на квадратный километр</h1>
</section>

<section>
  <h1>Исландия, у которой есть много геотермальной энергии, - одно из самых зеленых мест на планете.</h1>
</section>

<section>
  <h1>Приезжайте в Исландию. Вы удивитесь.</h1>
</section>

CSS

@font-face {
  font-family: Edelsans;
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/edelsans_regular-webfont.woff);
}
body { 
  margin: 0;
  font-family: Edelsans, Avenir, sans-serif;
}
section { 
  height: 100vh; 
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
  flex-direction: column;
  padding: 2vw;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-size: 4vw; 
}
section:first-of-type { 
  text-transform: uppercase;
  font-size: 7vw;
}
section:first-of-type, section:nth-of-type(3) { 
  color: #fff;
  text-shadow: 0 0 5px rgba(0,0,0,0.4); 
}
section:nth-of-type(even) { 
  background: #fff;
}
section:nth-of-type(1) { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/iceland-fjords.jpg); 
}
section:nth-of-type(3) { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/iceland-pool-faces.jpg); 
}
section:nth-of-type(5) { 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/iceland-ice.jpg); 
}