使用particles.js美化网页背景

参数配置

GitHub项目地址:https://github.com/VincentGarreau/particles.js

共需要两个文件:particles.min.jsapp.js,这两个文件均可从项目地址中获取,需要修改的是app.js文件。

particles.min.js也可以使用CDN引入而无需下载:
https://cdn.jsdelivr.net/npm/[email protected]/particles.min.js

进入官方提供的预览网址:https://vincentgarreau.com/particles.js/

在右侧工具栏调整自己想要的粒子效果,最后选择下载json文件。

将json文件中的的参数全部复制,替换app.js中原有的默认参数。

app.js样例:

particlesJS('particles-js',
  
  {
    "particles": {
      "number": {
        "value": 230,
        "density": {
          "enable": true,
          "value_area": 800
        }
      },
      "color": {
        "value": "#b0e0e6"
      },
      "shape": {
        "type": "circle",
        "stroke": {
          "width": 0,
          "color": "#000000"
        },
        "polygon": {
          "nb_sides": 5
        },
        "image": {
          "src": "img/github.svg",
          "width": 100,
          "height": 100
        }
      },
      "opacity": {
        "value": 0.5,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 1,
          "opacity_min": 0.1,
          "sync": false
        }
      },
      "size": {
        "value": 10,
        "random": true,
        "anim": {
          "enable": false,
          "speed": 40,
          "size_min": 0.1,
          "sync": false
        }
      },
      "line_linked": {
        "enable": false,
        "distance": 500,
        "color": "#ffffff",
        "opacity": 0.4,
        "width": 2
      },
      "move": {
        "enable": true,
        "speed": 1.8,
        "direction": "bottom",
        "random": false,
        "straight": false,
        "out_mode": "out",
        "bounce": false,
        "attract": {
          "enable": false,
          "rotateX": 600,
          "rotateY": 1200
        }
      }
    },
    "interactivity": {
      "detect_on": "canvas",
      "events": {
        "onhover": {
          "enable": true,
          "mode": "bubble"
        },
        "onclick": {
          "enable": true,
          "mode": "repulse"
        },
        "resize": true
      },
      "modes": {
        "grab": {
          "distance": 400,
          "line_linked": {
            "opacity": 0.5
          }
        },
        "bubble": {
          "distance": 400,
          "size": 4,
          "duration": 0.3,
          "opacity": 1,
          "speed": 3
        },
        "repulse": {
          "distance": 200,
          "duration": 0.4
        },
        "push": {
          "particles_nb": 4
        },
        "remove": {
          "particles_nb": 2
        }
      }
    },
    "retina_detect": true
  }

);

引入

将这两个文件上传到网站目录中合适的位置,最后在<body>标签中插入以下语句,注意最后两行particles.min.jsapp.js的文件路径,需自行修改。

<!-- particles.js style -->
<style type="text/css">
  #particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
</style>

<!-- particles.js container -->
<div id="particles-js"></div>

<!-- particles.js scripts -->
<script src="js/particles.min.js"></script>
<script src="js/app.js"></script>

一切都完成之后就可以看到效果啦。

暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
颜文字
上一篇
下一篇