티스토리 뷰
자, 그러면 패러렉스를 직접 사용해보도록 하겠다.
일단 지난 시간 parallax 프로젝트 폴더에 dist 폴더가 생긴걸 기억할거다. 거기에서 parallax.min.js 파일을 복사해서 사용할거다.
자, 그럼 이제 html에 아래와 같이 parallax.min.js 파일을 적용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="js/parallax.min.js"></script>
<title>Parallax</title>
</head>
<body>
</body>
</html>이렇게 했다면 index.html 파일을 브라우저를 통해 실행시키면 parallax.min.js 파일을 로딩하는 것을 확인 할 수 있다.
그러면 레이어로 사용할만한 이미지를 두장을 구해놓자. 나는 우주이미지와 로켓 이미지 두장을 구해다가 적용할 거다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="js/parallax.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#screen {
width: 800px;
height: 700px;
}
#screen img {
width: 100%;
}
#screen img#rocket {
width: 100px;
}
</style>
<title>Parallax</title>
</head>
<body>
<div id="screen">
<div>
<img src="sample001.jpg" />
</div>
<div>
<img src="sample002.png" id="rocket" />
</div>
</div>
</body>
</html>이렇게 했더니 화면은 이렇게 나온다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="js/parallax.min.js"></script>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
#screen {
width: 800px;
height: 700px;
overflow: hidden;
}
#screen img {
width: 100%;
}
.layer1 {
background: url("sample001.jpg") no-repeat center / cover;
width: 110%;
height: 110%;
margin-top: -20px;
margin-left: -20px;
}
.layer2 {
height: 100%;
}
#screen img#rocket {
position: absolute;
width: 100px;
transform: rotate(90deg);
left: 100px;
top: 50%;
margin-top: -50px;
}
</style>
<title>Parallax</title>
</head>
<body>
<div id="screen">
<div class="layer1" data-depth="0.2"></div>
<div class="layer2" data-depth="0.6">
<img src="sample002.png" id="rocket" />
</div>
</div>
<script type="text/javascript">
var screen = document.getElementById("screen");
var parallax = new Parallax(screen);
</script>
</body>
</html>막 이것저것 스타일도 추가하고 위치도 바꾸고 로켓 방향도 바꾸고했다.
그것보다 중요한건 레이어로 사용되는 div 태그에 data-depth라는 속성을 추가한 것과 body 닫기 태그 위에 있는 script를 확인 하자. 특히 스크립트쪽을 알아보자.
var screen = document.getElementById("screen");
var parallax = new Parallax(screen);이렇게 하면 screen 아이디를 갖고 있는 엘리먼트 안에 있는 엘리먼트를 레이어로 data-depth에 따라 서로 다른 움직임을 보이게 된다.
이것을 jquery로 적용한다면 아래처럼 적용할 수 있을거다.
var parallax = new Parallax($("#screen")[0]);별로 대수롭지 않은 이 코드는 아래와 같이 동작하게 한다는 것을 확인 할 수 있다.
용량이 너무 커서 이미지 사이즈가 작아진 점 이해바란다.
암튼 이렇게 마우스의 움직입에 따라 서로 다르게 움직이는 레이어를 확인할 수 있고 이를 통해 입체적인 착시를 일으켜 보다 다이나믹한 효과를 경험할 수 있다.
오늘은 여기까지.
안녕!
'Dev > Javascript' 카테고리의 다른 글
| 패러렉스(parallax.js) 사용해보기 #1 (0) | 2019.06.21 |
|---|---|
| jQuery UI Datepicker 한글화 (0) | 2017.08.28 |
| jQuery UI Datepicker만들기 (2) | 2017.08.28 |
| jQuery를 버리자 #1.jQuery에 대하여 (0) | 2016.11.29 |