자바스크립트 막코딩으로 (특별한 animation/effect 라이브러리 사용 없이) 뒤집는 효과를 구현해 보았습니다
구현을 위주로 엉망으로 짠 코드라 부끄럽지만, 올리고 봅니다.
(상수값으로 효과를 만들어본 첫번째 버전)
http://fliptest.azki.org/
(몇가지 변수를 적용할 수 있는 두번째 버전)
실제 flip 과정중 캡쳐화면입니다.
그리고 element 의 구성은 3가지로 이루어져 있습니다.
왼쪽 삼각형과 오른쪽 삼각형이 입체적으로 착각하도록 할 수 있습니다.
삼각형을 만드는 방법은 참고사이트중 Triangles in Javascript 에 자세하게 나와있습니다.
(Flip!0.4 - A jQuery plugin)
http://www.uselesspickles.com/triangles/demo.html
(Triangles in Javascript)
http://www.xentrik.net/css/filters.php
(CSS Filters)
ps.
참고사이트중 Flip!0.4 - A jQuery plugin 에서 처음 flip 효과를 보았는데,
그 flip 은 Opera browser 를 지원하지 못합니다. 제가 만든 것은 됩니다 :]
테스트 한 브라우저 목록입니다.
구현을 위주로 엉망으로 짠 코드라 부끄럽지만, 올리고 봅니다.
- url
(상수값으로 효과를 만들어본 첫번째 버전)
http://fliptest.azki.org/
(몇가지 변수를 적용할 수 있는 두번째 버전)
- 소개
실제 flip 과정중 캡쳐화면입니다.
그리고 element 의 구성은 3가지로 이루어져 있습니다.
왼쪽 삼각형과 오른쪽 삼각형이 입체적으로 착각하도록 할 수 있습니다.
삼각형을 만드는 방법은 참고사이트중 Triangles in Javascript 에 자세하게 나와있습니다.
- 참고 사이트
(Flip!0.4 - A jQuery plugin)
http://www.uselesspickles.com/triangles/demo.html
(Triangles in Javascript)
http://www.xentrik.net/css/filters.php
(CSS Filters)
ps.
참고사이트중 Flip!0.4 - A jQuery plugin 에서 처음 flip 효과를 보았는데,
그 flip 은 Opera browser 를 지원하지 못합니다. 제가 만든 것은 됩니다 :]
테스트 한 브라우저 목록입니다.
- FF2, FF3
- IE6, IE7, IE8
- Opera 9
- safari 3 (windows)
- Chrome 0.3
'javascript' 카테고리의 다른 글
What is false in javascript? (0) | 2009.01.16 |
---|---|
apply Style Sheet rules (0) | 2008.12.01 |
자바스크립트로 마우스 휠 (mousewheel) 움직임 체크. (0) | 2008.10.30 |
prototype의 constructor에 대한 질문. (왜 저장해뒀지?) (0) | 2008.07.18 |
JSON 2 Table v 1.01 제이슨 데이타를 테이블로 출력합니다 (0) | 2008.07.02 |