A ribbon background drawn on c
(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/
UsageInsert 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>.
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
