当前位置: 首页 » 经验分享 » wordpress主题添加nest背景特效

wordpress主题添加nest背景特效

qilong 经验分享 2016-12-29 9157 0

背景的几何线条是采用的nest效果,一个基于html5 canvas绘制的网页背景效果,非常赞!来自github的开源项目

特性

  • 不依赖任何框架或者内库,比如不依赖jQuery,使用原生的javascript。
  • 非常小,只有1.66kb,如果开启gzip,可以更小。
  • 非常容易实现,配置简单,即使你不是web开发者,也能简单搞定。

使用

使用非常简单,感觉都没有必要写这一节内容。

将下面的代码插入到 <body> 和 </body> 之间.

1
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

强烈建议在 </body>标签上方. 例如下面的代码结构:

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
...
</head>
<body>
...
...
...
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
</body>
</html>

请注意不要将代码置于 <head> </head>里面.

然后就完成了,打开网页即可看到效果!

配置和配置项

  • color: 线条颜色, 默认: '0,0,0' ;三个数字分别为(R,G,B),注意用,分割
  • opacity: 线条透明度(0~1), 默认: 0.5
  • count: 线条的总数量, 默认: 150
  • zIndex: 背景的z-index属性,css属性用于控制所在层的位置, 默认: -1

Example:

1
<script type="text/javascript" color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

这些属性配置在引用js的script标签中,作为它的一个属性值。所有的配置项都有默认值,如果你不知道怎么设置,可以先不设置这些配置项,就使用默认值看看效果也可以的。

不足

CPU占用过高

可以看看你现在的Cpu使用率,我的一般在30%左右,占用挺高的。

优化方法是减少线条的总数量,但是效果会有点折扣,我使用的是默认的配置。

与next集成

我的方式比较暴力一点,github上面有位兄弟有更加优雅的方式。

修改_layout.swig

打开next/layout/_layout.swig
</body>之前添加如下代码

1
2
3
{% if theme.canvas_nest %}
<script type="text/javascript" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>
{% endif %}

修改主题配置文件

打开/next/_config.yml,添加以下代码

1
2
3
4
5
6
7
# --------------------------------------------------------------
# background settings
# --------------------------------------------------------------
# add canvas-nest effect
# see detail from https://github.com/hustcc/canvas-nest.js
canvas_nest: true

 

至此,大功告成,运行hexo cleanhexo g hexo s之后就可以看到效果了。

关键字:
分享:
飞之悦网络优化

发表评论

*


 
QQ在线咨询
售前咨询热线
18363518998
售后咨询热线
17564506450