3D CSS Parallax Effect
Author: Dion Almaer
15
Dec
Roman Cortes has a fun parallax effect using just CSS and HTML. Scroll over the bad boy above and see it at work.
Then view the source and have your eyes bleed :)
HTML:
-
-
-
a#a96:hover img {left: 224px}a#a96:hover b.d1 {background-position: 224px 0; width: 224px}a#a96:hover b.d2 {background-position: -449.6px 18px;}a#a96:hover b.d3 {background-position: -32px -216px; width: 368px}a#a96:hover b.d4 {background-position: -64px -74px;}a#a97:hover img {left: 223px}a#a97:hover b.d1 {background-position: 223px 0; width: 223px}a#a97:hover b.d2 {background-position: -449.7px 18px;}a#a97:hover b.d3 {background-position: -32.3333333333px -216px; width: 367.666666667px}a#a97:hover b.d4 {background-position: -64.6666666667px -74px;}a#a98:hover img {left: 222px}a#a98:hover b.d1 {background-position: 222px 0; width: 222px}a#a98:hover b.d2 {background-position: -449.8px 18px;}a#a98:hover b.d3 {background-position: -32.6666666667px -216px; width: 367.333333333px}a#a98:hover b.d4 {background-position: -65.3333333333px -74px;}a#a99:hover img {left: 221px}a#a99:hover b.d1 {background-position: 221px 0; width: 221px}a#a99:hover b.d2 {background-position: -449.9px 18px;}a#a99:hover b.d3 {background-position: -33px -216px; width: 367px}a#a99:hover b.d4 {background-position: -66px -74px;} </style>
-
-
-
<a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a>
-
<a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /><b class="d1"></b><b class="d4"></b><b class="d3"></b><b class="d2"></b><span> </span></a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" /><b class="d1"></b>
-
I hope he used a tool ;)
