Rev. 2.73

hero.png

Sencha에서 CSS3 애니메이션을 만들어주는 데스크탑용 애플리케이션인 Sencha Animator를 릴리즈했습니다. 플래시의 타임라인을 이용한 애니메이션 생성 인터페이스와 유사한 레이아웃으로 구성되었으며, 간단한 도형 및 문자를 추가할 수 있는 생성 도구가 포홤되어 있습니다. Mac OS X, Windows, Linux에 설치할 수 있고 완성된 프로젝트를 Export(내보내기)하면 html과 css파일을 생성해 줍니다. 현재 CSS3의 애니메이션 속성은 웹킷기반 브라우저에서만 작동하므로 사파리, 크롬, 안드로이드 및 iOS 등의 모바일 브라우저에 사용될 수 있습니다. 서드-파티 플러그인을 사용하지 않고 광고를 제작할 수 있다고 강하게 피력하고 있네요. 아래는 Sencha Animator를 이용해서 만들어진 광고 예제입니다.

CSS3

Comments

CSS를 예술의 경지까지 끌어올린 Román Cortés씨는 순수 CSS만으로 3D 패럴랙스 효과를 만들어 내고 콜라 캔찌그러진 콜라 캔을 입체적으로 매핑한 경험이 있습니다. 그는 이제 조금더 실용적인 곳에 CSS 테크닉을 적용하기 시작했습니다. 위 예제 역시 약간의 HTML과 CSS만을 이용하여 작성된 것이며 마우스 행동에 따른 책장을 넘기는 효과가 적용되어 있습니다. 마치 플래시로 구현한 듯한 애니메이션을 보여주며, 그라디언트와 쉐도를 적절히 이용하여 사실적으로 표현했습니다. 웹킷 기반의 크롬과 사파리 브라우저에서만 작동하며 iOS나 맥OS 위의 사파리에서는 transition 속성이 하드웨어 가속을 지원하기 때문에 매우 부드러운 애니메이션을 경험할 수 있습니다. iOS에서는 약간 뒤틀리긴 하지만요.

아... 요것이랑 비슷한 것을 자바스크립트로 구현하던 짱박아둔 예제가 있었는데 완전히 새 됐군요.

Comments