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

• iTunes Gift Cards
• iTunes
• Download iTunes 7
• iPod
• U2 iPod
• iPod nano
• iPod nano Product (RED)
• iPod shuffle
• Apple TV
• iPod Hi-Fi
• Nike + iPod
• iPod Socks
• Leather Case
• Nano Armband
• AV Connection Kit
• iPod nano Dock
• Universal Dock
• Camera Connector
• Radio Remote
• In-Ear Headphones
• USB Power Adapter

iTunes Products Accessories

출처 :  파이어준
애플닷컴의 iTunes페이지에 자바스크립트로 구현 된 제품 슬라이더가 심상치 않아 보여서 파 보았다. 이 제품 슬라이더는 Prototype.js와 Scriptaculous의 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 
    }); 
  });