jQuery Plugin For Camera Lens Blur Effect - Refocus

Refocus is an extremely lightweight jQuery plugin for add Camera Lens like 'blur in' and 'blur out' effect to html elements using CSS filter and transition properties.

Basic usage:

1. Include the jQuery refocus plugin's style sheet in the head section of the document.

<link href="refocus.css" rel="stylesheet">

2. Add the CSS classes focus-in and focus-out to target elements.

 

<div class="refocus" id="hero-header">
  <div class="refocus-img-bg"></div>
  <div class="refocus-img focus-in">
    <img src="bg.jpg">
  </div>
  <div class="refocus-text-container">
    <div class="t">
      <div class="tc">
        <h1 class="focus-out">I'm a 'Hero' header.</h1>
      </div>
    </div>
  </div>
</div>

3. Include the latest version of jQuery library and the jQuery refocus plugin's JS files at the end of the document.

<script src="jquery.min.js"></script>
<script src="jquery.refocus.js"></script>

4. Just call the function on the top element and you're done.

$('#hero-header').refocus();

Change log:

2015-10-14

• change class name

---

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