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