- CSS 페이지 전환 효과
페이지 이동 시 슬라이딩으로 다음 화면이 나타나는 효과를 구현하였다. 기능은 CSS의 animation을 이용하여 transform 속성 값에 슬라이딩 효과처럼 보이도록 코드를 작성하였다.
코드는 아래와 같다.
1) HTML
먼저 인덱스 페이지(첫 페이지)의 코드를 아래와 같이 작성한다.
<!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" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="page1" class="slide-in">
<h1>Welcome Home</h1>
<a href="about.html">About</a>
</div>
</body>
</html>CSS는 외부 파일로 연결하였고, a 링크의 About 폰트가 있는 버튼을 클릭 시(버튼 태그는 아니고, 버튼처럼 모양을 만든 a 링크 태그이다) 다음 페이지로 이동하도록 작성하였다.
다음 페이지인 About 페이지의 HTML 코드도 똑같이 작성한다. id명과 버튼 클릭 시 다시 첫 페이지인 인덱스 페이지로 이동되는 것 외에는 모두 동일하다.
<!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" />
<title>Document</title>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div id="page2" class="slide-in">
<h1>Welcome to About</h1>
<a href="index.html">Home</a>
</div>
</body>
</html>
2) CSS
가장 중요한 CSS이다. 화면에 공백이 없도록 전체 적용으로 margin과 padding에 0 값을 준다.
* {
margin: 0;
padding: 0;
}
#page1,
#page2 {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
width: 100%;
flex-direction: column;
position: absolute;
}
a {
color: white;
text-decoration: none;
margin-top: 50px;
border: 1px solid white;
padding: 10px 30px;
}
#page1 {
background-color: ForestGreen;
}
#page2 {
background-color: DarkOrange;
}그리고 배경 색상이 화면을 꽉 채울 수 있도록 코드를 작성하였으며(height : 100vh; width: 100%;), 앞서 언급했던 a 링크 태그를 버튼처럼 보이도록 위치를 가운데로 고정하고 border로 테두리를 주었다.
그리고 animation 속성으로 슬라이딩 효과처럼 보이도록 작성한 코드를 change라 이름짓고, 이를 값에 넣어준다.
.slide-in {
animation: change 0.5s ease forwards;
}
@keyframes change {
from {
transform: translateX(100%);
visibility: visible;
}
to {
transform: translateX(0%);
}
}keyframes을 통해 처음과 끝에 각각 translateX에 100%, 0%의 값을 주어 슬라이딩 효과를 통해 화면이 미끄러져 들어오는 것으로 표현하였다. 이렇게 하면 완성된다.
다만 위의 경우는 a 링크 태그 클릭 시 기존 화면은 사라지면서 하얀색 기본 바탕화면에 다음 페이지의 화면이 미끄러져 들어오는 식으로 표현이 되는데, 기존 화면은 따라서 고정이 되지 않는다. 고정하려면 외부 패키지 설치 등을 통해 좀 더 확장된 기능을 사용해야 하는 것으로 확인이 된 바로, 우선 위와 같이 구현하였다.
참고 : 유튜버 Dev Ed의 Create A Page Transition Effect In Javascript Tutorial
'TIL' 카테고리의 다른 글
| <자바스크립트 Javascript> 데이터 타입 (2) | 2021.12.14 |
|---|---|
| <자바스크립트 Javascript> 자주 사용되는 용어 알기 (0) | 2021.12.13 |
| <자바스크립트 JavaScript> 변수 (0) | 2021.12.11 |
| <자바스크립트 JavaScript> 배경과 역사 (0) | 2021.12.10 |
| <CSS> Flexbox 레이아웃 (2) + Flexbox Froggy 풀이 (0) | 2021.12.09 |