Tuesday, December 15th, 2009
3D CSS Parallax Effect
<p>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:
-
-
<style type="text/css">
-
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 ;)
Brilliant!
“background-position: -32.3333333333px”
He used a (bad) tool.
Respect. That’s a win.
Reminds me of the CSSplay “animations” done 5 years ago: http://www.cssplay.co.uk/menu/streaker
I’ve already sat here for 15 minutes just moving my cursor back and forth. Thank you for taking my morning productivity down a notch.
While this uses js, the source code is much lighter: http://webdev.stephband.info/parallax.html
Me like!
I see no mention of the green lantern in his code.
Very nice!
Amazing! Keep up the good work.
Awesome work. Simple, yet every effective. Good stereoscopy.
Maybe useless but really cool! :-)
Hello Dion,
I’m Roman Cortes. First of all, thanks for the post about my experiment.
I don’t care if little websites use an iframe with it, but, as far as I know your traffic is very high and I’m currently having a lot of traffic right now. Please, if you think you are going to have more than 40 or 50k visits to your front page while this post is on it, host a own copy of the effect.
I hope you read this comment and I receive a reply. As soon as you read it, feel free to delete it.
Thanks so much,
Román Cortés
You could add :focus pseudo class so you could tab through the anchors and have keyboard control as well as mouse control.
Holy crap, that’s impressive. I’m going to have to try that out!
This is a really cool effect. Can’t stop messing with it :)
Nice effect! I wish to learn to do it!
Nice 1
Thanks for this, it inspired me to write a reverse parallax script using jQuery that automagically grabs elements and extends them in space on a page. Alot less work than slicing images…so only check it out if your lazy!
http://iwearshorts.com/featured/reverse-parallax-effect/
Also, it runs a similar effect with background images to the famous silverback.