Rev. 2.73

플래시 기반으로 구축된 워드프레스의 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