Edit in JSFiddle

$("html, body").stop().animate({"scrollTop": 0}, 1500);

$(window).on("scroll", function() {
    var scroll = $(this).scrollTop();
    $("h1").text(scroll);

    for (var i = 0; i < 5; i++) {
        $("section > article").eq(i).css({
            "transform": "translateZ(" + (-5000 * i + scroll) + "px)"
        });
    }
});

<!-- 스크롤 거리 수치 확인 -->
<h1>0</h1>
<!-- 박스그룹 -->
<section>
    <article class="on">box1</article>
    <article>box2</article>
    <article>box3</article>
    <article>box4</article>
    <article>box5</

@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Orbitron);
* {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style-type: none;
}
a {
  outline: 0;
  text-decoration: none;
  color: #555;
}
img {
  border: 0;
}
body {
  width: 100%;
  font-family: Orbitron;
  font-size: 12px;
}
body {
  width: 100%;
  height: 23000px;
  font-family: Orbitron;
  font-size: 12px;
}
h1 {
  position: fixed;
  top: 40px;
  left: 70px;
  z-index: 2;
  font-size: 100px;
}
section {
  position: fixed;
  width: 1200px;
  height: 700px;
  left: 50%;
  top: 50%;
  margin-left: -600px;
  margin-top: -350px;
  perspective: 2500px;
  z-index: 1;
  border: 3px solid red;
}
section > article {
  width: 1200px;
  height: 700px;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.3;
  z-index: 1;
  background-color: blue;
  font-size: 100px;
  color: #fff;
}
section > article.on {
  z-index: 2;
}
section > article:nth-child(1) {
  transform: translateZ(0px);
}
section > article:nth-child(2) {
  transform: translateZ(-5000px);
}
section > article:nth-child(3) {
  transform: translateZ(-10000px);
}
section > article:nth-child(4) {
  transform: translateZ(-15000px);
}
section > article:nth-child(5) {
  transform: translateZ(-20000px);
}