Rev. 2.73

CSS와 HTML로만 구현한 3D 패럴랙스 효과

Roman Cortes씨는 자바스크립트를 사용하지 않고 CSS와 HTML만으로 3차원 패럴랙스(시차) 효과를 만들어 냈습니다. 좌측 회화에 마우스 포인터를 올리고 움직여 보세요. 그저 놀라울 따름입니다.

소스코드를 열어보니 엄청난 노가다를 하셨더군요. 너비가 5픽셀 짜리인 <a> 요소를 촘촘하게 배치하고 해당 요소의 :hover액션에 의하여 상황에 맞은 이미지와 포지션을 출력한 것입니다. 참 대단하신 분입니다.

반투명 PNG 이미지 포멧을 사용하므로 이를 지원하지 않는 브라우저에서(IE 8 이하)는 정상적으로 보이지 않을 것입니다.

Comments

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

Your Reaction Time!

captcha

avatar