particleground, 用于时髦背景粒子系统的jQuery插件

分享于 

5分钟阅读

GitHub

  繁體 雙語
A jQuery plugin for snazzy background particle systems
  • 源代码名称:particleground
  • 源代码网址:http://www.github.com/jnicol/particleground
  • particleground源代码文档
  • particleground源代码下载
  • Git URL:
    git://www.github.com/jnicol/particleground.git
    Git Clone代码到本地:
    git clone http://www.github.com/jnicol/particleground
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/jnicol/particleground
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    重要这里存储库不再维护。 如果有人想继续使用 Particleground,我建议创建你自己的fork。 感谢contrinuted对这个项目的支持。

    Particleground

    用于时髦 background 粒子系统的JavaScript插件。 包括可选视差效果,由鼠标在移动设备上的桌面设备和陀螺仪上控制。 在任何支持 HTML5 Canvas的浏览器中工作。

    请参见演示文稿

    用法

    
    particleground(document.getElementById('your-element');
    
    
    
    

    jQuery:

    
    $('#your-element').particleground();
    
    
    
    

    命令行选项

    可以通过将选项对象传递给构造函数来设置选项。

    下面是设置粒子系统点和线条颜色的示例:

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

    jQuery:

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

    以下是选项的完整列表,以及它们的默认值:

    minSpeedX

     
    0.1
    
    
    
     

    maxSpeedX

     
    0.7
    
    
    
     

    minSpeedY

     
    0.1
    
    
    
     

    maxSpeedY

     
    0.7
    
    
    
     

    directionX

     
    'center'
    
    
    
     

    可以是 'center''left' 或者 'right' 之一。 'center' 表示点将从画布的边缘反弹。

    directionY

     
    'center'
    
    
    
     

    可以是 'center''up' 或者 'down' 之一。 'center' 表示点将从画布的边缘反弹。

    密度

     
    10000
    
    
    
     

    确定将生成多少个粒子: 每n 个像素每个像素。

    dotColor

     
    '#666666'
    
    
    
     

    lineColor

     
    '#666666'
    
    
    
     

    particleRadius

     
    7
    
    
    
     

    网点大小

    线宽

     
    1
    
    
    
     

    curvedLines

     
    false
    
    
    
     

    接近

     
    100
    
    
    
     

    两个点之间的距离,以像素为单位,以像素表示。

    视差

     
    true
    
    
    
     

    parallaxMultiplier

     
    5
    
    
    
     

    数字越低,视差效果就越 extreme。

     
    function() {}
    
    
    
     

    Particleground初始化后执行的回调。

    onDestroy

     
    function() {}
    
    
    
     

    销毁Particleground后执行的回调。

    方法

    Particleground公开了可以用于与Particleground实例 e.g. 交互的public 方法

    
    var pg = particleground(document.getElementById('your-element');
    
    
    pg.pause(); 
    
    
    
    

    jQuery:

    
    $('#your-element').particlegound('pause');
    
    
    
    

    暂停( )

    暂停粒子系统。

    开始( )

    如果以前暂停粒子系统,则重新启动粒子系统。

    ( )

    从你的元素中删除插件。

    Credits

    Particleground由 http://requestlab.fr/http://disruptivebydesign.com/激发。

    贡献者

    Horia Dragomir: 删除了jQuery相关性和改进的渲染性能


    相关文章