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.
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.
<div></div> | |
<div></div> | |
<div></div> |
$(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)' | |
}); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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); | |
} |