Simulated Camera Blur (Depth of Field) in JavaScript

 

Quick demo of the faux 3D camera blur engine I’m currently working on. Using Greensock’s awesome Draggable you can rotate the lens and the spheres come in and out of focus. And before you say it – I know, I know. It only works in Safari and Chrome and even then it’s a bit iffy and inconsistent but that’s CSS Filters for you. But it does work on iOS (iPad mainly) and the performance ain’t bad.

You could easily do this in Edge Animate but I chose to use plain JavaScript on this one mainly to avoid jQuery as I want to squeeze out as much performance as possible.

I’ve already thought of loads of cool uses for this (it needs a lot of tidying up and optimising) so I’ll be posting some more involved and aesthetically pleasing stuff soon.

View the Camera Blur demo

Buy my favourite Adobe Edge templates on CodeCanyon!