refocus是一款可以实现背景图片镜头模糊特效的轻量级jQuery插件。该插件可以制作出类似摄像机镜头聚焦和不聚焦的效果。它使用的是CSS filter和transition属性来实现。
使用方法
使用该镜头模糊特效插件需要引入jQuery和refocus.js和refocus.css文件。
<link rel="stylesheet" href="css/refocus.css"> <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/refocus.js"></script>
HTML结构
在HTML结果中,要分别为聚焦和不聚焦的容器添加focus-in
和focus-out
class。
<div class="refocus" id="hero-header"> <div class="refocus-img-bg"></div> <!--带focus-in的容器中的内容将被模糊处理--> <div class="refocus-img focus-in"> <img src="bg.jpg"> </div> <!--带focus-out的容器中的内容不会变模糊--> <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>
CSS样式
引入refocus.css文件之后,如果你需要修改模糊的程度,可以修改refocus.css文件中下面代码的blur
值。
/*加大或减小模糊程度*/ #refocus-1 .focus-out, #refocus-1 .refocus-img-bg { filter: blur(15px); -webkit-filter: blur(15px); } /*下面的代码是修改显示的速度*/ #refocus-1 .focus-in, #refocus-1 .focus-out { transition: filter 2s ease 0.3s; -webkit-transition: -webkit-filter 2s ease 0.3s; }
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该镜头模糊特效插件。
$(window).load(function () { $('#refocus-1').refocus(); });