UX 개발/UX - 트랜지션 효과 썸네일형 리스트형 간단한 pure JS & CSS와 AJAX 활용 페이지 트랜지션 페이지 트랜지션을 만드는 방법에 있어서, swup 같은 라이브러리를 이용할 수도 있고 GSAP과 같은 advanced한 애니메이션 라이브러리를 활용할 수 있을 것입니다. 이 포스트에서는 기초 학습 차원에서 pure JS, CSS, AJAX(xhttp)를 이용해서 간단한 페이지 트랜지션을 만드는 방법을 학습하고자 했으며, 이를 구현해 보았습니다. 기본적인 원리는 overlay-screen이라는 클래스의 z-index 최상위 값을 갖는 요소를 width와 height를 0으로 숨겨 놓습니다.AJAX 콜을 날릴 때 overlay-screen에 width와 height을 변경시키는 애니메이션을 classList.add()를 통해 걸어 줍니다.animationend 이벤트를 받아서 classList.remove(.. 이전 1 다음
단순함연구소 UX개발실