UX 개발/JS - Animation 썸네일형 리스트형 간단한 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.remov.. 간단한 웹스크롤애니메이션 라이브러리 AOS 기본적으로 스크롤 움직임에 따라 개체에 움직임을 주는 애니메이션의 경우 AOS 라이브러리를 사용하면 쉽게 애니메이션을 줄 수 있습니다. 제이쿼리 없이 사용되기 때문에 가벼운 편이라고 볼 수 있습니다. AOS (Animate on Scroll) AOS 소개 페이지 AOS AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io AOS 깃헙 페이지 michalsnik/aos michalsnik/aos Animate on scroll library. Contribute to michalsnik/aos development by creating an account on GitHub. github.co.. 이전 1 다음
단순함연구소 UX개발실
