如何使用js，css，html5在smartprogress.do中创建动画背景

Question

我需要开发与cool site具有相同背景动画的网站，所以我需要一些建议，我需要使用哪些工具来创建类似的东西，或者是否有像这个动画一样的开源插件？

UPD：谢谢那些回答我的人。我问的是那些在我所指的网站背景中混乱地移动的小颗粒。对于那些感兴趣的人来说，particle.js是绘制这种动画的js库。

Answer 1

我也查看了源代码，我认为他们使用canvas来绘制动画背景，然后我认为它们有覆盖。

编辑：确认后，他们使用画布来提供视差效果。

查看smartprogress.do/js/graphBg.js

他们使用它来绘制：

  <canvas class="graph-bg__graph" width="1366" height="50" style="z-index: 1; -webkit-transform: translate3d(0px, 0px, 0px);"></canvas>

也看看JSON。我认为它用于顶点数据：https://smartprogress.do/graph-data/edges.json并将edges.json更改为points.json。我不能发布超过2个链接

Answer 2

有几种方法可以做到：

• GIF或其他动态影像作为背景（必须是高分辨率，因此负载时间更长;可用的选项很少）
• 背景视频（另一个大文件;更多选项;不像bg一样）
• 使用CSS过渡框架滚动背景（非常大的文件，旧浏览器提供静止图像）
• 类似的JavaScript实现（更容易实现，但类似的问题）

我查看了您的示例网站的来源，无法确定他们正在使用的内容。它可能是一个CSS过渡。但是这些想法应该让你开始。