Skip to content
This repository was archived by the owner on May 26, 2020. It is now read-only.

Updated README with window #38

Open
Josep1992 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Updated README with window #38

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17aa42e
Updated README with window
Josep1992 Feb 4, 2019
b70b6e3
Code format
Jun 8, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 22 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
# particles.js

[![Github file size](https://img.shields.io/github/size/marcbruederlin/particles.js/dist/particles.min.js.svg)](https://github.com/marcbruederlin/particles.js/blob/master/dist/particles.min.js)
[![Travis](https://img.shields.io/travis/marcbruederlin/particles.js.svg)](https://travis-ci.org/marcbruederlin/particles.js)
[![David](https://img.shields.io/david/marcbruederlin/particles.js.svg)](https://david-dm.org/marcbruederlin/particles.js)
Expand All @@ -22,15 +21,14 @@ There are several ways to install particles.js:
Include the minified JS in your HTML (right before the closing body tag).
```html
<body>
…
<script src="path/to/particles.min.js"></script>
</body>
```

Add a canvas element to your markup (it should be the last element)

```html
<body>
…
<canvas class="background"></canvas>
<script src="path/to/particles.min.js"></script>
</body>
Expand All @@ -54,34 +52,35 @@ body {
```

Initialize the plugin on the `window.onload` event.

```js
window.onload = function() {
Particles.init({
selector: '.background'
// Particles is bound to the Window Object = window.Particles
window.onload = () => {
this.Particles.init({
selector: '.background'
});
};
```

## Options
Option | Type | Default | Description
------ | ------------- | ------------- | -----------
`selector` | string | - | *Required:* The CSS selector of your canvas element
`maxParticles` | integer | `100` | *Optional:* Maximum amount of particles
`sizeVariations` | integer | `3` | *Optional:* Amount of size variations
`speed` | integer | `0.5` | *Optional:* Movement speed of the particles
`color` | string or string[] | `#000000` | *Optional:* Color(s) of the particles and connecting lines
`minDistance` | integer | `120` | *Optional:* Distance in `px` for connecting lines
`connectParticles` | boolean | `false` | *Optional:* `true`/`false` if connecting lines should be drawn or not
`responsive` | array | `null` | *Optional:* Array of objects containing breakpoints and options
| Option | Type | Default | Description |
| ------------------ | ------------------ | --------- | --------------------------------------------------------------------- |
| `selector` | string | - | _Required:_ The CSS selector of your canvas element |
| `maxParticles` | integer | `100` | _Optional:_ Maximum amount of particles |
| `sizeVariations` | integer | `3` | _Optional:_ Amount of size variations |
| `speed` | integer | `0.5` | _Optional:_ Movement speed of the particles |
| `color` | string or string[] | `#000000` | _Optional:_ Color(s) of the particles and connecting lines |
| `minDistance` | integer | `120` | _Optional:_ Distance in `px` for connecting lines |
| `connectParticles` | boolean | `false` | _Optional:_ `true`/`false` if connecting lines should be drawn or not |
| `responsive` | array | `null` | _Optional:_ Array of objects containing breakpoints and options |

Example how to use the [responsive option](https://marcbruederlin.github.io/particles.js/#responsive-option).

## Methods
Method | Description
------ | -----------
`pauseAnimation` | Pauses/stops the particle animation
`resumeAnimation` | Continues the particle animation
`destroy` | Destroys the plugin
| Method | Description |
| ----------------- | ----------------------------------- |
| `pauseAnimation` | Pauses/stops the particle animation |
| `resumeAnimation` | Continues the particle animation |
| `destroy` | Destroys the plugin |

Example how to use the [public methods](https://marcbruederlin.github.io/particles.js/#use-methods).

Expand All @@ -93,6 +92,7 @@ See [various examples](https://marcbruederlin.github.io/particles.js/#examples)

## Build
To compile the distribution files by yourself, make sure that you have node.js and gulp installed, then:

- Clone the repository: `https://github.com/marcbruederlin/particles.js.git`
- Change in the project directory: `cd particles.js`
- Install the dependencies: `npm install`
Expand Down