A simple JavaScript plugin to

A simple JavaScript plugin to recreate the iOS7 style blurry header. Check out the demo at jaden.io/blear (works best in Safari).

Reference either blear.js or blear.min.js just before the end of the body tag.

<script src="blear.js"></script> </body> </html>

Create a new instance of Blear and pass in the element as the first parameter.

<script> var header = document.getElementById('main-header'); var blear = new Blear(header); </script> API Blear(element, [options]) element

Type: Node object

Type: integer
Default: 20

Pixel representation of the blur radius.

Type: string
Default: #ffffff

Hash color code for the element's background.

Type: decimal
Default: 0.6

Opacity value from 0.0 to 1.0.

Type: string
Default: .blear-wrap

The CSS class for the wrapper element. Must be prefixed with .

Type: string
Default: .blear

The CSS class for the blur element. Must be prefixed with .

MIT © Jaden Dessureault. See LICENSE for details.