Depth of field effect in CSS

depth-of-field-effect-in-css.markdown

Depth of field effect in CSS

Turning http://css3playground.com/blur-filter/ into a codepen. Uses CSS blur filter with 3D transforms to fake a depth of field effect.

A Pen by Chris Ruppel on CodePen.

License.

index.html

<div></div>
<div></div>
<div></div>

script.js

  $(document).ready(function(){

    var back = 20;
    var middle = 325;
    var front = 550;
    var YY,
        offset,
        sizeBack,
        sizeMiddle,
        sizeFront;

    // For mouse users
    $('html').mousemove(function(e){

      offset = $('html').offset();
      YY = e.clientY - offset.top;

      sizeBack   = Math.abs(back-YY)/40;
      sizeMiddle = Math.abs(middle-YY)/40;
      sizeFront  = Math.abs(front-YY)/40;

      // apply blur
      $('div').css({
        '-webkit-filter': 'blur('+ (sizeBack) +'px)',
        '-webkit-transform': 'translate3d(500px, 150px, '+ -YY +'px)',
        '-moz-transform': 'translate3d(500px, 150px, '+ -YY +'px)',
        'transform': 'translate3d(500px, 150px, '+ -YY +'px)'
      });
      $('div + div').css({
        '-webkit-filter': 'blur('+ (sizeMiddle) +'px)',
        '-webkit-transform': 'translate3d(500px, 225px, '+ (100 + -YY/1.4) +'px)',
        '-moz-transform': 'translate3d(500px, 225px, '+ (100 + -YY/1.4) +'px)',
        'transform': 'translate3d(500px, 225px, '+ (100 + -YY/1.4) +'px)'
      });
      $('div + div + div').css({
        '-webkit-filter': 'blur('+ (sizeFront) +'px)',
        '-webkit-transform': 'translate3d(500px, 300px, '+ (200 + -YY/2) +'px)',
        '-moz-transform': 'translate3d(500px, 300px, '+ (200 + -YY/2) +'px)',
        'transform': 'translate3d(500px, 300px, '+ (200 + -YY/2) +'px)'
      });
    });
  });

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  transform-style: preserve-3d;
  perspective: 600px;
}

div {
  width: 400px;
  height: 200px;
  margin: -100px -200px;
  background: #fff;
  border: 20px solid #333;
  border-radius: 24px;
  position: absolute;
  z-index: 1;
  transform-style: preserve-3d;
  transform: translate3d(500px, 150px, 0px);
  -webkit-filter: blur(10px);
  transition: -webkit-filter .05s linear;
}

div + div {
  transform: translate3d(500px, 225px, 100px);
  z-index: 5;
  -webkit-filter: blur(4px);
}

div + div + div {
  transform: translate3d(500px, 300px, 200px);
  z-index: 10;
  -webkit-filter: blur(0px);
}