Simulated Camera Blur (Depth of Field) in JavaScript

DepthBlur 3D Balls

 

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

CodeCanyon Scripts & Snippets
Buy my favourite Adobe Edge templates on CodeCanyon!

 

2 thoughts on “Simulated Camera Blur (Depth of Field) in JavaScript

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s