Particleground粒子背景特效插件-BFW插件库

Particleground粒子背景特效插件

使用方式：

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

第二步use插件

第三步配置参数

$('#id').particleground({
    dotColor: '#ff0000',//点的颜色
    lineColor: '#ff0000'//线的颜色
});

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <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(["Particleground"], function() {
                $('#particles').particleground({
                    dotColor: '#e8eaeb',
                    lineColor: '#e8eaeb'
                });
            });
        });
    </script>
    <style type="text/css" media="all">
       
        body {
            line-height: 1;
        }
        * {
            -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: 40%;
            padding: 0 20px;
            width: 100%;
            text-align: center;
        }
        h1 {
            text-transform: uppercase;
            font-size: 85px;
            font-weight: 700;
            letter-spacing: 0.015em;
        }
        p {
            margin: 0 0 30px 0;
            font-size: 24px;
        }

    </style>
</head>
<body>
    <!--背景-->
    <div id="particles">
        <!--内容-->
        <div id="intro">
            <h1>Particle</h1>
            <p>
                粒子背景特效插件
            </p>
        </div>
    </div>
</body>
</html>

Particleground粒子背景特效插件

网友评论0

html2canvas.js

onepage-scroll.js

jquery.ripples-min.js

jquery.parallax.js

jquery.fullPage.js

opencv.js

Particleground.js

particles.js