particleground.js 超酷的jquery 粒子特效，鼠标跟随特效插件-BFW插件库

particleground.js 超酷的jquery 粒子特效，鼠标跟随特效插件

超酷的jquery 粒子特效，鼠标跟随特效插件

第一步引入bfwone 加载依赖项jquery

第二步执行插件

$('#your-element').particleground({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["jquery.particleground"], function() {
                $('#particles').particleground({
                    dotColor: '#5cbdaa', lineColor: '#5cbdaa'
                });
                $('.intro').css({
                    'margin-top': -($('.intro').height()/2)});
            });
        });
    </script>
    <style>
        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden}body{background:#16a085;font-family:montserrat,sans-serif;color:#fff;line-height:1.3;-webkit-font-smoothing:antialiased}#particles{width:100%;height:100%;overflow:hidden}.intro{position:absolute;left:0;top:50%;padding:0 20px;width:100%;text-align:center}h1{text-transform:uppercase;font-size:85px;font-weight:700;letter-spacing:.015em}h1::after{content:'';width:80px;display:block;background:#fff;height:10px;margin:30px auto;line-height:1.1}p{margin:0 0 30px;font-size:24px}.btn{display:inline-block;padding:15px 30px;border:2px solid #fff;text-transform:uppercase;letter-spacing:.015em;font-size:18px;font-weight:700;line-height:1;color:#fff;text-decoration:none;-webkit-transition:all .4s;-moz-transition:all .4s;-o-transition:all .4s;transition:all .4s}.btn:hover{color:#054;border-color:#054}@media only screen and (max-width:1000px){h1{font-size:70px}}@media only screen and (max-width:800px){h1{font-size:48px}h1::after{height:8px}}@media only screen and (max-width:568px){.intro{padding:0 10px}h1{font-size:30px}h1::after{height:6px}p{font-size:18px}.btn{font-size:16px}}@media only screen and (max-width:320px){h1{font-size:28px}h1::after{height:4px}}
    </style>
</head>
<body>
    <div id="particles" >
        <div class="intro">
            <h1>Particleground</h1>
            <p>
                A jQuery plugin for snazzy background particle systems
            </p>
        </div>
    </div>
</body>
</html>

默认值讲解

minSpeedX
0.1
maxSpeedX
0.7
minSpeedY
0.1
maxSpeedY
0.7
directionX
'center'可以“center”,“left”或'right”。“中心”意味着点将反弹的边缘画布。
directionY
'center'可以 'center', 'up' or 'down'. 'center' 意味着点将反弹的边缘画布。