Zepto plugin for dynamic applying CSS blur effect
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
package.json
zepto.blur.js
zepto.blur.min.js

README.md

Zepto CSS blur plugin

Apply CSS blur effect to element depending on scroll position.

Install

Simply include this code before your </body> tag:

<script type="text/javascript" src="zepto.min.js"></script>
<script type="text/javascript" src="zepto.blur.min.js"></script>

Usage and examples

Zepto-blur will apply CSS blur to element depending on scroll position and blur boundaries provided in options. It means that element will have blur decreased when its top gets to the upper bound and will have blur increased when its bottom gets to the lower bound. By default element is fully blured out.

// Smoothly unblur #foo when it gets to the 700px from top of the browser
// window and blur it back when it gets to the 200px from browser top
$('#foo').blur({edge: 700, bottomEdge: 200});

Options

  • edge — integer. Upper boundary. Remove blur when element gets here.
  • bottomEdge — integer. Lower boundary. Apply blur back here.
  • smoothness — integer. Default is 100. This is how far from boundaries blur will start changing from 0 to its max value.
  • max — integer. Maximum blur value.