网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
使用纯JavaScript和HTML5画布API构建,可以创建一个以动画节点和连接线为背景的粒子系统。
1.在html页面加载插件文件。
<script src="js/nodes.js"></script>
2.创建一个HTML画布元素来放置粒子系统。
<canvas id="nodes"></canvas>
3.创建新的NodesJs对象以在画布上生成默认粒子系统。
var nodesjs = new NodesJs({
// options here
});
4.使用以下参数自定义粒子系统。
var nodesjs = new NodesJs({
// container ID
id: 'nodes',
// width
width: window.innerWidth,
// height
height: window.innerHeight,
// background transition options
backgroundFrom: [10, 25, 100],
backgroundTo: [25, 50, 150],
backgroundDuration: 4000,
// the number of particles
number: window.hasOwnProperty('orientation') ? 30: 100,
// animation speed
speed: 20
});
转载请注明来源:html5+JavaScript动画节点和连接线背景特效
本文永久链接地址:https://www.moyouyouw.cn/code/816.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论