【趣分享】酷炫的js背景插件canvas-nest.js

今天看到一个站点首页,背景很酷炫,鼠标移动,线条聚集,现代科技感十足,很适合技术站点使用,于是百度了一下,找找相关的库,有的是纯css3写的粒子特效(我勒个去),还有的是用JS去写的canvas画图实现。

这个帖子就是分享一个JS酷炫背景插件。

DEMO在JFinal学院的静态HTML首页上,我加了。

(抱歉,暂时是个很简陋的静态页,正在整合资源,开发中。。。)

image.png

预览效果DEMO地址:http://www.jfinalxueyuan.com

插件地址:https://github.com/hustcc/canvas-nest.js

使用方法:

在<body>标签结尾处加入一行JS引入就可以了:

<script  color="255,255,255" opacity='0.5' zIndex="-1" count="100" src="assets/js/canvas-nest.js" type="text/javascript"></script>

其中color是颜色值,opacity是透明度,zIndex是现在层级,count是线条数量。


请关注JFinal学院的微信公众号(jfinalxueyuan) 上图也有二维码 可以扫码关注;

回复分享课 获得更多分享课JFinal视频教程

本图文课程对应视频教程-网盘地址:
链接: https://pan.baidu.com/s/1mX4qU01ckJfbhzPvoM_i9A 
提取码: h7yn 




评论区

苦力强

2018-11-10 17:32

我有这个做的项目早都有了 2013的时候

欲风217

2018-11-14 14:04

https://github.com/VincentGarreau/particles.js/

这个项目的 start 17351,貌似也不错哦。

另外,jfinal 学院首页粒子中心和鼠标指针有偏移。