得知途径

B3log提供了两套博客系统,一个是用Java开发的,叫做Solo,我也是在网上搜索Java博客系统时发现了它,之后才了解了B3log;还有一个是用Go语言开发的,叫做Pipe.其中Solo是需要自己在自己的云主机上搭建的,而Pipe可以选择自己搭建,也可以使用B3log搭建好的服务.

Pipe的主页,背景使用了一个非常酷炫的粒子特效,而且还能和鼠标指针互动。



我最近正好在学习网页制作,就想着如果能把这个背景放到我自己的网页上就好了。一般这种效果不会是网页开发者自己写的,而是去调用一些别人写好的js或者css文件来完成。我在Pipe的主页点击右键,选择检查,界面变成下图



可以看到果然有一个叫做particles-js-canvas-el,那么基本可以确定这个效果就是由particles.js实现的。去百度搜索particles.js,果然找到了相关的资料。

基本配置

官网下载paritcles.js的文件包,解压之后里面有一个demo文件夹。我们将该文件夹复制出来,并对该文件夹中的文件进行修改即可。

该文件夹中有一个index.html文件,我们打开它,找到其中的

<!-- particles.js container -->

<div  id="particles-js"></div>

这个id为particles-js的div就是用于放置粒子特效背景的。我们在这个div的后面放上自己的内容。很多网上其他的教程就到此为止了,但是这样的话是无法将粒子特效特效设置为背景的,而是将后面的内容推了下去,如图:



一些稍微好一点的教程会告诉你,需要找到css文件夹中的style.css文件,继续修改。他会说找到#particles-js,在里面添加上一行

position: absolute;

这样的确可以让粒子效果变成背景,如图



不过依然存在两个问题

  1. 我使用bootstrap做网页,这样做会遮挡一些bootstrap元素(可以看看和上图的对比)
  2. 当网页较长时,下拉后没有背景效果,如图

网上也的确有人提出了后面的这个问题,参见该网页中用户youkie的评论,我在使用的时候同样遇到了这个问题,有意思的是作者回答了几乎所有其他的问题,就是没有回答这个问题。我尝试调整了style.css文件中background-repeat属性,不过没用。

突然我灵光一现,我们可以换一种思路啊,既然不能让它延长,那就让它像一些网站的导航栏一样固定,不也一样能解决问题。于是我将position: absolute;改成了position: fixed;,果然实现了我想要的效果。

之后我又去网上搜索怎么样让我的bootstrap元素不被遮挡。有说设置z-index的,没用。最后的解决方案也同样是修改position属性,在css文件中将想要不被遮挡的元素的position设置为relative即可。

高级配置

默认的背景颜色是红色,太刺眼,我们要修改的话同样是在style.css里面的#particles-js找到background-color属性进行修改。

还有一些具体配置粒子数量、图形、大小、速度一些细节内容。

https://www.cnblogs.com/wangyihong/p/8618305.html 里有翻译成中文的配置文件详解,我就不在此展开了。

成果展示

我使用particles.js制作的网页链接为:https://aopstudio.github.io

使用particles.js实现网页背景粒子特效的更多相关文章

  1. JS实现网页背景旋转缩放轮播效果

    实现效果:效果预览 css代码: .switch_images { display: inline-block; margin:; padding:; width: 100%; height: 100 ...

  2. canvas-nest.js 设置网页背景

    只需要在HTML,body中加如这行代码就可以实现效果,可以在color中修改颜色 <!DOCTYPE html> <html> <head> <meta c ...

  3. 在网页中使用particlesjs实现背景的动态粒子特效

    先上一张效果图: 这种动态的背景特效,制作起来其实非常简单. 使用了particles.js particles.js可以从github网站下载到最新的源码,网址是 https://github.co ...

  4. 弄个知乎的粒子动态背景_实践particles.js

    好久没登录知乎,发现他们的登录页面粒子动态效果蛮炫的,查一下代码用了Particles.js基于Canvas画布创建粒子颗粒效果. 上图 上图:   感觉有比格,就照着弄了一个,玩玩.   githu ...

  5. js实现粒子特效,particles.js的使用

    今天偶然看到了一个比较炫酷的js网页.是粒子特效的,就试着用了用.一下是步骤,方便以后查看使用. 1.在网站下载源码https://github.com/VincentGarreau/particle ...

  6. Three.js粒子特效,shader渲染初探(一篇非常详细的介绍)

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  7. 基于three.js实现特定Div容器的粒子特效封装

    本文基于three.js实现特定容器的粒子特效效果,支持用户传入特定的dom对象以及粒子颜色. 效果图 移入库 <script src="jquery-1.11.3.min.js&qu ...

  8. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  9. Particles.js基于Canvas画布创建粒子原子颗粒效果

    文章目录 使用方法 自定义参数 相关链接 Particles.js是一款基于HTML5 Canvas画布的轻量级粒子动画插件,可以设置粒子的形状.旋转.分布.颜色等属性,还可以动态添加粒子,效果非常炫 ...

随机推荐

  1. Mysql学习总结(43)——MySQL主从复制详细配置

    环境 操作系统:CentOS-6.6-x86_64-bin-DVD1.iso MySQL版本:mysql-5.6.26.tar.gz 主节点IP:192.168.1.205 主机名:edu-mysql ...

  2. windows10开启内置ubuntu系统,使用xshell连接

    windows安装配置ubuntu系统内置子系统 官方文档:https://docs.microsoft.com/zh-cn/windows/wsl/about https://www.jianshu ...

  3. hdu 4431 绝对值之和最小公式

    /* 普通的二分不好写,反正我没写出来,这题核心需要求出绝对值最小公式 sum=|x+10|+|x+5|+|x+1|+|x-2|+|x-6|;sumx[1]=-10;sumx[2]=-15;sumx[ ...

  4. Codeforces Gym100495 B、D、E、F、K

    http://codeforces.com/gym/100495 K题 草地的面积减去相交的面积,计算几何,垃圾题,避免不必要的计算损失精度(能约分的约分) 卡了老子一个星期了 再加前几天的一道题 这 ...

  5. python 时间四舍五入

    假设时间格式为 YYYYMMDDhhmm , 比如201508010001 代表2015年8月1日0点01分. 现在有需求,要求一个start 和一个 end 变量的字符串 都是这种格式的时间. 需要 ...

  6. 彻底来理解下hashmap吧

    1.什么叫hashmap? 答:首先是一种map集合,其次呢,它是一种利用hash表来存储的数据结构.所以叫hashmap. 2.hashmap的特点是什么? 答:hashmap的特点是key值不能重 ...

  7. apache.commons.lang.StringUtils 使用心得

    原文:http://blog.csdn.net/ye_sheng/article/details/48101901?ref=myread 在Java中我们用的最多的类应该就是String了.对于Str ...

  8. HDU 5407 CRB and Candies(LCM +最大素因子求逆元)

    [题目链接]pid=5407">click here~~ [题目大意]求LCM(Cn0,Cn1,Cn2....Cnn)%MOD 的值 [思路]来图更直观: 这个究竟是怎样推出的.说实话 ...

  9. cocos2d-x+lua开发模式下编辑器的选择

    原本打算直接用CocosIDE的,毕竟是官方出品,并且支持Android远程调试,windows下的调试也非常方便,调试的信息也非常全,智能提示也不错.好了,一切看上去非常完美,可是它有一个致命缺陷, ...

  10. 华为OJ2011-最长公共子串

    一.题目描述 描述: 计算两个字符串的最大公共子串(Longest Common Substring)的长度,字符区分大小写. 输入: 输入两个字符串 输出: 输出一个整数 样例输入: asdfas ...