Chris Schneider씨가 MooTools JavaScript 라이브러리를 이용해 CSS 효과 JavaScript를 작성했습니다. CSS를 간단하게 해석해서 Webkit의 새 기능인 CSS Animations 를 구현해보았습니다.

CSS의 도입으로 우리는 프리젠테이션 레이어와 컨텐트 레이어를 분리할 수 있게 됐지만. CSS를 이용한 애니메이션을 추가할 순 없었습니다. DHTML이 이 부족한 부분을 채워줄 수 있지만, 그러면 프리젠테이션과 동작 레이어가 뒤섞여 버립니다.

처음에 저는 CSS에 “-moofx-{property}: {from} {to};” 과 같은 것을 추가하는 컨셉을 시도해봤습니다. 이 방법의 단점은 변경 사항이 있으면 작업을 두 번 해야한다는 것입니다. 처음에는 JavaScript를 사용하지 않는 사용자를 위해 보통의 CSS에서, 또 한번은 애니메이션을 위해서이죠.

WekKit의 CSS 애니메이션을 듣고 난 뒤에 컨셉을 CSS 애니메이션으로 바꿨습니다. 추가 대상이나 시작값을 설정하는 대신 ”평범하게” 정의했습니다. 추가해야할 것은 CSS 선언뿐입니다.

스크립트는 곧 v1.2를 릴리스MooTools를 이용했으며,Safari 3, Firefox 2 그리고 완벽하진 않지만 Internet Explorer 7에서 작동합니다. Internet Explorer 6에서는 동적인 pseudo 클래스 지원이 안되서 정상 작동하지 않습니다.

실제 동작하는 스크립트를 보시죠.

from CSS Animations via MooTools on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 2

댓글을 달아 주세요

  1. addr | edit/del | reply BlogIcon daybreaker 2008.05.21 02:37

    와, CSS로만 간단한 상태 전환 애니메이션을 제어할 수 있으면 좋겠다는 생각을 해봤는데 저렇게 구현이 되는군요. ^^;