<div class="l">
  <div class="bg">
    <div class="c c1"></div>
    <div class="c c2"></div>
    <div class="c c3"></div>
    <div class="c c4"></div>
    <div class="c c5"></div>
  </div>
  <div class="fg">
    <div class="c">
      <h1>
        SAMPLE ONE<br />
        <small>THIS IS THE FIRST DESCRIPTION</small>
      </h1>
    </div>
    <div class="c">
      <h1>
        SAMPLE TWO<br />
        <small>THIS IS THE SECOND DESCRIPTION</small>
      </h1>
    </div>
    <div class="c">
      <h1>
        SAMPLE THREE<br />
        <small>THIS IS THE THIRD DESCRIPTION</small>
      </h1>
    </div>
    <div class="c">
      <h1>
        SAMPLE FOUR<br />
        <small>THIS IS THE FOURTH DESCRIPTION</small>
      </h1>
    </div>
    <div class="c">
      <h1>
        SAMPLE FIVE<br />
        <small>THIS IS THE FIFTH DESCRIPTION</small>
      </h1>
    </div>
  </div>
</div>
<div class="i">
  <a href="#" class="active"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
  <a href="#"></a>
</div>

* {
  font-family: "Roboto", sans-serif;
  padding: 0;
  margin: 0;
}

html,
body,
.l,
.bg,
.bg > .c,
.fg {
  width: 100%;
  height: 100%;
}

/* LAYER */
.l {
  position: relative;
  overflow: hidden;
}

/* BACKGROUND */
.bg {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 1s;
}

.bg > .c {
  background-size: cover;
}

.c1 {
  background: url("https://unsplash.it/1024/600?image=1065") center center no-repeat;
}

.c2 {
  background: url("https://unsplash.it/1024/600?image=1047") center center no-repeat;
}

.c3 {
  background: url("https://unsplash.it/1024/600?image=688") center center no-repeat;
}

.c4 {
  background: url("https://unsplash.it/1024/600?image=563") center center no-repeat;
}

.c5 {
  background: url("https://unsplash.it/1024/600?image=560") center center no-repeat;
}

/* FOREGROUND */
.fg {
  position: absolute;
  top: 0;
  left: 0;
  transition: top 1s;
}

.fg > .c {
  width: 100%;
  height: 200%;
  position: relative;
}

.fg > .c > h1 {
  font-size: 56px;
  color: white;
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50%;
  text-shadow: -2px 0 black, -2px 2px black, -2px -2px black, 0 2px black, 2px 0 black, 2px 2px black, 2px -2px black, 0 -2px black;
  transform: translateY(-50%);
}

.fg > .c > h1 > small {
  font-size: 32px;
  color: #cfcfcf;
}

.i {
  width: 100%;
  text-align: center;
  position: absolute;
  bottom: 10px;
  word-spacing: 10px;
}

.i > a {
  background: #888888;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50%;
}

.i > a.active {
  background: white;
}

var bg = document.querySelector(".bg");
var fg = document.querySelector(".fg");
var link = document.querySelectorAll(".i > a");
var selectLink = 0;

function leInitWrapper() {
  var bgHeight = window.innerHeight;
  var fgHeight = bgHeight * 2;
  
  fg.style.top = Math.floor(fgHeight / 4 * -1).toString() + "px";

  for (var i = 0; i < link.length; i++) {
    link[i].setAttribute("page-value", i.toString());
    link[i].addEventListener("click", function(evt) {
      evt.preventDefault();
      selectLink = parseInt(this.getAttribute("page-value"))
      bg.style.top = (selectLink * bgHeight * -1) + "px";
      fg.style.top = (((selectLink * fgHeight) + Math.floor(fgHeight / 4)) * -1) + "px";
      for (var j = 0; j < link.length; j++) {
        link[j].classList.remove("active");
      }
      this.classList.add("active");
    });
  }
}

leInitWrapper();

window.addEventListener("resize", function() {
  leInitWrapper();
});