Django建站历程:(十六)particles 粒子背景插件

2019年5月17日 Jerry 5318 2021年1月17日

        particles 是一个很嗨的粒子插件,正好博客背景可能有点单调,于是网站加了这个插件。这个插件的源码在 GitHub  接下来说下插入的步骤

一、下载源码

      gayhub上下载后解压如下,打开 index.html 就能看到整个效果。

二、复制文件

         我们需要源代码中的三个文件就可以:style.css,particles.min.js 和 app.js。找到这三个文件放入网站资源目录下,修改两点:1、添加css样式; 2、添加js。主页base.html代码如下:

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    .........................

    <!-- 添加css样式 -->
    <link rel="stylesheet" media="screen" href="../../static/style.css">
  </head>
  <body>

    <!-- 添加js particles.js container -->
    <div id="particles-js"></div>

    <!-- scripts -->
    <script src="../../static/particles.min.js"></script>
    <script src="../../static/app.js"></script>

    .................................

  </body>
</html>

此时重新加载界面应该可以看到粒子背景已经生效~!

不过好像有点问题?这个怎么并没有做背景。对,还需要改一下这个布局。修改之前添加的style.css 文件,找到 #particles-js 添加一个position:fixed 的属性,最终如下:

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #b61924;
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: fixed;
}

修改完成保存后,按 ctrl+F5 强制刷新一下下界面就可以看到,问题完美解决:

三、定制专属的粒子背景

        默认的背景和粒子动画可能有些丑,你可以修改style.css 和 app.js 里面的相关参数来定制你自己的背景。

#particles-js{
  width: 100%;
  height: 100%;
  background-color: #A9E2F3;          //修改背景颜色
  background-image: url('');
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  position: fixed;
}

      具体的参数可以参考github源码介绍,借用网上别人总结的(转自  cnblog

键值                              作用
particles.number.value       粒子数量
particles.number.density.enable     是否配置粒子密度
particles.number.density.value_area     粒子区域散布密度大小
particles.color.value   粒子颜色
particles.shape.type    粒子的形状
particles.shape.stroke.width    粒子的宽度
particles.shape.stroke.color    粒子颜色
particles.shape.polygon.nb_slides   粒子的多边形边数
particles.shape.image.src      粒子的图片
particles.shape.image.width    图片宽度
particles.shape.image.height    图片高度
particles.opacity.value    粒子不透明度
particles.opacity.random    随机不透明度
particles.opacity.anim.enable   渐变动画
particles.opacity.anim.speed    渐变动画速度
particles.opacity.anim.opacity_min   渐变动画不透明度
particles.opacity.anim.sync 
particles.size.value    粒子大小
particles.size.random   粒子大小随机
particles.size.anim.enable  粒子渐变
particles.size.anim.speed   粒子渐变速度
particles.size.anim.size_min    
particles.size.anim.sync    
particles.line_linked.enable    是否使用连接线
particles.line_linked.distance  连接线距离
particles.line_linked.color 连接线颜色
particles.line_linked.opacity   连接线不透明度
particles.line_linked.width 连接线的宽度
particles.move.enable   粒子是否移动
particles.move.speed    粒子移动速度
particles.move.direction    粒子移动方向
particles.move.random   移动方向是否随机
particles.move.straight 
particles.move.out_mode 是否移动出屏幕
particles.move.bounce   是否跳动移动
particles.move.attract.enable   粒子之间吸引
particles.move.attract.rotateX  粒子之间吸引水平距离
particles.move.attract.rotateY  粒子之间吸引垂直距离
interactivity.detect_on 粒子之间互动探测
interactivity.events.onhover.enable 鼠标悬停效果
interactivity.events.onhover.mode   悬停样式
interactivity.events.onclick.enable 鼠标点击效果
interactivity.events.onclick.mode   鼠标点击效果模式
interactivity.events.resize 互动事件调整
interactivity.events.modes.grab.distance    粒子互动抓取距离
interactivity.events.modes.grab.line_linked.opacity 粒子互动抓取距离连线不透明度
interactivity.events.modes.bubble.distance  粒子抓取泡沫效果之间的距离
interactivity.events.modes.bubble.size  粒子抓取泡沫效果之间的大小
interactivity.events.modes.bubble.duration  粒子抓取泡沫效果之间的持续时间
interactivity.events.modes.repulse.distance 击退效果距离
interactivity.events.modes.repulse.duration 击退效果持续事件
interactivity.events.modes.push.particles_nb    粒子推出的数量


《django 建站历程系列文章》

(一)服务器的选取与环境准备

(二)创建第一个project和app

(三)创建并显示博客的主页导航栏

(四)django-allauth实现用户登陆

(五)django-allauth实现第三方登陆

(六)使用bootstrap3美化登陆界面

(七)添加用户签名字段

(八)自定义用户头像

(九)发布我的第一篇博客

(十)CKEditor的配置使用

(十一)ajax实现文章添加评论

(十二)signal自动消息通知

(十三)基于django-haystack的全文搜索

(十四)配置SSL证书实现网站HTTPS访问

(十五)免费开启七牛云CDN加速

(十六)particles 粒子背景插件

(十七)集成 xadmin2 后台管理

(十八)RestFramework 编写API

(十九)Nginx+uwsgi 部署 django

(二十)自定义网站404界面

(二一)jwt为API添加身份认证

jerrycoding 博客源码大公开


原创文章,转载请注明出处: https://jerrycoding.com/article/site_building_16

微信
jerry微信赞助
支付宝
jerry支付宝赞助

您尚未登录,暂时无法评论。请先 登录 或者 注册

0 人参与 | 0 条评论