【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

【DeveMobile实例】d3.js 与Trianglify 制作SVG格式Low-Poly 特效

在升级了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 调色板库,让您快速启动和运行。

Github主页 演示站点

使用方法

导入相关文件:

<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主题主页的源代码。

评分:
当前平均分 0.00 (0%) - 0 个投票
3 条 评论
  1. 请问一下 这个标签如何修改!

    9年前 回复
  2. D3 的库好大

    9年前 回复
    • 就我这个而言倒有点像为了addclass 而使用jquery一样

      9年前 回复
发表评论