jQuery Plugin For Camera Lens Blur Effect - Refocus
File Size: | 3.53 KB |
---|---|
Views Total: | 2596 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.