미리보기
작동원리
- 페이지를 불러오면, 현재 페이지를 캡쳐하여 "view-transition-old" 에 저장한다.
- 새로운 페이지로 이동되면 이전 페이지 장면인 "view-transition-old"에 저장 되어 있던 장면을 보여주고, 새로운 화면 인 "view-transition-new" 화면을 나타낸 후 다시 "view-transition-old"에 저장된다.
사용방법
JS 로도 컨트롤이 가능하지만 이번 시간에는 HTML과 CSS만으로 제어하는 방법을 배워보겠습니다.
# 01 버전 확인
크롬의 버전 111 이상에서 작동하기에 현재 사용하는 크롬의 버전을 확인합니다.
(크롬 설정 -> Chrome 정보)
# 02 view-transition 활성화
1. 크롬에서 Chrome://flags/#view-transition-on-navigation 에 접속
2. viewTransition API for navigations 를 Enabled 로 변경
# 03 태그 추가
해당 메타 태그를 문서 내 <head></head> 사이에 추가해줍니다.
<head>
<meta name="view-transition" content="same-origin">
</head>
# 04 작동 확인
현재 모든 설정이 끝났습니다. 페이지를 이동해보세요!
화면 전환 시 부드럽게 사라지고 나타나는 모습을 보실 수 있습니다.
CSS로 제어
이번에는 전체 페이지가 아닌 원하는 부분에만 화면 전환 효과를 줘볼까요?
저는 <main> 태그를 페이지 이동 시 좌측으로 슬라이드 되는 화면 전환 효과를 넣어보겠습니다.
(준비물의 /assets/animation.css 에 작성 해주시면 됩니다)
# 01 이름 부여
먼저 각 요소에 이름을 지정해 줍니다.
저는 <header> 태그에 header라는 이름을, <main> 태그에 main이라는 이름을 부여했습니다.
해당 이름은 자유롭게 지정해 주시면 됩니다.
header {
view-transition-name: header;
}
main {
view-transition-name: main;
}"이때 main에 효과를 넣을텐데 왜 header에도 이름을 주나요?" 라고 궁금하시는 분들이 계실텐데요.
기본적으로 해당 메타 태그 삽입하면 모든 요소들에 fade 효과가 들어갑니다.
하지만 이름을 지정하면 해당 요소는 그대로 유지됩니다.
# 02 Keyframes 만들기
해당 요소에 적용할 애니메이션(Keyframes)을 만들어 줍니다.
저는 이전 페이지 장면인 "view-transition-old"는 왼쪽으로 사라지고, 새로 방문한 페이지인 "view-transition-new"는 우측에서 왼쪽으로 나타는 형식의 애니메이션을 구현하고자 합니다.
@keyframes slide-from-right {
from { transform: translateX(100%); }
}
@keyframes slide-to-left {
to { transform: translateX(-100%); }
}slide-from-right는 해당 요소의 가로 크기의 100%만큼 우측으로 이동해서 시작을 하겠다고 선언을 하였습니다.
slide-to-left는 해당 요소의 가로 크기의 -100%만큼 좌측으로 이동하겠다고 선언을 하였습니다.
# 03 Keyframes 적용
앞서 설명대로 현재 "view-transition-old", "view-transition-new"에는 장면이 저장되어 있습니다.
해당 장면들은 ::view-transition-old(요소 이름), ::view-transition-new(요소 이름) 라고 불러옵니다.
::view-transition-old(main) {
animation: 1.0s slide-to-left;
}
::view-transition-new(main) {
animation: 1.0s slide-from-right;
}장면은 처음 로딩 시 원래 있던 그 자리 그대로 위치해 있습니다.
예제 코드의 키 프레임을 적용함으로써 이전 장면은 좌측으로 사라지고(from), 새로운 장면은 우측에서 시작(to) 하게 되어 슬라이드 효과가 나타납니다.
* 만약 문서 자체에 효과를 주고 싶으면 #01을 건너뛰고 (root)를 입력하시면 됩니다.
# 04 확인하기
이제 html 문서에 링크를 추가하여 클릭해 보세요. main 영역만 슬라이드 효과가 나타나는 것을 확인하실 수 있습니다.
main.html
<header>
<a href="index.html">메인페이지</a>
<a href="sub.html">서브페이지</a>
</header>
<main>
메인페이지 내용
</main>
sub.html
<header>
<a href="index.html">메인페이지</a>
<a href="sub.html">서브페이지</a>
</header>
<main>
서브페이지 내용
</main>
주의사항
현재 모든 브라우저 지원이 아닌, 크롬 111 버전 이상의 브라우저에서 실행이 됩니다.
하단 이미지를 참조해주세요.
준비물 다운로드
'Language > HTML' 카테고리의 다른 글
| <p> 태그, <br> 태그란? (0) | 2023.03.16 |
|---|---|
| <b>, <strong> 태그란? (feat. 두 태그의 차이) (0) | 2023.03.13 |
| <a> 태그란? (0) | 2023.03.13 |
| <div> 태그란? (0) | 2023.03.13 |
| <article> 태그란? (0) | 2023.03.11 |