Focal
Simulates a camera focus within a CSS 3D transform powered scene using CSS blur filters.
MIT License
jQuery Focal
Simulates a camera focus within a CSS 3D transform powered scene, by blurring layers (using CSS filters) according to proximity to the focal point (determined via translateZ values).
Demo
Try out demo.html via RawGit.
Browser support
- Chrome 18+
- Safari 6+
- Firefox 35+
- Opera 15+
Dependant on CSS filter support, specifically blur.
Works fine in Chrome and beautifully in Safari. Firefox won't support filters by default until version 35. IE is a bummer as usual, although Microsoft says it's on the way.
Usage
Refer to demo.html for a working example.
In the HTML, create a container and apply a CSS perspective in pixels.
Add scene layers to the container with varying CSS transform translateZ values. Scene layers must be child to the container as nested transforms are not yet supported.
If desired, set a transition for the blur on all layers:
#container > * {
transition: all 1s;
}
To set a container's focal point on a layer with the id layer-1:
$('#container').focalPoint($('#layer-1'));
Again, setting the maxBlur option (the blurriest near and far layers may appear) a bit sharper than default:
$('#layer').focalPoint($('#layer-1'), {
maxBlur: 5
});