最近做了一个 PC 站首页 demo, 为了让页面不至于太死板, 在背景上给一些模块加入了这种粒子效果,
移动端 demo:https://lavendergirl.github.io/particles/mobile-index.html
PC 端 demo:https://lavendergirl.github.io/particles/index.html
线上 test:https://codepen.io/VincentGarreau/pen/pnlso
如果需要看源码实现可以在 GitHub 上看看: https://github.com/lavenderGirl/particles
具体实现:
- <!-- 当然在使用的时候得先引用 particles.js -->
- <div class="particles container">
- <div id="particles-js"></div>
- </div>
- <div class="particles overlay"></div>
- <!-- js 这样去配置就行了 -->
- particlesJS('particles-js',{
- "particles": {
- "number": {
- "value": 100,
- "density": {
- "enable": true,
- "value_area": 800
- }
- },
- "color": {
- "value": "#3a7ee4"
- },
- "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": false,
- "anim": {
- "enable": false,
- "speed": 1,
- "opacity_min": 0.1,
- "sync": false
- }
- },
- "size": {
- "value": 5,
- "random": false,
- "anim": {
- "enable": false,
- "speed": 40,
- "size_min": 0.1,
- "sync": false
- }
- },
- "line_linked": {
- "enable": true,
- "distance": 300,
- "color": "#3a7ee4",
- "opacity": 0.4,
- "width": 1
- },
- "move": {
- "enable": true,
- "speed": 3,
- "direction": "none",
- "random": false,
- "straight": false,
- "out_mode": "out",
- "attract": {
- "enable": false,
- "rotateX": 600,
- "rotateY": 1200
- }
- }
- },
- "interactivity": {
- "detect_on": "canvas",
- "events": {
- "onhover": {
- "enable": true,
- "mode": "repulse"
- },
- "onclick": {
- "enable": true,
- "mode": "push"
- },
- "resize": true
- },
- "modes": {
- "grab": {
- "distance": 400,
- "line_linked": {
- "opacity": 1
- }
- },
- "bubble": {
- "distance": 400,
- "size": 40,
- "duration": 2,
- "opacity": 8,
- "speed": 3
- },
- "repulse": {
- "distance": 200
- },
- "push": {
- "particles_nb": 4
- },
- "remove": {
- "particles_nb": 2
- }
- }
- },
- "retina_detect": true,
- "config_demo": {
- "hide_card": false,
- "background_color": "#b61924",
- "background_image": "",
- "background_position": "50% 50%",
- "background_repeat": "no-repeat",
- "background_size": "cover"
- }
- });
配置可参考: https://www.cnblogs.com/wangyihong/p/8618305.html
当然也可直接看 https://github.com/VincentGarreau/particles.js
通过不同的配置可以实现很多不一样的效果哦. 动手去试试吧.
没做这个之前, 都不知道这叫什么, 只知道有时候会在一些网站上看到, 也没太注意, 真正想要用的时候, 不知道去搜什么, 所在在找的过程中也花了一点时间, 如果你也需要这种效果, 那么这篇文章适合你看看哦.
不是每一次努力都有收获, 但是, 每一次收获都必须努力. 加油.
来源: http://www.jianshu.com/p/db79c6a2809d