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

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

Ajax Questions and Answers

Ajax Learning Guide
Chances are, you've been doing JavaScript and XML developer work in Lotus Domino for quite some time. This old/new approach is causing quite a stir in...

James Gosling: For Ruby or Ajax or SOA, it's NetBeans
What does the Father of Java think of the emerging interest in rival languages such as Ruby? A lover of diversity, James Gosling says he's played...

Web development mastery for 2014
Job descriptions for web developers tend to contain a long wishlist of skills competency employers hope to find in quality candidates. Mastering every...