여기에 빌려와서 구현해 본 것은 우연히 디자인도 산뜻하기로 유명한 Panic Blog를 둘러보다 개인적으로 그 사실적 구현에 감탄을 자아내게 했던 효과이다. 
요샌 그 쓰임새가 널리 퍼지면서 이미지에 CSS 3D Transforms Module을 적용한 톡톡 튀는 다양한 효과를 종종 목격하게 되는데, 유달리 더 큰 감탄을 자아냈던 이유는 세심한 사실적 표현이 돋보였기 때문이다. 그림에 마우스를 갖다 대면 뒤에 있는 그림자마저 실제 투시 각도에 따른 적절한 변화를 표현하고 있으니 말이다.
맘에 드는 놈 앞에선 무조건 “View Source” 주문을 외치는 버릇이 동하여 소스를 훑어봤다.
먼저 마크업을 보면 일반 li 메뉴로 구성되어 있다.
<div id="features">
<ul>
<li><a href="http://www.panic.com/blog/2010/11/15-secrets-of-transmit/"><img src="tout-15secrets.png" alt="15 Secrets of Transmit 4" width="225" height="210" /></a></li>
<li><a href="http://www.panic.com/blog/2010/10/panic-state-of-the-union/"><img src="tout-sotu2010.png" alt="Panic State of the Union" width="225" height="210" /></a></li>
<li><a href="http://www.panic.com/blog/2010/07/coda-notes-for-safari-now-available/"><img src="tout-codanotes.png" alt="Coda Notes for Safari Now Available!" width="225" height="210" /></a></li>
<li><a href="http://www.panic.com/blog/2009/12/panic-retro-art/"><img src="tout-retroartwork.png" alt="Panic’s lost 1982 artwork. Found." width="225" height="210" /></a></li>
</ul>
</div>
여기에다, 기본적인 팔랑거리는 효과는 CSS에서 다음과 같이 적용되어 있다.
#features ul {
width: 900px;
height: 210px;
margin: 0 auto;
padding: 0;
list-style-type: none;
-webkit-perspective: 1200;
}
#features ul li img {
width: 225px;
height: 210px;
position: absolute;
top: 0;
-webkit-transition: -webkit-transform .3s ease;
-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transform-origin-z: 0px;
-webkit-transform-style: preserve-3d;
}
#features ul li:hover img {
-webkit-transform: rotateX(10deg);
}
마우스 hover 시 그림의 상단 x 축을 기준으로 약간의 회전 효과를 준다.
이 정도까진 누구나 구현할 수 있는 수준인데, 여기서 만족하지 않고 어느 장인의 섬세한 손길이 닿은듯한 그림자 효과까지 완성해서 더 사실적인 효과를 구현하고 있다. hover 시 그림자에도 독자적인 변화를 주려면 그림자를 배경으로 한 또 하나의 container가 필요하게 되는데, 이러한 용도의 그림자를 배경으로 가지는 div은 오로지 겉치장을 목적으로 하기 때문에, 굳이 마크업에 포함할 필요없이 페이지가 로딩할 때마다 JavaScript를 써서 아래처럼 추가해준다.
$(document).ready(function() {
$('#features li').prepend('<div>');
});
이제, 마우스 hover 시 추가된 div의 세로축을 조금씩 늘려서 그림자를 드리우는 효과를 구현했다.
#features ul li:hover {
-webkit-background-size: 225px 220px;
}
#features ul li div {
width: 225px;
height: 210px;
position: absolute;
top: 0;
background-repeat: no-repeat;
-webkit-transform-origin: 0 0;
-webkit-transition: -webkit-transform .4s ease;
}
#features ul li:hover div {
-webkit-transform: scaleY(1.02);
}
이렇게 해서 완성된 마우스를 갖다 대면 그림이 팔랑거리는 효과를 구현해 논 페이지 >>
무엇보다도 감명 깊은 것이라면, 무슨 기술이 어떻게 구연이 되었는가보단, 미세한 부분도 놓치지 않고 모든 힘을 쏟아부었을 때 비로소 기분 좋은 차별화된 인상을 전해줄 수 있다는 것이다. 작은 소소한 것에서도 들어간 열정에 따른 차이는 크게 표날 수밖에 없다.
참고로, 여기에 설명된 방법은 웹 브라우저의 지원 상황을 제쳐놓고도 키보드 접근성에 약간의 문제가 있어서 고민해봐야 할 문제점은 아직 남아 있다.
관련된 주제의 글