在升级了DeveMobile 主题的时候Jeff 也顺便将主题主页进行了更新,访问主页你会看到首屏的Low-Poly 背景(每次刷新都不同),这个效果就是利用了d3.js 与Trianglify 制作的。
所需元素介绍
d3.js
自维基百科:D3.js(D3或Data-Driven Documents)是一个用动态图形显示数据的JavaScript库,一个数据可视化的工具。兼容W3C标准,并且利用广泛实现的SVG,JavaScript,和CSS标准。
Trianglify
Trianglify 是一个能够生成五颜六色的三角形图案的 JavaScript 库,可以用来作为 SVG 图像和 CSS 背景。它的灵感来自于 Btmills 的 Geopattern,并使用 d3.js 建立多边形的 SVG 图形和使用 SVG 过滤器进行渲染。它还包括 colorbrewer 调色板库,让您快速启动和运行。
使用方法
导入相关文件:
<script src="http://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script> |
绑定元素,如body标签:
var t = new Trianglify(); var pattern = t.generate(document.body.clientWidth, document.body.clientHeight); document.body.setAttribute('style', 'background-image: '+pattern.dataUrl); |
更多例子可以查看Github主页或者DeveMobile主题主页的源代码。
请问一下 这个标签如何修改!
D3 的库好大
就我这个而言倒有点像为了addclass 而使用jquery一样