(English version is down below.)
随机不规则三角彩条背景插件。
此项目在 https://github.com/taherm/hungryr/blob/master/public/assest/js/ribbons.js 基础上进行了许多改进，使得使用更加方便，且适用于更多场景。
示例网页 预览效果：http://practice.hollowman.ml/█%20canvas-ribbon.js/sample.html
观看在我的主页上的应用效果：https://hollowman6.github.io/
将下面的代码插入到 <body> 和 </body> 之间.(你可以手动配置其中参数)
<script type="text/javascript" src="canvas-ribbon.js"></script>
<script type="text/javascript">
new Ribbons({
// ribbon color HSL saturation amount
colorSaturation: "80%",
// ribbon color HSL brightness amount
colorBrightness: "50%",
// ribbon color opacity amount
colorAlpha: 0.6,
// how fast to cycle through colors in the HSL color space
colorCycleSpeed: 12,
// where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
verticalPosition: "center",
// how fast to get to the other side of the screen
horizontalSpeed: 1,
// how many ribbons to keep on screen at any given time
ribbonCount: 3,
// add stroke along with ribbon fill colors
strokeSize: 0,
// move ribbons vertically by a factor on page scroll
parallaxAmount: -0.5,
// add animation effect to each ribbon section over time
animateSections: true
});
</script>强烈建议在 </body>标签上方. 例如下面的代码结构:
<html>
<head>
...
</head>
<body>
...
...
<script type="text/javascript" src="canvas-ribbon.js"></script>
<script type="text/javascript">
new Ribbons({
...
...
});
</script>
</body>
</html>然后就完成了，打开网页即可看到效果!请注意不要将代码置于 <head> </head>里面.
A ribbon background drawn on canvas.
This project is derived from https://github.com/taherm/hungryr/blob/master/public/assest/js/ribbons.js . Many improvements have been made to make it more convenient to use and suitable for more scenes.
Sample Page real-time watching: http://practice.hollowman.ml/█%20canvas-ribbon.js/sample.html
Watch the effect on my Home Page: https://hollowman6.github.io/
Insert the code below between <body> and </body>.(You can manually specify the options)
<script src="canvas-ribbon.js"></script>
<script type="text/javascript">
new Ribbons({
// ribbon color HSL saturation amount
colorSaturation: "80%",
// ribbon color HSL brightness amount
colorBrightness: "50%",
// ribbon color opacity amount
colorAlpha: 0.6,
// how fast to cycle through colors in the HSL color space
colorCycleSpeed: 12,
// where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
verticalPosition: "center",
// how fast to get to the other side of the screen
horizontalSpeed: 1,
// how many ribbons to keep on screen at any given time
ribbonCount: 3,
// add stroke along with ribbon fill colors
strokeSize: 0,
// move ribbons vertically by a factor on page scroll
parallaxAmount: -0.5,
// add animation effect to each ribbon section over time
animateSections: true
});
</script>Strongly suggest to insert before the tag </body>, as the following:
<html>
<head>
...
</head>
<body>
...
...
<script src="canvas-ribbon.js"></script>
<script type="text/javascript">
new Ribbons({
...
...
});
</script>
</body>
</html>Then ok! Please do not add the code in the <head> </head>.