超酷炫粒子背景插件

GitHub-教程-下载

1）先到github中下载particles.js-master.zip，下载下来的文件中有一个demo案例。

2）将demo文件中的particles.min.js、style.css、app.js、particles.json copy到我们项目里

用法：

第一步，在html中引入particles.min.js、style.css、app.js脚本文件，注意引用地址一定要确保无误

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超炫酷粒子背景</title><link rel="stylesheet" href="../css/style.css">
</head>
<body><script src="../lib/particles/particles.min.js"></script><script src="../js/app.js"></script>
</body>
</html>

第二步，修改我们引入的app.js文件，下面是我们copy进来时的内容，但由于我复制particles.json到项目里后，particles.json文件的存放目录发生的改变，所以需要修改particles.json的引用路径，即修改assets/particles.json

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {console.log('callback - particles.js config loaded');
});

改

/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
particlesJS.load('particles-js', 'particles.json', function() {console.log('callback - particles-js config loaded');
});

第三步，在html中定义一个<div id="particles-js"></div>作为particles.js的容器，然后就可以在它的后面定义我们自己的页面内容了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>超炫酷粒子背景</title><link rel="stylesheet" href="../css/style.css">
</head>
<body><!-- particles.js container --><div id="particles-js"></div><!-- 我们自己定义的内容 --><div></div><script src="../lib/particles/particles.min.js"></script><script src="../js/app.js"></script>
</body>
</html>

ok，完成这些步骤之后，我们就可以查看一下效果了。

我发现已经产生一定的效果了，但很明显，这并不是我们想要的效果，仅仅只是上面那部分产生效果而已，而我们的内容区并没有该效果。这是因为<div id="particles-js"></div>把我们定义的内容推下去了，所以我们的内容区没有该效果。所以还需要我们做一步修改。

第四步，修改style.css文件。打开引入的style.css文件，在#particles-js{}中添加position: fixed;样式

/* ---- particles.js container ---- */#particles-js{position: fixed;  /*添加这一行*/width: 100%;height: 100%;/*背景颜色*//*background-color: #b61924;*//*背景图片*/background: url("../image/9.png") !important;background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;
}

ok，再来查看一下效果，我们想要的效果出来了。这一次粒子背景真正作用在我们的内容中了

无意间发现particles.js会与一些ui框架的css样式发生冲突，所以需要再次修改particles.js插件的style.css文件。只保留下面这部分，其它的全部删除掉

style.css

/* ---- particles.js container ---- */#particles-js{position: fixed;  /*添加这一行*/width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;
}

提示：

particles粒子背景样式是可以自定义的，具体可以根据GitHub上的options选项在我们的particles.json文件中进行定义

超酷炫粒子背景插件—particles.js相关推荐

html js 循环提示框,纯js超酷消息提示框插件notice.js
notice.js是一款纯js超酷消息提示框插件.notice.js为纯js编写,没有任何依赖文件.通过它可以在页面上制作出漂亮的toast消息通知框效果.该js消息提示框插件的特点还有: 支持4中情 ...
粒子背景php,Particles.js实现粒子动态背景动画
这次给大家带来Particles.js实现粒子动态背景动画,Particles.js实现粒子动态背景动画的注意事项有哪些,下面就是实战案例,一起来看一下. 操作过程: 网上有基本流程,可以参考一下,不 ...
网页粒子背景插件 -Canvas-nest.js
地址:https://github.com/hustcc/canvas-nest.js 如果以上的js有问题,直接点击下面的下载! canvas-nest.js下载地址:https://cdn.boo ...
pr cpu100%_6款超酷炫又小众的PR插件据说都用过就是大神！
PR作为目前最主流的视频编辑软件拥有大量的配套插件模板等等我们也推送过PR大量常用的插件如转场.调色.特效等等但PR还许多超酷炫又小众的插件本期菌菌就为大家精选了6款插件帮助小伙伴更好的进 ...
HTML5七夕情人节表白网页_飘落蒲公英动画超酷炫的HTML5页面_ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册
HTML5七夕情人节表白网页❤飘落蒲公英动画超酷炫的HTML5页面❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码程序员表白源码抖音3D旋转相册 js烟花代码 ...
基于 Vue.js 2.0 酷炫自适应背景视频登录页面的设计
本文讲述如何实现拥有酷炫背景视频的登录页面,浏览器窗口随意拉伸,背景视频及前景登录组件均能完美适配,背景视频可始终铺满窗口,前景组件始终居中,视频的内容始终得到最大限度的保留,可以得到最好的视觉效果. ...
2021-11-10 动态粒子背景插件
动态粒子背景插件安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入 import VueParticles from 'vue-par ...
vue 动态粒子背景插件
动态粒子背景效果如下: vue-particles 是粒子背景插件如何使用? 安装插件 npm install vue-particles --save-dev 在main.js文件中全局引入: i ...
HTML5七夕情人节表白网页制作【飘落蒲公英动画超酷炫的HTML5页面】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

超酷炫粒子背景插件—particles.js

超酷炫粒子背景插件—particles.js相关推荐

最新文章

热门文章