雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

JS粒子特效jQuery插件particleground

2024-09-02 15

Particleground 粒子系统是一个jQuery插件,相当时髦富有科技感的背景。很多区块链公司网站都使用该特效。Particleground包括一个可选的视差效应控制鼠标在桌面设备和移动设备上的陀螺仪。它适用于任何浏览器支持HTML5画布。效果见下图或在线演示:


在线演示 demo下载

使用方法:

首先引用jQuery和Particleground插件

<script type="text/javascript" src="/Static/Script/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/Static/Script/jquery.particleground.min.js"></script>

Html代码

<div id="particles">
    <h1>Particleground示例</h1>
</div>

JS初始化运行插件

<script>$('#particles').particleground({
            dotColor: '#457F8B',//点的颜色
            lineColor: '#457F8B'//线的颜色
            //max: 60,
            //num: 100,
            //speed: 3
});</script>

如果要将它作为背景平铺页面上,可以使用如下样式达到效果

<div id="particles"></div>
<style>
#particles {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    background: #0E1F3B;
}
</style>
更新于:13天前
赞一波!

文章评论

全部评论