Rev. 2.73

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

  /* 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
    }); 
  });

Comments

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

Your Reaction Time!

captcha

avatar