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).
Try out demo.html via RawGit.
- 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.
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
});