Rev. 2.73

jQuery용으로 만들어진 jQSlickWrap 플러그인을 이용하면 보시는 것 처럼 이미지의 피사체를 피하여 문자열들을 어울리게 배치할 수 있습니다. 실제로 애플로고 이미지를 첨부하고 jQSlickWrap 플러그인을 적용한 것입니다. 작동원리는 간단합니다. HTML5의 <canvas> 요소를 이용하여 이미지 데이터의 정해진 구간으로 루프를 돌면서 색상값을 근거로 피사체가 끝나는 위치을 분석하고 가상의 <div> 요소에 분석한 너비를 적용하여 바꿔치기하는 것입니다.
이 블로그는 Prototype 라이브러리를 사용하기 때문에 jQSlickWrap 플러그인을 그대로 날로먹을 수가 없어서 Prototype의 클래스로 변환하여 적용하였습니다. MIT 라이센스라 부담없이 마구 때려 고쳤습니다. 필요하신 분은 가져다 쓰셔도 무방합니다.

사용법 :

new SlickWrap(img, {
  bgColor: null,
  bloomPadding: false,
  resolution: 18,
  cutoff: 5
});

다운로드 :

Comments

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

Your Reaction Time!

captcha

avatar