소프트웨어/JavaScript • Dhtml

애플닷컴의 제품 슬라이더 자바스크립트 분석

falconer 2007. 6. 28. 08:53


출처 :  파이어준
애플닷컴의 iTunes페이지에 자바스크립트로 구현 된 제품 슬라이더가 심상치 않아 보여서 파 보았다. 이 제품 슬라이더는 Prototype.jsScriptaculous의 Slider컨트롤러가 사용 되었으며, 주요한 기능은 특정영역으로의 스내핑과  가로 스크롤바를 통한 제품 내비게이션이다. 이런저런 쓰레기 코드를 제거하였더니 약 150라인정도로 구현된 것을 알 수 있었다. 흥미로운 것은 아이폰의 인터페이스처럼 던지기(?) 제스쳐를 스크롤바에 적용해 놓았다. 위 데모에서 스크롤바를 힘껏 던져보자. 내키면 컴포넌트화하는 작업도 진행해 볼 생각이다.

  /* PRODUCT BROWSER */ 
  Event.observe(window, 'load', function() {
    AC.ProductBrowser.init({
      categories: [ {id: 'pb-cat1', offset: 0},
                    {id: 'pb-cat2', offset: 0.155},
                    {id: 'pb-cat3', offset: 0.657} ], // default offsets
      imageOverlap: 0,
      sliderCentering: 187, // handler width
      initialCategory: 1,
      arrowScrollAmount: 0.44
    });
  });