Rev. 2.73

Andrea Giammarchi씨는 Canvas 요소를 사용하지 않고 생 자바스크립트만으로 "리퀴드 이미지 효과"라는 신선한 이미지 출력 효과를 만들어냈습니다. 크게 확대한 이미지요소를 지정한 방향으로 이동시키면서 일치하는 지점의 DIV 요소의 크기를 점진적으로 늘려가는 방법으로 구현되었습니다. 이것은 액션스크립트1 시절에 자신이 작성했던 imageStretcher 코드에서 영감을 받았다고 합니다. MIT 라이센스를 따르며, 용량도 매우 작고, 크로스-브라우저까지 지원합니다. 그가 작성한 데모 중 Sony사의 VAIO 로고를 이용한 적용예제는 참 인상적이더군요. 좌측은 실제로 리퀴드 이미지 효과를 적용해 본 것이며, 적용방법은 다음과 같습니다.

Liquid({
    // image src, whatever format
    src:"myimage.png",

    // element to use as Liquid FX container
    target: document.getElementById("fx") // $("#fx")[0] for lazy people,

    // optional direction, left by default
    // accepted: left, right, bottom, top
    direction: "left",

    // optional scale factor, 2000% by default
    // it is how much the image should be stretched
    scale: 2000,

    // optional speed, 1 to whatever, by default 10
    speed: 10,

    // optional callback,will be executed at the end of the FX
    callback:function(){alert("it's Liquid!")}

    // optional onload to perform some operation after the image has been loaded
    onload:function(){FX not started yet but image loaded}

    // optional reverse property over a completed liquid FX
    reverse:true
});

Comments

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

Your Reaction Time!

captcha

avatar