HTML/CSS Depth effect

Cant describe it properly nor can I find an example to show you…!
The effect is as if there were layers on the page to build up a depth on the page, when the mouse moves left the layers move at different degrees to create the illusion of foreground and distance.

Can anyone tell from that totally garbage description what I am on about?!

The demos in the link you posted are absolutely amazing :weee:

I doubt very much you can get the same effects using just html even with css.

Found a demo of the type of thing but it involves jQuery: http://webdev.stephband.info/parallax_demos_type.html

I’m sure there was one that did the same sort of thing with just HTML though

Just draw us a picture because it’s starting to sound like something between a deck of cards and an monkey grinder’s accordion/organ. Or do you mean like railway sleepers where you can move to the next sleeper on the rail track?

cooool but not quite what I meant but still damn cool!

Thats the beauty I was on about!
Now to dismantle it and break it :smiley:

You mean the layers have a initial x-position, and move over the x-axis with the moving of the mouse, where they layers that are closer to the mouse move more than than the layers that are further away from it? Sorta like the layers are steel and the mouse is a magnet?

Hi,

I think you are talking about the parallax effect when the window is closed or opened and is accomplished by placing one background image at a negative percentage position.

Alex Walker had a [URL=“http://www.sitepoint.com/examples/stretchy/test.php”]demo a while back. Just open and close the wndow.

I have to agree with Kalon here. Why would they otherwise use jQuery if they could do it with just html maybe in combo with CSS 3. I’m sure it would have been highly promoted. I saw most of the new features of CSS 3 but it didn’t involve anything near to your example

Confused :slight_smile:

Do you mean a 3D effect or perspective/angle thingy?