Menu
I'm trying to blur the content behind a fixed position header so that the content behind it has the user scrolls is blurred when behind this div.
I used to achieve this with simple opacity in CSS but this does not blue the content behind the DIV, merely imposes a translucent panel in front of it.
Is there a simple way even if its a cheat of achieving what I am after. Whether by using a PNG background image or in CSS.
Take a look at the way iOS7 does this http://www.apple.com/ios/ios7/features/.
873
With a little HTML5 and JavaScript magic, the answer is yes:
http://jsfiddle.net/nallenscott/WtQjY/41/
Straw man:
<body>
<section>
<article>
<header></header>
<div class="blurheader"></div>
<!-- content-->
</article>
</section>
</body>
You'll need jQuery, Stackblur, and html2canvas.
Duplicate the content area and convert it to canvas.
Move the canvas to the header.
Sync the scroll of the content with the canvas in the header.
html2canvas creates the canvas, Stackblur creates a gaussian blur on the canvas, and the header element is layered over the .blurheader div to simulate translucency.
If you're comfortable with JavaScript, then this might be worth investigating further. It supports the latest versions of IE, Chrome, Safari, and Firefox and permits graceful fallback options for legacy browsers.
Cheers.
164
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
