<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;
}

/* Pure CSS Parallax Effect without Javascript */