crossfade.js jquery图片滚动模糊插件-BFW插件库

crossfade.js jquery图片滚动模糊插件

crossfade.js jquery图片滚动模糊插件。当页面往下滚动的时候，crossfade.js 会让图片渐渐的模糊，就像是将要淡出的感觉；当页面往上滚动的时候，图片又会变的清晰。
crossfade.js 的原理是两张图片（一张清晰，一张模糊）交替显示，从而造成了淡入淡出的感觉。图片被放置在创建的 canvas 元素中，所以不支持 canvas 元素的浏览器无法显示，如 IE9 以下的浏览器。

参数

属性/方法	类型	默认值	说明
start	字符串	无	指定清晰图片的路径
end	字符串	无	指定模糊图片的路径
threshold	整数/浮点数	0.5	切换发生的时间，0 – 1 之间，越小越快发生
backgroundPosition	字符串	center center	背景位置，即图片位置

使用方法

第一步引入bfwone 加载依赖项jquery

第二步执行插件代码use

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.crossfade"], function() {
                $('.crossfade').crossfade({
                    start: '/bfwrepo/image/01.jpg',
                    end: '/bfwrepo/image/01-blur.jpg',
                    threshold: 0.1,
                    backgroundPosition: 'center center'
                });
            });
        });
    </script>
    <style>
        .banner {
            position: relative;
            height: 500px;
        }
        .crossfade p {
            position: absolute;
            top: 35%;
            z-index: 10;
            width: 100%;
            font-size: 4em;
            color: #fff;
            text-align: center;
            text-shadow: 2px 2px 0 #444;
        }
        .crossfade span {
            display: block;
            font-size: 0.5em;
            margin-top: 0.5em;
            text-shadow: 2px 2px 0 #444;
        }
        .crossfade em {
            font-family: "Microsoft Yahei";
            font-style: normal;
        }
    </style>
</head>
<body>
   

    <!-- Demo -->
    <div class="banner crossfade">
        <p class="js-parallax">
            crossfade.js <span>——jQuery<em>图片模糊插件</em></span>
        </p>
    </div>
     <h1>  慢慢滚动鼠标试试</h1>
  
    
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>


</body>
</html>