Rev. 2.73

Felix Gnass씨가 배포한 spin.js는 추가적인 이미지나 CSS를 호출하지 않고 순수 자바스크립트만으로 만들어지는 로딩 알리미입니다. 특정 자바스크립트 라이브러리에 종속적이지 않으며, IE6에서도 사용할 수 있습니다. 이것은 몇몇 HTML요소들에 CSS3에서 지원하는 속성들을 사용해서 그려지는 것이며, 이를 만족하지 못하는 하위 IE계열 브라우저에서는 VML을 이용하여 표현합니다.

다양한 옵션들을 지원하여 라인의 수, 길이, 두깨, 크기, 색상, 속도, 잔상, 그림자를 설정할 수 있으며, stop() 메서드로 중지할 수 있고 spin()메서드로 다시 시작할 수 있습니다. 사용방법은 다음과 같습니다.

var opts = {
  lines: 14, // The number of lines to draw
  length: 11, // The length of each line
  width: 6, // The line thickness
  radius: 19, // The radius of the inner circle
  color: '#000', // #rgb or #rrggbb
  speed: 1, // Rounds per second
  trail: 56, // Afterglow percentage
  shadow: true // Whether to render a shadow
};
var target = document.getElementById('foo');
var spinner = new Spinner(opts).spin(target);

// or use default options

var spinner = new Spinner().spin();
target.appendChild(spinner.el);

아래와 같은 코드를 사용하면 jQuery 플러그인으로도 사용할 수 있습니다.

$.fn.spin = function(opts) {
  this.each(function() {
    var $this = $(this),
        data = $this.data();

    if (data.spinner) {
      data.spinner.stop();
      delete data.spinner;
    }
    if (opts !== false) {
      data.spinner = new Spinner($.extend({color: $this.css('color')}, opts)).spin(this);
    }
  });
  return this;
};

Comments

Chris Coyier씨는 예술가인 Zoran Pekoviċ씨의 플래시로 만들어진 작품을 HTML, CSS, 그리고 약간의 자바스크립트를 이용하여 보여지도록 변환했습니다. 파이어폭스와 웹킷 계열 브라우저(사파리, 크롬 등)에 정상적으로 작동하며 파폭에서 더욱 깔끔한 애니메이션을 보여줍니다. 자바스크립트는 단지 z-index를 증가시키고 클래스 이름을 변경하며, 나머지는 모두 CSS로 표현되는 것입니다.

Click on the images to reveal another.

Comments

jQuery.fracs은 현재 보고있는 페이지의 뷰포트(보여지는 일부분)와 상호 작용하여 특정한 요소들이 정해진 조건으로 뷰포트에 지속해서 노출될수 있도록 만들어주는 jQuery용 플러그인 입니다. 브라우저의 창 크기에 구애받지 않는 웹 컨텐츠를 생산하도록 돕는 것이 목적이라 할 수 있겠습니다. 그리고 페이지 전체를 간략하게 보여주는 아웃라인 기능이 확장의 형태로 포함되어 있습니다. 아웃라인만을 그리는 것이 목적인 플러그인이 아니란 얘기죠.

하지만 저는 이 아웃라인(미니맵) 기능만 사용하고 싶었기에 코어에 해당하는 부분을 모두 날려버리고 미니맵 기능만 수행하도록 수정해야 했습니다. 상속으로 구현된 다수의 이벤트 핸들러들과 포지셔닝 관련 메서드들이 불필요했기 때문입니다. 그리고 개인적으로 jQuery를 그다지 좋아하는 편이 아니어서 뜯어 고치는 김에 Prototype용으로 작성했습니다. 해당 코드는 Gist에 등록했으니 혹시라도 필요한 분은 포크하시면 되겠습니다.

var minimap = new Minimap({
    crop: true
  , width: 80
  , height: 512
  , duration: 0.3
  , transition: Effect.Transitions.expoOut
  , styles: [
      {selector: "header,footer,section,article,nav a,pre,._c"}
    , {selector: ".article img,.article canvas,object,embed,p", fillStyle: "#ccc"}
    , {selector: "h2,h3,h4,.article a", fillStyle: "#c30"}
  ]
});

function doSomeUpdate() {
  ...
  minimap.draw();
}

이 미니맵은 Canvas 요소로 표현되는 것입니다. Minimap 클래스를 호출할 때 옵션으로 전달받은 선택자와 색상등을 참조하여 해당 요소의 포지션을 계산하고 스케일링하여 Canvas 요소에 그려냅니다. 다수의 이벤트 감시를 통해 페이지 상황을 갱신하며 뷰포트 위치를 트래킹하고 해당 위치로 스크롤할 수 있습니다. 그리고 모바일 브라우저나, Canvas를 지원하지 않는 브라우저에서는 나타나지 않습니다. 추가적으로 화면이 좁아지면 토글 되도록했으며, Smails의 갱신 시간에 Minimap이 redraw되도록 하였습니다. 이제 멀리 도망간 스마일을 추적할 수 있습니다. (ㅋㅋ) 우측에 달려있는 녀석이니 많이 애용해 주세요.

Updates:

* 2011/09/20 - 갱신 콜백 호출횟수 제한
* 2011/09/15 - context stroke 처리 개선
* 2011/09/15 - 캐시 리드로우(스크롤 오버해드 감소)
* 2011/09/15 - 토글 오류 수정
* 2011/09/15 - 전역 이벤트 버블 차단 오류 수정
* 2011/09/14 - 클릭 정확성을 위한 드래그 의도 검사
* 2011/09/14 - 텍스트 요소가 줄 변경된 경우 렉트 분할
* 2011/09/13 - 페이지 크기에 반응하는 자동 토글
* 2011/09/13 - 숨겨진 요소는 그리지 않음

Comments