Language/HTML

View Transition API 사용 방법 (HTML, CSS 만으로 화면 전환 효과!)

미리보기 View Transition API 작동 영상 미리보기 작동원리 페이지를 불러오면, 현재 페이지를 캡쳐하여 "view-transition-old" 에 저장한다. 새로운 페이지로 이동되면 이전 페이지 장면인 "view-transition-old"에 저장 되어 있던 장면을 보여주고, 새로운 화면 인 "view-transition-new" 화면을 나타낸 후 다시 "view-transition-old"에 저장된다. 사용방법 JS 로도 컨트롤이 가능하지만 이번 시간에는 HTML과 CSS만으로 제어하는 방법을 배워보겠습니다. # 01 버전 확인 크롬의 버전 111 이상에서 작동하기에 현재 사용하는 크롬의 버전을 확인합니다. (크롬 설정 -> Chrome 정보) # 02 view-transition 활성화 ..

'view transition meta' 태그의 글 목록