<div class="parallax_container">
    <div class="parallax_layer_1 basic_setting"></div>
    <div class="parallax_layer_2 basic_setting"></div>
    <div class="parallax_layer_3 basic_setting"></div>
    <div class="parallax_layer_4 basic_setting"></div>
    <button class="parallax_layer_5 basic_setting"></button>
    <div class="footer">
      Image Source:
      <a href="http://www.pixiv.net/" target="_blank">http://www.pixiv.net/</a>
    </div>
  </div>
@import "compass/css3";
$w: 100vw;
$h: 100vh;

* {
  margin: 0px;
  padding: 0px;
  @include box-sizing(border-box);
}
.parallax_container {
  width: $w;
  height: $h;
  overflow-y: scroll;
  overflow-x: hidden;
  @include perspective(10px);
  background: black;

  .basic_setting {
    background-size: cover;
    background-repeat: no-repeat;
    width: $w;
    height: 200%;
    position: absolute;
    top: 0px;
    
    @include box-shadow(0px 0px 300px black inset);

    @include filter(brightness(100%));
    @include transition(-webkit-filter 0.5s);

    &:hover{
      @include filter(brightness(130%));
    }
  }
  .parallax_layer_1 {
    @include transform(translateZ(-1px) rotateZ(3deg));
    background-image: url("https://puu.sh/oXDLO/7b5a932ef1.jpg");
  }
  .parallax_layer_2 {
    top: -20%;
    left: 43%;
    background-position: right;
    @include transform(translateZ(-10px) rotateZ(-2deg));
    background-image: url("https://puu.sh/oXDNd/169a74d36c.jpg");
  }
  .parallax_layer_3 {
    top: 10%;
    left: 20%;
    @include transform(translateZ(-30px) rotateZ(7deg));
    background-image: url("https://puu.sh/oXDNQ/bec8c790e4.jpg");
  }
  .parallax_layer_4 {
    top: 50%;
    left: -30%;
    width: $w*0.7;
    height: $h*0.7;
    background-size: 100% auto;
    @include transform(translateZ(-5px) rotateZ(15deg));
    background-image: url("https://puu.sh/oXDO9/3c169032d0.jpg");
  }
  .parallax_layer_5{
    outline: 0px;
    border: 0px;

    top: 180%;
    left: 5%;
    height: $h*0.3;
    width: $w*0.3;
    background-size: 100% auto;
    @include transform(rotateZ(-15deg));
    background-image:url("https://puu.sh/oYAPX/381612bfb3.jpg");
    background-size: cover;    

    @include transition(all 0.3s);

    &:hover{
      cursor:pointer;
    }

    &:focus{
      cursor: pointer;
      @include transform(rotateZ(0deg));
      top: 130%;
      left: 10%;
      width: 80%;
      height: 80%;
    }
  }

  .footer {
    color: white;
    width: 100%;
    text-align: center;

    position: absolute;
    top: 210%;

    a {
      color: white;
    }
  }
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background-color: #ececec;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(56, 89, 100, 0.4);
  border: 2px solid #e3e7f0;
}
::-webkit-scrollbar-button {
  height: 0px;
  background: red;
  width: 0px;
}
::-webkit-scrollbar-corner {
  margin-top: 20px;
  background-color: #e3e7f1;
}
View Compiled 
/* Pure CSS Parallax Effect without Javascript */

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.