Simulated Depth of Field

Simulated depth of field effect using JavaScript.

Simulated Depth of Field

Good Depth of Field
Shallow Depth of Field

Introduction to Depth of Field

With traditional SLR (Single Lens Reflex) photography it is possible to create a sharply focussed region within the photograph while the rest of the image is blurred. For example you may decide to have the foreground in focus while the background is blurred. This is controlled by opening or narrowing the aperture of the camera's lens to control the amount of light entering onto the film, a wide aperture produces what is termed 'shallow depth of field' (blurred background), while a narrow aperture gives 'good depth of field' with good focus throughout the image.

Using the opacity Java Scripts that I have explained in the 'Design' section of this site, it is possible to simulate this effect for the Internet. For a detailed explanation of the scripts I will be using, see the article entitled: "Layers Part 3: Animated Layer Opacity".

The Images

For this example I will be using two versions of one image. Using Photoshop 6 (or any other image editor), I have blurred the background portion of one of the images. Two seperate div layers are set up for each of the images, using the following CSS in the document head:

<style type="text/css">
#land-deep {position:absolute; left:170; top:130; width:442; height:294; 
background-color:none; filter:alpha(opacity=0); -moz-opacity:0%; z-index:2;}
#land-shallow {position:absolute; left:170; top:130; width:500; height:250; 
background-color:none; filter:alpha(opacity=100); -moz-opacity:100%; z-index:1;}

The 'land-deep' layer contains the image with good (or deep) depth of field, and it is this layer that the scripts will be working on. Initially the layer's opacity is set to 0 so that the image will load but remain invisible.

The 'fadeIn()' script is called with the onMouseOver event handler (any other will do) which fades in the 'land-deep' layer above the 'land-shallow' layer, causing the background to appear to blur. In fact, the whole image is changing as one jpeg is fading in above another. The 'fadeOut()' script is then used to reverse the process, and return to the original image. Here are the two images that are used in the above example:


This is a good example of how one simple script can be put to many uses with a bit of imagination. You could use this method in reverse, for example, starting with a blurred foreground and a sharp background, or the entire image could be blurred, the possibilities are endless.

I have used these scripts in the past to simulate changing lighting levels within an image on the fly; I intend to discus this further in a future article. For now, have fun experimenting.

John Collins

I have been writing about web technology and software development since 2001. I am the developer of the Alpha Framework for PHP, and the personal productivity app. I love open source, technology, and economics.