Blear
A simple JavaScript plugin to recreate the iOS7 style blurry header. Check out the demo at jaden.io/blear (works best in Safari).
Getting Started
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
options
radius
Type: integer
Default: 20
Pixel representation of the blur radius.
background
Type: string
Default: #ffffff
Hash color code for the element's background.
opacity
Type: decimal
Default: 0.6
Opacity value from 0.0 to 1.0.
wrapper
Type: string
Default: .blear-wrap
The CSS class for the wrapper element. Must be prefixed with .
blur
Type: string
Default: .blear
The CSS class for the blur element. Must be prefixed with .
License
MIT © Jaden Dessureault. See LICENSE for details.