网页粒子特效背景 Particleground.js 的简单引入

程序员文章站 2022-05-28 19:37:52

...

一、前言

一个简单的网页，布局、样式、交互 等都做得不错了，接下来就该来点网页背景特效了

1、Particleground.js 相关介绍与下载应用

Ⅰ、官方演示站点：http://www.jq22.com/yanshi566
Ⅱ、demo下载链接：https://github.com/jnicol/particleground/archive/master.zip
Ⅲ、git方式下载 demo：git clone https://github.com/jnicol/particleground.git
Ⅳ、参考文章：jQuery粒子系统插件Particleground

2、本文效果图

①粒子自动会运行联合
②鼠标移动所有粒子也会跟着移动

网页粒子特效背景 Particleground.js 的简单引入

二、代码

talk is cheap show me the code

可以修改的地方都有注释
官方 demo 可以删除的地方基本都删了
其他的地方最好不要动

1、代码结构

网页粒子特效背景 Particleground.js 的简单引入

2、index.html

<!doctype html>
<html lang="en" class="no-js">

    <head>
        <meta charset="UTF-8" />
        <title>linhongcun</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css" />
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <script type='text/javascript' src='js/jquery.particleground.js'></script>
        <script type='text/javascript' src='js/demo.js'></script>
    </head>

    <body>
        <!--背景-->
        <div id="particles">
            <!--内容-->
            <div id="intro">
                <h1>CSDN</h1>
                <p>https://blog.csdn.net/larger5</p>
            </div>
        </div>
    </body>

</html>

3、demo.js

document.addEventListener('DOMContentLoaded', function () {
  particleground(document.getElementById('particles'), {
    //粒子颜色
    dotColor: '#cbda5a',
    //线颜色
    lineColor: '#eda'
  });
  var intro = document.getElementById('intro');
  intro.style.marginTop = - intro.offsetHeight / 2 + 'px';
}, false);

4、style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
    /* 修改背景颜色 */
  background: #354; 
  font-family: 'Montserrat', sans-serif;
  /* 字体颜色 */
  color: #fff;
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
}

#particles {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#intro {
  position: absolute;
  left: 0;
  top: 50%;
  padding: 0 20px;
  width: 100%;
  text-align: center;
}
h1 {
  text-transform: uppercase;
  font-size: 85px;
  font-weight: 700;
  letter-spacing: 0.015em;
}
p {
  margin: 0 0 30px 0;
  font-size: 24px;
}

三、其他

以后有心情再更新实用特效插件