WebKit의 새로운 CSS 변환에는 회전, 크기 변경 등의 여러 기능이 있어 사람들이 여러 가능성을 생각할 수 있게 되었습니다. LifeRay의 Paul Bakaus씨는 실험적으로 이런 새 기능을 이용해 iTunes 같은 멋진 Coverflow 효과를 작성하셨습니다. 실시간으로 흐름 및 애니메이션도 지원하지만, canvas나 미리 렌더링된 그래픽은 사용하지 않았습니다.
Paul 씨는 실제 Coverflow 위젯을 작성하는데 jQueryUI를 사용했으며, jQueryUI의 슬라이더로 슬라이드 효과를 낼 수 있었습니다. 마우스를 클릭하거나 키보드의 좌/우 화살표를 이용해 탐색할 수 있습니다.
이 데모를 보시려면 CSS 변환이 지원되는 Safari 3.1 이나 Webkit이 필요합니다.
from Using CSS transforms to Build a Coverflow Effect on Ajaxian
이 편리하고 매력있는 css 기능은 커스텀 CSS 태그를 이용해 페이지의 어느 엘리먼트에서도 모든 종류의 2d 변환을 실행할 수 있도록 합니다. 이것은 DOM 엘리먼트를 회전하거나 변형할 수 있을 뿐 아니라, 여러분이 원하는 것을 위해 일반적인 매트릭스 함수를 사용할 수도 있다는 의미입니다.
CSS 변환은 nightly build 뿐 아니라 Safari 3.1과 iPhone에서도 가능합니다. 따라서, 현재의 사용자들을 목표로 삼는 것도 가능합니다.
이 데모를 보시려면 CSS 변환이 지원되는 Safari 3.1 이나 Webkit이 필요합니다.
from Using CSS transforms to Build a Coverflow Effect on Ajaxian
'[IT] Web Tech' 카테고리의 다른 글
Ajaxian 자습서: Coda 슬라이더 효과 (0) | 2008.06.11 |
---|---|
SquirrelFish: 새로운 상세 사항 (0) | 2008.06.11 |
crossdomain.xml, Java와 JNLP (0) | 2008.06.11 |
Dojo Firebug Lite: console.log 를 넘어 (0) | 2008.06.11 |
CSS 변환을 이용해 Coverflow 효과 만들기 (1) | 2008.06.10 |
Yahoo! 디자인 모양 키트 1.0 (0) | 2008.06.10 |
Gaia Widgets 3.0 "Glory" (0) | 2008.06.10 |
Safari 에서 뒤집기 (0) | 2008.06.10 |
Acrobat.com: PDF와 Flash 함께하다 (1) | 2008.06.10 |
댓글을 달아 주세요
흐미.. 아주 좋네요. 그런데 유료. ㅠㅠ