超赞的随机动态彩带背景动画-ribbon.js插件

这个是随机动态不同角度折痕变化颜色的彩带网页背景特效，加在自己网站博客中，别有一番特色，适合作为网页浅色背景的页面使用，可以参考本站效果背景效果。实际动态效果，可参考本站首页效果

使用方法

在页面引入ribbon.js这个文件即可使用，在<body>和</ body>之间插入以下代码。建议在标签</ body>之前，尽量不要在<head> </ head>中添加代码。如下所示：

<html>
<head>
    ...
</head>
<body>
    ...
    ...
    ...
    <script src="dist/ribbon.js"></script>
</body>
</html>

个性化配置：

size：功能区的大小，默认值：90。
alpha：行的不透明度（0~1），默认值：0.6。
zIndex：z空间的索引，默认值：-1。

例：

<script type="text/javascript" size="150" alpha='0.3' zIndex="-2" src="ribbon.min.js"></script>

将脚本节点上的配置设置为属性。所有配置都有默认值，您可以选择设置其中任何一个，或者不设置任何配置。

js源码中参数设置1：

this._options = {
    // 色带HSL饱和度
    colorSaturation: "80%",
    // 色带HSL亮度量
    colorBrightness: "60%",
    // 带状颜色不透明度
    colorAlpha: 0.65,
    // 在HSL颜色空间中循环显示颜色的速度有多快
    colorCycleSpeed: 6,
    // 从哪一侧开始Y轴 (top|min, middle|center, bottom|max, random)
    verticalPosition: "center",
    // 到达屏幕另一侧的速度有多快
    horizontalSpeed: 200,
    // 在任何给定时间，屏幕上会保留多少条带
    ribbonCount: 3,
    // 添加笔划以及色带填充颜色
    strokeSize: 0,
    // 通过页面滚动上的因子垂直移动色带
    parallaxAmount: -0.5,
    // 随着时间的推移，为每个功能区添加动画效果
    animateSections: true
};

参数设置2：

去掉倒数第二行，可以改变默认的黑色背景变成白色，

通过设置这些参数可以控制背景彩带的宽度高度位置等，这个省略了点击，直接随机生成3条彩带，

欢迎加入程序猿大家庭(QQ群)~~~

感谢您的来访，获取更多精彩文章请收藏本站。

版权声明本站名称：程序猿
本站永久网址：https://www.oove.cn
云盘：https://pan.alsvip.com
网站说明：
1 本站资源大多存储在云盘，如有链接失效，请留言反馈站长更新！
2 本站各种资源及源码软件大部分为网络搜集而来，如有侵犯版权的，请邮件与我们联系，本站将予以改正。
3 由于网络资源有极快的复制性，付费资源一经购买，不以任何形式退款，购买过程中如有付费资源失效，请及时联系站长。

THE END