Rev. 2.73
Mathias Schütz씨는 자바스크립트 프레임웍들의 API를 한눈에 알아볼 수 있도록 비교해 주는 자바스크립트 프레임웍 메트릭스를 구축하였습니다. 프레임웍의 용량, 속도, 확장여부, 라이센스, API문서와 튜토리얼 및 데모의 링크, 참고서적 유무 정보를 포함하고 있어 자바스크립트 프레임웍을 선정하거나 다른 것으로 교체하거나 학습할 때 매우 유용하게 사용할 수 있습니다. jQuery, MooTools, DojoToolkit, Prototype, Script.aculo.us, Ext.JS, Adobe Spry, BBC Glow, Yahoo UI! Library가 준비되어 있으며, 주요한 기능과 프레임웍 단위로 코딩 예제를 쉽게 조회할 수 있어 API문서 역할까지 일부분 수행합니다. 완전 멋진 분이군요!
플래시 기반으로 구축된 워드프레스의 Cumulus 플러그인과 유사한 UI를 자바스크립트로 구현해 보았습니다. Ricardo Cabello씨의 Google Sphere 소스를 참고하였으며, Prototype 자바스크립트 프레임웍을 사용하였습니다.
크로스-브라우저를 지원하도록 코딩했습니다만, IE계열 브라우저에서는 ClearType 폰트인 경우 노이즈가 발생할 수 있고, 'transform' CSS프로퍼티를 사용할 수 없어서 거리감을 표현 할 수 없으며 성능이 다소 떨어지는 문제점이 있네요. 차후 보완하도록 할 예정입니다.
작동 방식은 특정 DOM 요소를 지정하여 Cumulus 인스턴스를 생성하면 지정된 요소가 포함하는의 자녀 요소들이 날아다니는 대상이 됩니다. 만약 자녀 요소들 중에 class이름이 'fixed'문자를 포함하고 있으면 정 중앙에 위치시킵니다. 주의해야 할 점은 부모 요소는 반드시 너비와 높이값을 가지고 있어야 합니다. 사용방법은 좌측의 예제와 코드를 참고하세요.
HTML:
<script src="/javascripts/prototype.js" type="text/javascript"></script>
<script src="/javascripts/cumulus.js" type="text/javascript"></script>
JavaScript:
var cumulus = new Cumulus('reference_element_id', {
hoverEffect: false, // default true
horizontalAngle: 0.2, // default 0.1
spinSpeed: 0.0050, // default 0.0015
cameraFocus: 200 // defalult auto
});
cumulus.stop(); // stop playing
cumulus.play(); // continue playing * original - cumulus.js
* minified - cumulus.js
* 2009.09.07 IE는 자동으로 'Tahoma' 폰트를 사용하도록 설정됩니다.
* 2009.09.07 자식요소가 'fixed'인 경우 요소의 위치를 한 번 이상 연산하지 않습니다.
* 2009.09.08 'cameraFocus' 옵션을 이용하여 확대/축소 할 수 있습니다.
* 2009.09.08 브라우저 화면 크기를 변경한 경우 마우스 반응 위치를 교정합니다.
* 2009.09.09 투명도가 0 이하인 경우 요소를 숨기고 위치를 연산하지 않습니다.
* 2009.09.09 'spinSpeed' 옵션을 이용하여 회전속도를 조정할 수 있습니다.
* 2009.09.09 'horizontalAngle' 옵션을 이용하여 상/하 기울기 최대치를 조정할 수 있습니다.
* 2009.09.09 'hoverEffect' 옵션을 활성화 하면 요소들에 hover 효과를 부여합니다.
* 2009.09.14 자식 노드를 선택하는 쿼리를 prototype용으로 교체하였습니다. (종전에는 Sly 선택자 사용)
* 2009.09.14 naucika님의 요청으로 play/stop 메서드를 추가하였습니다.
Comments