jQuery Plugin To Blur Any Html Elements - vague.js

jQuery Vague is a fancy and cross-browser jQuery plugin that takes advantage of SVG filters to blur any html elements of your page.

How to use it:

1. Create a html container with a background image

<figure class="container"></figure>

2. Include jQuery library and jQuery Vague plugin on the page

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="Vague.js"></script> 

3. Call the plugin with options

<script>
var vague = $(".container").Vague({intensity:30});
vague.blur();
</script>

4. Optionally you can create a button to toggle the blur effect

<span href="#" class="btn">Toggle Blur</span>
<script>
$(".btn").on("click",$.proxy(vague.toggleblur,vague));
</script>

 

---

This awesome jQuery plugin is developed by GianlucaGuarini. For more Advanced Usages, please check the demo page or visit the official website.