Someone asked me the other day how I created the parallax effect on the nerdplusart.com homepage. It’s actually pretty straightforward math to create that kind of effect (which I’m sure I borrowed from somewhere) and wrapped it up into a handy panel called CameraPanel when I was creating the landing page.

It’s called CameraPanel because it emulates a really simple 3D environment in which you position a Camera and then position objects in X, Y and Z space and then panel does the work of applying transfors and z-order so that everything works.

To be honest, this panel kind of violates what a Panel should do if a purist. Arguably, a Panel shouldn’t be applying transforms or adjusting the z-order of its children. In this case, though, that’s precisely the behavior I wanted. But you should know that it’s going to clobber any existing transforms that you’ve set.

So here’s how you use it:

<c:CameraPanel CameraX="0" CameraY="40" CameraZ="20" FocalLength="100" >
  <Rectangle Fill="Orange" Width="100" Height="100" c:CameraPanel.X="20" c:CameraPanel.Y="100" c:CameraPanel.Z="20" />
</c:CameraPanel>

To emphasize the feeling of parallax you need to create some movement. The panel doesn’t do this on its own. Instead, you need to move the panel’s “camera” around at runtime. That will have the effect of updating the relative position of the items according to our parallax math world and it makes the objects feel really physical. In the sample below, that code is in the MainPage.xaml.cs.

It’s also worth nothing that the panel doesn’t handle the animation on its own, it just does the layout. Animation is provided by the accompanying AnimatingPanelBase which will turn any custom panel into an animated one (this was written well before the awesome FluidMoveBehavior that ships with Blend). If you don’t need animation you can get rid of AnimatingPanelBase and change CameraPanel to derive from regular old Panel.

One other big disclaimer: I wrote this for Silverlight 2 which kind of feels like eons ago and we didn’t have a lot of the niceties that Silverlight 3 and 4 gave us (like DependencyProperty metatadata with the default values) so some of this code is pretty stale. Also, it’s been modified and reused for a couple of projects and I have a feeling that there is some dead code in here. If anyone happens to do some cleanup, let me know.

Get the Code

Here’s a sample of the panel in action (which highlights album covers from this year’s upcoming top 25!).