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

Got something to add? You can just leave a comment.

  • 승짱 승짱

    멋지다는 말외엔...^^

    reply edit

  • 감자머리 감자머리

    멋지네요. 감사합니다, 좋은자료!

    reply edit

  • naucika naucika

    아웅. 똑같이 해도 안되네요.
    <div id='_tags'><a>...</a></div> 주고
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="cumulus.js"></script>
    <script type="text/javascript">
    new Cumulus('_tags');
    </script>
    했는데, 롤오버는 되지만, 돌질 않아요. 모든 브라우져에서..
    오류도 안나고 뭐가 잘못됬는지 모르갔어요ㅜ. ㅜ

    reply edit

  • naucika naucika

    prototype 을 최신버젼 1.6.1 로 받아서 하니까 액션이 안 일어납니다.
    그래서 혹시나 해서 firejun 님의 http://firejune.com/javascripts/Libraries.min.js 을 써서 하니까, 잘 됩니다.
    prototype 의 버젼을 타는걸까요...??

    reply edit

  • 파이어준 파이어준

    아, 혼란을 드려 대단히 죄송합니다. 즐겨사용하는 CSS 선택자 엔진을 그대로 사용해서 이러한 문제가 발생하였습니다. 이 쿼리를 prototype용으로 교체하여 이 문제를 수정하였습니다.

    reply edit

  • naucika naucika

    setInterval(this.renderFrame.bind(this, elements), 20);
    이부분에 대한 외부 컨트롤도 있었으면 좋겠습니다.
    필요할 경우에만 작동시키는 start() / stop() 같은 기능입니다.
    타이머를 task 로 만들어보고 있는데, div를 최초 block 으로 해놓지 않으면 계산을 하지 못해 initilize 부분도 수정이 되어야 할것 같습니다. 요즘들어 이런걸 보면 상상력이 부족한게 문제가 아닐까 한다는... ㅜ.ㅜ

    reply edit

  • 파이어준 파이어준

    말씀하신 play/stop 메서드를 추가하였습니다. display 프로퍼티가 'block'이 아닌경우 오류가 발생하는 문제에 대해서는 재고해 보도록 하겠습니다. 좋은 의견주셔서 감사합니다.

    reply edit

  • 쿠나 쿠나

    경이롭군요..!
    허나 위젯으로 쓰기에는 HTML 렌더링 처리량이 너무 버겁네요 ;ㅅ;

    reply edit

  • 파이어준 파이어준

    네 그렇습니다. 자식노드가 30개 이상이되면 일부 브라우저에서는 성능이 떨어지는 것을 체감할 수 있습니다. 현시점에서 표현의 한계로 생각됩니다. 시간이 해결해 주겠죠!

    reply edit

  • naucika naucika

    정말 감사합니다!
    clearInterval 이였군요. 간단한걸 못 찾고 있었네요. -_-;

    reply edit

  • jejette jejette

    퍼블리셔입니다. 매일와서 퐈이어준님 블로그를 보는데요.. 이 태그클라우드는 맨날 봐도 굳이네영

    reply edit

  • pa**** pa****

    주인장만 볼 수 있는 비밀 댓글입니다.

    reply edit

  • 파이어준 파이어준

    소스 65라인의 *:hover 스타일 시트를 수정하시면 됩니다.

    reply edit

  • 치선 치선

    훌륭한 API 감사합니다. stop 기능이 안 먹어서 그런데 혹시 살펴볼 부분이 있는지요. IE8이랑 Fire Fox 모두에서 처음 시작은 (cumulus.play(); ) 은 잘되는데 , stop() 를 눌러도 멈추질 않네요 감사합니다.

    reply edit

Your Reaction Time!

avatar

captcha