particleground.js 实现炫酷的粒子背景特效支持响应式
  • 分享到微信朋友圈
    X
立即下载 查看演示

particleground.js可以制作炫酷的粒子背景效果,生成的粒子可以向着鼠标移动，会进行运动联合。 particleground.js粒子可以支持响应式效果，适应任何html画布。

关键技术点

  • 页面调用jquery和particleground.js

  • 设置 canvas的zindex层级

  • 根据id初始化插件

  • 设置必要的属性

css代码

<style>
    html
    {
        -webkit-tap-highlight-color: transparent;
        height: 100%;
        overflow-x: hidden;
    }
    body
    {
        margin: 0px;
        height: 100%;
        overflow: hidden;
        background: url(images/bg.jpg) center center;
        background-size: cover;
    }
    canvas
    {
        z-index: -1;
        position: absolute;
    }
</style>

body 设置背景图 bg.jpg , canvas z-index: -1; 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。 如果为正数，则离用户更近，为负数则表示离用户更远。z-index: -1;可理解为就是在平面的下面一层

主要js代码与解析

页面调用jquery和particleground.js

<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/particleground.js"></script> 
<script type="text/javascript">
    $(document).ready(function () {
        //粒子背景特效
        $('body').particleground({
            dotColor: '#fff', // 设置点的颜色
            lineColor: '#fff' // 设置线条颜色
        });
    });
</script>

在这个示例中，body是粒子背景的容器，`dotColor`和`lineColor`定义了粒子和连接线的颜色 。

常用属性

  • minSpeedX: 0.1, //minSpeedX 粒子在 X 轴上的最小速度。

  • maxSpeedX: 0.7, //maxSpeedX: 粒子在 X 轴上的最大速度。

  • minSpeedY: 0.1, //minSpeedY 粒子在 Y 轴上的最小速度。

  • maxSpeedY: 0.7, //maxSpeedY: 粒子在 Y 轴上的最大速度。

  • directionX ‘center’ 可用值 ‘center’, ‘left’ 和’right’.

  • directionY ‘center’ 可用值’center’, ‘up’ 和 ‘down’.

  • density 10000 确定生成多少料子

  • dotColor ‘#666666’ 点的颜色

  • lineColor ‘#666666’ 线的颜色

  • particleRadius 7 粒子半径

  • Dot size 点的大小

  • lineWidth 1 线的宽度

  • curvedLines false 线是否弯曲

  • proximity 100 两个点间多远开始连

  • parallax true 视差效果

  • parallaxMultiplier 5 数量越低,视差效果更强

  • onInit function() {} 初始时调用函数

  • onDestroy function() {} 销毁时调用函数