kremalicious

Been so in love with the parallax effect that I have to post another article about it. For the non-geeks: I don’t mean measuring distances between objects in space, the parallax error in photography, any StarTrek episode, the movie Parallax View and definitely not DC Comic’s Parallax monster.

I mean Parallax Scrolling which is a technique often used in good ol’ arcade and video games like Moon Patrol or Sonic the Hedgehog. In such 2D games parallax scrolling was used to create an illusion of three dimensional depth.

Since our operating systems are mainly 2D too we can use this pseudo 3D technique to create the same illusion in our web browsers. Of course this was first done by flash designers and it’s a popular effect used in flash based websites or parts of it.

But with the rise of CSS this technique can now be done without the use of flash as Alex Walker and Paul Annett discovered. You see we are now very close to the Atari with Web-Design.

So it’s time for a first showcase of websites using this effect. At the end of this article you’ll find some tutorials for making this effect too. And as you can see there’s a parallax effect in the header of this website too so I will not include myself in this showcase list

Read the rest of this entry »

Discuss (16) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!

As you may know there’s a nice parallax effect implemented on this website. Just resize your browser window and you can see the black polaroids in my header flying on different layers. As I stated in an earlier post there is already some usage for it around the web while this effect seems to be first used by the guys from Silverback. If you don’t know what this effect is about head over to thinkvitamin to get to know what it is and how you can achieve it.

But now Marco Kuiper from marcofolio.net adds another usage for it. He created a cool optical illusion with just plain css/html and some pictures. You can see a demo of this effect in action on Marco’s website. Head over to the demo and resize your browser window. You should articulate something like “whoooot!” now. Marco has written some words about it too and you can download the demo. He has also done a nice tutorial how to achieve this optical illusion. Very cool!

(Via CSS-Tricks)

Discuss (2) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!

If you resize your browser window while you are browsing this website you can see the black polaroids in my header fly and move at different speed on three layers. Pretty cool, huh?

I implemented the header effect of those flying black polaroids on kremalicious.com following the original idea by the folks of clearleft on their silverback teaser page

This effect draw much attention in the webdesign community and meanwhile there are some great articles about this effect. Over at thinkvitamin is a detailed explanation of the effect. Paul Annett from clearleft gives an in-depth-view how they created the parallax effect on their silverback teaser page.

A more common explanation gives Chris Coyier over at css-tricks.com. He uses three star layers to make a cool space-effect.

Discuss (0) | Digg This! | Save to Del.icio.us | Stumble It! | Float This!