跨浏览器磨砂效果背景图片模糊特效

当前位置:主页 > jQuery库 > 图片效果 > 跨浏览器磨砂效果背景图片模糊特效
跨浏览器磨砂效果背景图片模糊特效
分享:

    插件介绍

    background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件。它会抽取图片的主要色彩,并通过SVG过滤器来制作模糊效果。并且它还通过velocity.js来提供额外的图片切换时淡入淡出的效果。

    浏览器兼容性

    浏览器兼容性
    时间:2015-07-04
    阅读:
简要教程

background-blur是一款非常炫酷的跨浏览器磨砂效果背景图片模糊特效jQuery插件。它会抽取图片的主要色彩,并通过SVG过滤器来制作模糊效果。并且它还通过velocity.js来提供额外的图片切换时淡入淡出的效果。

该插件在支持SVG的浏览器中使用SVG过滤器来制作图片模糊效果(IE浏览器除外)。在IE浏览器中,插件会创建一个<img>标签并在CSS中使用IE特有的模糊滤镜来模糊图片。

安装

可以通过bower来安装该背景图片模糊特效插件。

bower install background-blur                
              

或者下载压缩包,在页面中引入下面的文件。

<script src="jquery.min.js"></script>
<script src="background-blur.min.js"></script>                
              

使用方法

HTML结构

该背景图片模糊特效的基本HTML结构如下:

<div class="container">
  <div class="content">
  ...
  </div>
</div>         
              
CSS样式

需要为该背景图片模糊特效提供一些基本的CSS样式:

.container {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.container .bg-blur-overlay {
  z-index: -1;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4wOCIvPjxzdG9wIG9mZnNldD0iNTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDgiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC45Ii8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(46%, rgba(0, 0, 0, 0.08)), color-stop(59%, rgba(0, 0, 0, 0.08)), color-stop(100%, rgba(0, 0, 0, 0.9)));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.08) 46%, rgba(0, 0, 0, 0.08) 59%, rgba(0, 0, 0, 0.9) 100%);
}

.container .bg-blur {
  z-index: -2;
  opacity: 0;
  position: absolute;
  width: 100%;
  min-height: 100%;
  height: auto;
  display: block;
  top: 0;
  left: 0;
}

.container .content { z-index: 1; }
              
初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该插件。

$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
});                
              

也可以通过下面的方法来创建一张淡入的模糊图片效果。

$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});                
              

也可以插件一张淡入的模糊图片,然后切换到另一张图片。

// 初始化牧户效果
$('#some-element').backgroundBlur({
    imageURL : 'http://URL-of-the-image',
    blurAmount : 50,
    imageClass : 'bg-blur'
    duration: 1000, // If the image needs to be faded in, how long that should take
    endOpacity : 1 // Specify the final opacity that the image will have
});

//切换图片
$('#some-element').backgroundBlur('http://URL-of-another-image');                
              
结合Velocity.js来使用

如果你使用Velocity.js动画库,那么该插件会自动检测它是否存在,这会提供淡入淡出效果的动画性能,特别是在移动手机设备中。如果没有检测到Velocity,插件会使用jQUery的animate()方法来制作淡入淡出效果。

浏览器兼容

  • Chrome
  • Firefox
  • Safari and Safari Mobile (iOS)
  • IE6, IE7, IE9, IE10, IE11
  • Android browsers