CSS Parallax

[Medyman]

I've recently seen a whole host of sites attempting to achieve the parallax effect. I guess it's the new web trend.

If you haven't seen it yet, check out the website for ClearLeft's mysterious Silverback (http://silverbackapp.com/).

Hint: Resize your browser to see the effect.

A tutorial on achieving the same thing: http://www.thinkvitamin.com/features/design/how-to-recreate-silverbacks-parallax

[boogyman]

I saw this affect like 3-4 years ago when I was first starting to do some heavy duty CSS and I thought it was an interesting effect.

The page I saw it on incorporated it across a 3 column layout, weaving in and out of the three columns. That is a lot more complicated than the page you show, which really is nothing more then a background semi-transparent image repeated across the X-axis

I forgot the name of the developer whom had it on his blog page, but if I remember it I will post here so others can see a different use of the same effect

[Medyman]

That simplicty and subtlety is what I find attractive. Most uses of parallax on the web are just hideous and over the top. At least, ones I've seen.

[djr33]

Very cool, but I don't see much point if the page isn't resizing dynamically (and that would just be annoying).

[boogyman]

http://www.csszengarden.com/?cssfile=096/096.css isn't exactly the design i saw before which was on a personal blog, but this is an interesting template similar to it,

[Medyman]

http://www.csszengarden.com/?cssfile=096/096.css isn't exactly the design i saw before which was on a personal blog, but this is an interesting template similar to it,

Hmm, am I missing something here? I don't see the parallax.

[boogyman]

there isn't one, I was just trying to show the affect that I was talking about before.... the one I was originally talking about used the same format as my last post, but it was a parallax.

a parralax is just a X-axis repeating background

[Medyman]

Well, more acuratelly, is the change of the angle at which you view an object in relation to another object as you movie.

In relation to my first example, you have three layers of transparent .pngs which move independently when you resize the browser (horizontally) and give a somewhat 3D illusion.

It's NOT just a background repeating on the x-axis. I'm thinking you actually didn't notice the effect on the page. It's quite subtle by design and I think most people miss it when viewing the page (part of the reason why I like. love those "hidden" gems).