Mr.Proto님의 Carousel 라이브러리(Scrolling-Object)

한 눈에 봐도 강렬한 뽀스가 느껴지는 Mr.Proto님(본명은 Sébastien Gruhier)은 13년간의 C++과 Java로  OO계를 주름 잡으셨다가 최근에 Ruby on Rails로 전향하셨다고 합니다. 흰눈썹에서 품어져 나오는 이미지는 그의 나이를 궁금케 하는군요. ^^

Bookmark manager, Transparent message, Prototype window, Prototype carousel 라이브러리가 Mr.Proto님의 홈페이지에서 제공되고 있습니다. 이번에 살펴볼 라이브러리는 Prototype carousel로서 스크롤링 라이브러리입니다.

Consulting, Training, Development Ruby on Rails/AJAX/JavaScript가 직업이라고 되어 있는데 현재는 free라고 되어있네요. 코드를 보시면 알겠지만 이 분의 코드는 상당히 깔끔하게 객체화도 잘되어있고, 읽기도 편합니다.

먼저, 코드의 Outline을 살펴보면 다음과 같습니다.

위의 property 중에 대부분의 코드는 option항목을 저장하기 위해서 사용됩니다.
스크롤링이 되는 대상들은 페이지 로딩 시에 로딩이되고 각각이 li태그로 감싸져서 반영이 됩니다. 이들 li태그들은 가로방향으로 생성이 됩니다. 다음은 li태그임을 보여주기 위해서 모든 css를 제거한 화면입니다.

css를 모두 제거한 화면

이 화면에 carousel.css를 적용하게 되면 다음과 같이 가로바 형태의 모습이 나오게 됩니다. 여기에서 다시 appliecation.css를 적용하여서 스크롤링하기 위한 Object만 나오게 합니다.

이 때 사용하는 방법이 li들이 저장되어 있는 ul객체를 div로 감싸고 이 div의 크기를 줄인다음 overflow:hidden으로 처리함으로써 나머지 영역을 클리핑하게 됩니다.

carousel.css만 적용한 상태로 div에 overflow:hidden이 적용되어있으나 width는 정하지 않은 상태입니다.

이 상태에서 스크롤 버튼을 누를 때 li의 위치만 변경시켜주면 스크롤이 되게 됩니다. 내부에서는 Clipping되어 안보이기는 하나 li태그들의 위치가 좌우로 움직이게 됩니다. 이 때 사용자는 Clipping 영역만 보기 때문에 스크롤이 되었다고 느끼게 되는거죠.

new Effect.MoveBy(this.carouselList,
      0, delta * this.elementSize, this.options.animParameters);

위의 코드는 script.aculo.us이 코드로 this.carouselList element를 x좌표 0, y좌표 delta * this.elementSize만큼 옮겨줍니다. this.options.animParameters는 script.aculo.us에서 사용되는 설정값들을 저장하는 array들입니다.

개념 자체는 상당히 simple합니다만, 실제 적용하기 위해서는 좌표 계산등에 대해서 상당히 신경써야 되는 부분이 있습니다.  Mr. Proto님께 감사의 마음을 갖고(센스와 디자인 감각도 상당함을 느끼세요) 라이브러리를 사용하셔야 합니다. ^^

• 이 라이브러리는 Bill Scott's Carousel Component(YUI 라이브러리 사용)의 Prototype/script.aculo.us버전입니다.
• 버전은 0.26입니다.
• 라이센스는 MIT 라이센스입니다.
• IE6, Firefox(Mac, PC), Opera, Camino, Safari에서 테스트되었습니다.

출처 : http://www.xilinus.com/