You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
🌐 웹 애니메이션 최적화 requestAnimationFrame 가이드
자바스크립트 웹 애니메이션 웹페이지의 애니메이션을 구현할때 CSS의 animatoin , transition , transform 속성을 통해 구현할 수도 있지만, 보다 사용자와의 복잡한 상호작용을 구현하게 하기 위해 Javascript와 함께 사용하여 스타일을 변화시키도 한다. 예를들어 특정 영역을 클릭하거나 웹페이지를 스크롤할때 변화무쌍한 애니메이션 작업들이 그러하다. 그래서 간단하고 규칙적인 애니메이션은 CSS로만 요소의 좌표값이나 스타일 크기를 변화시키고, 세밀한 조작이 필요한 애니메이션은 자바스크립트로 스타일 속성을 변경 시키는 편이다. 하지만 자바스크립트로 스타일 속성을 변화시키는 방법은 CSS보다 (특히 모바일에서) 성능이 좋지 않다. 따라서 어쩔수 없이 자바스크립트와의 상호 협력이 필요할 ..
🎨 transition / transform / animation 속성 사용법
CSS 트랜지션 트랜지션(transition)은 CSS 프로퍼티의 값이 변화할 때, 프로퍼티 값의 변화가 일정 시간(duration)에 걸쳐 일어나도록 하는 것이다. 상태 변화에 동반하여 변경되는 CSS 프로퍼티 값에 의한 표시의 변화를 부드럽게 하기 위해 애니메이션 속도를 조절한다. 쉽게 말하자면 요소에 마우스를 올렸을 경우, 색 혹은 크기가 변화하는 설정을 가미했는데, 뚝뚝 바로바로 변화하는 것 보단 부드럽게 전환되는 효과를 지정해 줄 때 사용한다고 보면 된다 transition은 전환되는 모션을 추가로 가미하는 속성이지 그 자체로 스타일을 주는 속성은 아니다. 그래서 :hover와 같은 가상 클래스 선택자(Pseudo-Classes) 또는 JavaScript의 부수적인 액션에 의해 발동한다. 그리고..
