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

最新推荐文章于 2024-08-10 07:19:17 发布

IT小村

最新推荐文章于 2024-08-10 07:19:17 发布

阅读量2w

点赞数 9

文章标签：特效粒子特效 js

本文链接：https://blog.csdn.net/larger5/article/details/79785627

版权

一、前言

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

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、本文效果图

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

这里写图片描述

二、代码

talk is cheap show me the code

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

1、代码结构

这里写图片描述

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;
}