• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 페이지전환: 날아서 돌아가는 애니메이션

화면 기록 2024-08-20 오후 6.19.49.mov

이 부분에서도, @keyframes를 사용하여 날아서 돌아가는 애니메이션을 구현할 수 있습니다.

단, 이 효과에서 가장 중요한 부분은 애니메이션이 끝난 후 페이지 이동을 처리하는 방법입니다. 애니메이션이 끝나기 전에 페이지를 이동시키면 애니메이션이 제대로 보이지 않을 것입니다. 이를 방지하기 위해서, JavaScript의 animationend 이벤트를 사용하여 애니메이션이 완료된 후 페이지를 이동시키는 방식을 사용합니다.

animationend 이벤트

animationend 이벤트는 CSS 애니메이션이 완료될 때 발생합니다. 이 이벤트를 사용하면 애니메이션이 끝난 후 특정 작업을 수행할 수 있습니다. 이 예제에서는 애니메이션이 끝나자마자 페이지가 이동하도록 설정되었습니다.

• animationend 이벤트의 활용:
  • 애니메이션이 끝나는 정확한 시점을 감지할 수 있습니다.
  • 예를 들어, 화면에서 요소가 사라진 후 페이지 이동, 요소가 변환된 후 데이터 로드 등 다양한 작업을 이 이벤트와 결합하여 수행할 수 있습니다.

const JS_나가기기능 = () => {
	document.getElementById("HTML_페이지").style = "animation-name: 이전페이지애니메이션;"
	
	this.addEventListener('animationend', () => {
    location.href = "./02-page-back-effect1.html"
	});
}

📝 실습 코드