给你的网站首页添加一个飞鸟动画[第三方动画库]-星雨博客

温馨提示：本文最后更新于2024-09-15 21:00:17，某些文章具有时效性，若有错误或已失效，请联系星雨站长！

前言

今天偶然在鄢云峰大佬的博客首页看到一个飞鸟动画，感觉挺有意思的，于是去请教了一下大佬如何实现，他也是毫不保留地将实现方法和动画库分享给了我，在这里感谢鄢云峰大佬！实现方法就放博客里了，喜欢的自取！！

演示

部署教程（可能会被墙，如果无法访问可以直接通过本站提供的地址进行下载）

首先，这个动画依赖于一个第三方动画库，叫做 Vanta.js

1.打开 Vanta.js ，可以在网站的右侧Customize调节动画的一些基本参数（例如：颜色，数量，角度等等）

2.从获取代码中，找到两个js文件，点击下载到本地！

因为 vantajs 是依赖于 three.js 进行开发的，所以要实现这个飞鸟特效，需要引入两个 js 文件，分别是 three.js 和 vanta.birds.js。这两个 js 文件其实在 vantajs 官网就可以直接下载的，如果现在官网打不开，大家可以直接通过本站提供的地址进行下载。

3.接下来就是如何使用了！

复制以下代码，更改里面的飞鸟容器名称！

<script>
    VANTA.BIRDS({
      el: ".birds-box", // 飞鸟容器
      mouseControls: true,
      touchControls: false,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1,
      backgroundAlpha: 0.3,
      color1: 0x1a6138,
      color2: 0xf6f7f7
    })
  </script>

示例说明:
1. 动画特效需要一个元素容器，如上示例中的，宽高可以自己通过样式指定。
2. 引入两个 JS 文件 three.min.js 和 vanta.birds.min.js，注意先后顺序，必须先引入 three.min.js，因为vanta.birds.min.js 依赖于 three.min.js。
3. 调用 VANTA.BIRDS() 方法，创建 3D 飞鸟特效，参数可以照抄上面的示例，但是注意把 el 属性的值设置成为你自己的容器元素

下面是一个完整的使用示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
    }
    .birds-box {
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      background: url('./images/backimage3.jpeg') no-repeat center center / cover;
    }
  </style>
</head>
<body>
  <!-- 飞鸟特效的容器 -->
  <div class="birds-box"></div>

  <script src="./scripts/three.min.js"></script>
    <script src="./scripts/vanta.birds.min.js"></script>
  <script>
    VANTA.BIRDS({
      el: ".birds-box", // 飞鸟容器
      mouseControls: true,
      touchControls: false,
      gyroControls: false,
      minHeight: 200.00,
      minWidth: 200.00,
      scale: 1.00,
      scaleMobile: 1,
      backgroundAlpha: 0.3,
      color1: 0x1a6138,
      color2: 0xf6f7f7
    })
  </script>
</body>
</html>