jQuery Plugin For Camera Lens Blur Effect - Refocus

File Size: 3.53 KB
Views Total: 2608
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="refocus-text-container">
    <div class="t">
      <div class="tc">
        <h1 class="focus-out">I'm a 'Hero' header.</h1>

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.


Change log:


  • 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.