3D CSS Parallax Effect

Category: CSS , Showcase

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 :)

<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>
<body>
<a href="#" id="a0"><img src="meninas_bg2.jpg" width="80" height="455" alt="" /> </a><a href="#" id="a1"><img src="meninas_bg2.jpg" width="81" height="455" alt="" /> </a>
<a href="#" id="a2"><img src="meninas_bg2.jpg" width="82" height="455" alt="" /> </a><a href="#" id="a3"><img src="meninas_bg2.jpg" width="83" height="455" alt="" /> </a><a href="#" id="a4"><img src="meninas_bg2.jpg" width="84" height="455" alt="" /> </a><a href="#" id="a5"><img src="meninas_bg2.jpg" width="85" height="455" alt="" /> </a><a href="#" id="a6"><img src="meninas_bg2.jpg" width="86" height="455" alt="" /> </a><a href="#" id="a7"><img src="meninas_bg2.jpg" width="87" height="455" alt="" /> </a><a href="#" id="a8"><img src="meninas_bg2.jpg" width="88" height="455" alt="" /> </a><a href="#" id="a9"><img src="meninas_bg2.jpg" width="89" height="455" alt="" /> </a><a href="#" id="a10"><img src="meninas_bg2.jpg" width="90" height="455" alt="" /> </a><a href="#" id="a11"><img src="meninas_bg2.jpg" width="91" height="455" alt="" />

I hope he used a tool ;)

Posted by Dion Almaer at 6:40 am
19 Comments

4.5 rating from 80 votes

19 Comments »

Comments feed TrackBack URI

Brilliant!

Comment by MorganRoderick — December 15, 2009

“background-position: -32.3333333333px”

He used a (bad) tool.

Comment by xtassin — December 15, 2009

Respect. That’s a win.

Comment by elliotsh — December 15, 2009

Reminds me of the CSSplay “animations” done 5 years ago: http://www.cssplay.co.uk/menu/streaker

Comment by Chris Heilmann — December 15, 2009

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.

Comment by igaenssley — December 15, 2009

While this uses js, the source code is much lighter: http://webdev.stephband.info/parallax.html

Comment by m3tropolis — December 15, 2009

Me like!

Comment by fzammetti — December 15, 2009

I see no mention of the green lantern in his code.

Comment by tempire — December 15, 2009

Very nice!

Comment by TJK — December 15, 2009

Amazing! Keep up the good work.

Comment by renbeb — December 15, 2009

Awesome work. Simple, yet every effective. Good stereoscopy.

Comment by DanielFrechette — December 15, 2009

Maybe useless but really cool! :-)

Comment by pmontrasio — December 15, 2009

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

Comment by romancortes — December 15, 2009

You could add :focus pseudo class so you could tab through the anchors and have keyboard control as well as mouse control.

Comment by Ahrjay — December 15, 2009

Holy crap, that’s impressive. I’m going to have to try that out!

Comment by Skilldrick — December 16, 2009

This is a really cool effect. Can’t stop messing with it :)

Comment by RichardReddy — December 16, 2009

Nice effect! I wish to learn to do it!

Comment by Zmicer — December 19, 2009

Nice 1

Comment by ethanium — September 24, 2010

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.

Comment by newe1344 — April 4, 2011