Roman Cortes씨는 자바스크립트를 사용하지 않고 CSS와 HTML만으로 3차원 패럴랙스(시차) 효과를 만들어 냈습니다. 좌측 회화에 마우스 포인터를 올리고 움직여 보세요. 그저 놀라울 따름입니다.
소스코드를 열어보니 엄청난 노가다를 하셨더군요. 너비가 5픽셀 짜리인 <a>
요소를 촘촘하게 배치하고 해당 요소의 :hover
액션에 의하여 상황에 맞은 이미지와 포지션을 출력한 것입니다. 참 대단하신 분입니다.
반투명 PNG 이미지 포멧을 사용하므로 이를 지원하지 않는 브라우저에서(IE 8 이하)는 정상적으로 보이지 않을 것입니다.
Comments
Got something to add? You can just leave a comment.
우와.....
reply edit
정말 대단하군요-_-
reply edit
헐... 무섭네요. ㅎㅎ;;
reply edit
그러게 말예요.
reply edit
[blog] CSS와 HTML로만 구현한 3D 패럴랙스 효과 http://bit.ly/5KvfJi | 이런 기술들 정말 대단함 +_+
from Topsy
RT @lumirent: [blog] CSS와 HTML로만 구현한 3D 패럴랙스 효과 http://bit.ly/5KvfJi | 이런 기술들 정말 대단함 +_+
from Topsy
RT @firejune CSS와 HTML로만 구현한 3D 패럴랙스 효과 http://firejune.com/1507
from twitter
예술의 극치를 보여주네요...
이거 보고 깜짝 놀랐읍니다...
reply edit
Your Reaction Time!