이전에 한 방식보다는 위로만 올라가는 단순한 방식이 쓰일 곳이 많을 것같고, 창에 따라서 scroll의 정도가 달라져서 불편했다. 또한 js 파일 없이 css만으로 구현을 해보고 싶었다.
1. 준비
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./index.css">
<script type="text/javascript" src="./index.js"></script>
<title>parallax scrolling 2</title>
</head>
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer__0">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_0.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__1">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_1.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__2">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_2.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__3">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_3.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__4">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_4.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__5">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_5.png?raw=true" />
</div>
<div class="parallax__layer parallax__layer__6">
<img src="https://github.com/samdbeckham/blog/blob/master/dev/_assets/images/articles/firewatch/layer_6.png?raw=true" />
</div>
<div class="parallax__cover"></div>
</div>
</body>
</html>
*{
box-sizing: border-box;
}
html, body {
background-color: #FEDCC8;
}
.parallax {
perspective: 100px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
position: absolute;
top: 0;
left: 50%;
right: 0;
bottom: 0;
margin-left: -1500px;
}
.parallax__layer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer img {
display: block;
position: absolute;
bottom: 0;
}
.parallax__cover {
background: #2D112B;
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 2000px;
z-index: 2;
}
.parallax__layer__0 {
transform: translateZ(-300px) scale(4);
}
.parallax__layer__1 {
transform: translateZ(-250px) scale(3.5);
}
.parallax__layer__2 {
transform: translateZ(-200px) scale(3);
}
.parallax__layer__3 {
transform: translateZ(-150px) scale(2.5);
}
.parallax__layer__4 {
transform: translateZ(-100px) scale(2);
}
.parallax__layer__5 {
transform: translateZ(-50px) scale(1.5);
}
위의 CSS 코드에서 보는 것처럼 단순히 각 레이어마다 translate 값을 다르게 준다면 해결할 수 있었다.
2. 결과
parallax scroll이 잘 적용됨을 볼 수 있다.
블록체인, IOT, 클라우드에 관심이 많은 개발자 지망생