背景彩带动画插件ribbon.js

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

                 3269  33  查看评论 (1)
                分享到微?#25490;?#21451;圈
                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条彩带

                相关插件-动画效果

                很酷的jQuery文字切换动画

                文字切换动画,很简单很实用,适合做SLOGAN
                  动画效果
                 9966  48

                css3实现鲨鱼游动(酷)

                css3实现鲨鱼游动,效果非常酷哦。
                  动画效果
                 16944  120

                jquery3d图片旋转插件

                拖动鼠标即可看到图片旋3D转动画
                  动画效果
                 21839  132

                jQuery浮层跟随图片动画代码

                jQuery浮层跟随图片动画代码
                  动画效果
                 14332  99

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

                  曹懦懦?? 0
                  2019/5/7 13:05:07
                  可以分享一下嘛
                  回复
                取消回复
                  短信接口
                快3倍投资金计划

                                            码报图片2019 篮球竞彩混合过关投注 排列三走势图50018cp网 2019第123期内部透码 2011福利彩票走势图 贵州11选5开奖走势 福建省体育彩票论坛 足彩胜负彩18012期 西甲联赛历届冠军 中国体彩网七位数开奖 极速时时彩软件计划 明晚开什么生肖中特 江苏7位数开奖结果 怎样解释排列三大中小组选 彩票游戏平台