Rev. 2.73

기억.JPG
script.aculo.us Reflector 효과 적용

우리는 멋진 이미지 효과메 항상 목말라한다. 그쵸? wollzelle에서 공개한 리플랙션(반사효과)효과script.aculo.us의 build.js를 이용하여 가능하게 한다. 투명도를 기반으로 드로잉 되기 때문에 배경색 또는 배경 이미지에 영향을 받지 않는다. 아래의 코드를 사용하여 적용할 수 있다. 옵션으로는 amount와 opacity를 제공한다. amount는 표시할 영역, opacity는 투명도를 설정한다. 적절한 옵션 값은 직접 조율하자.
단, 주의해야 할 점은 임의로 이미지크기를 변경했을 경우이다. 이미지 크기가 원본이미지 크기와 다를 때 리플랙션 효과가 깨진다. 항상 원본 이미지의 리플랙션을 표시하기 때문이다. 이 블로그의 전역에 걸쳐 리플랙션 효과를 적용시켜 보았다.

<script type="text/javascript">
<!--
var Reflector = {
reflect: function(element) {
element = $(element);
options = $H({
amount: 1/3,
opacity: 1/3
}).merge(arguments[1] || {});
var p = element.parentNode, n = element.nextSibling;
var d = 1.0/(element.height*options.amount);
(element.height*options.amount).times( function(line) {
var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
[Builder.node('img',{src:element.src,
style:'margin-top:-'+(element.height-line-1)+'px'
})]);
p.insertBefore(h,n);
$(h).setOpacity((1-d*line)*options.opacity);
});
}
}
// 적용시키기
Event.observe(window,'load', function(){
Reflector.reflect('이미지ID');
Reflector.reflect('이미지ID',{ amount:1/2, opacity:3/4 });
});
-->
</script>

Comments

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

  • 뮤직리카 뮤직리카

    아... 정말 답답 합니다. 이거 도대체 어떻게 로딩 시켜야 되는 건가요? 프로토 타입도 로딩했고 다 했는데 위 코드를 js로 만들어서 로딩 시키면 무조건 스크립트 에러 납니다. 조속한 답변 부탁드립니다.

    reply edit

  • 아.. 죄송합니다. (요즘 슬럼프 모드라..)
    뮤직리카님 블로그에 들러보니 잘 적용된듯 하던데요? 에러도 없고 잘 작동하고 있는것으로 보입니다만...

    reply edit

Your Reaction Time!

captcha

avatar