背景彩带动画插件ribbon.js

所属分类:其他-动画效果

 22609  296  查看评论 (1)
分享到微信朋友圈
X
背景彩带动画插件ribbon.js ie兼容10

使用方法

在<body>和</ body>之间插入以下代码。

<script src="dist/ribbon.min.js"></script>

在标签</ body>之前建议,如下所示:

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

请不要在<head> </ head>中添加代码。

配置

  • size:功能区的大小,默认值:90。

  • alpha:行的不透明度(0~1),默认值:0.6。

  • zIndex:z空间的索引,默认值:-1。


例:

<script type="text/javascript" size="150" alpha='0.3' zIndex="-2" src="dist/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:

this._canvas = document.createElement("canvas");
this._canvas.style["display"] = "block";
this._canvas.style["position"] = "fixed";
this._canvas.style["margin"] = "0";
this._canvas.style["padding"] = "0";
this._canvas.style["border"] = "0";
this._canvas.style["outline"] = "0";
this._canvas.style["left"] = "0";
this._canvas.style["top"] = "0";
this._canvas.style["width"] = "100%";
this._canvas.style["height"] = "100%";
this._canvas.style["z-index"] = "-1";
this._canvas.id = "bgCanvas";
this._canvas.style["background-color"]="#1f1f1f";
this._onResize();

通过设置这些参数可以控制背景彩带的宽度高度位置等, github原插件是用户点击随机出现, 这个省略了点击, 直接随机生成3条彩带

相关插件-动画效果

css3登陆界面

最近做的一个css3的登陆界面
  动画效果
 36850  332

CSS3按钮发光动画 绚丽多彩

CSS3按钮发光动画 绚丽多彩
  动画效果
 38074  340

纯CSS3实现打火机火焰动画

这又是一款很酷的纯CSS3动画特效,它是一个可以点燃的打火机,当你用鼠标滑过这只打火机时,打火机就会打开,然后开始出现火焰燃烧的动画特效。另外要说明的是,整个动画都是利用纯CSS3实现的
  动画效果
 29397  252

canvas管道流动动画

canvas小动画插件,代码注释全
  动画效果
 26225  245

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    曹懦懦?? 0
    2019/5/7 13:05:07
    可以分享一下嘛
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复