## particles.js

### Лёгкая библиотека на JavaScript для создания частиц.

------------------------------
### `Demo / Generator`

<a href="http://vincentgarreau.com/particles.js/" target="_blank"><img src="http://vincentgarreau.com/particles.js/assets/img/github-screen.jpg" alt="генератор particles.js" /></a>

Настройте, экспортируйте и поделитесь своей конфигурацией particles.js на CodePen: <br />
http://vincentgarreau.com/particles.js/

Пример на CodePen: <br />
http://codepen.io/VincentGarreau/pen/pnlso

-------------------------------
### `Использование`

Загрузите particles.js и настройте частицы:

**index.html**
```html
<div id="particles-js"></div>

<script src="particles.js"></script>
```**app.js**
```javascript
/* particlesJS.load(@dom-id, @path-json, @callback (необязательный)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - конфигурация particles.js загружена');
});
```
**particles.json**
```javascript
{
  "particles": {
    "number": {
      "value": 80,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      "direction": "none",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": false,
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}
```### Опцииkey | тип опции / примечания | пример
  --- | --------- | -----
  `particles.number.value` | число | `40`
  `particles.number.density.enable` | логическое значение | `true` / `false` 
  `particles.number.density.value_area` | число | `800`
  `particles.color.value` | HEX (строка) <br /> RGB (объект) <br /> HSL (объект) <br /> массив выбора (HEX) <br /> случайное (строка) | `"#b61924"` <br /> `{r:182, g:25, b:36}` <br />  `{h:356, s:76, l:41}` <br /> `["#b61924", "#333333", "999999"]` <br /> `"random"`
  `particles.shape.type` | строка <br /> массив выбора | `"circle"` <br /> `"edge"` <br /> `"triangle"` <br /> `"polygon"` <br /> `"star"` <br /> `"image"` <br /> `["circle", "triangle", "image"]`
  `particles.shape.stroke.width` | число | `2`
  `particles.shape.stroke.color` | HEX (строка) | `"#222222"`
  `particles.shape.polygon.nb_sides` | число | `5`
  `particles.shape.image.src` | путь к файлу <br /> svg/png/gif/jpg | `"assets/img/yop.svg"` <br /> `"http://mywebsite.com/assets/img/yop.png"`
  `particles.shape.image.width` | число <br />(для соотношения сторон) | `100`
  `particles.shape.image.height` | число <br />(для соотношения сторон) | `100`
  `particles.opacity.value` | число (0 до 1) | `0.75`
  `particles.opacity.random` | логическое значение | `true` / `false` 
  `particles.opacity.anim.enable` | логическое значение | `true` / `false` 
  `particles.opacity.anim.speed` | число | `3`
  `particles.opacity.anim.opacity_min` | число (0 до 1) | `0.25`
  `particles.opacity.anim.sync` | логическое значение | `true` / `false`
  `particles.size.value` | число | `20`
  `particles.size.random` | логическое значение | `true` / `false` 
  `particles.size.anim.enable` | логическое значение | `true` / `false` 
  `particles.size.anim.speed` | число | `3`
  `particles.size.anim.size_min` | число | `0.25`
  `particles.size.anim.sync` | логическое значение | `true` / `false`
  `particles.line_linked.enable` | логическое значение | `true` / `false`
  `particles.line_linked.distance` | число | `150`
  `particles.line_linked.````markdown
color` | HEX (строка) | `#ffffff`
  `particles.line_linked.opacity` | число (0 до 1) | `0.5`
  `particles.line_linked.width` | число | `1.5`
  `particles.move.enable` | логическое значение | `true` / `false`
  `particles.move.speed` | число | `4`
  `particles.move.direction` | строка | `"none"`<br/>`"top"`<br/>`"top-right"`<br/>`"right"`<br/>`"bottom-right"`<br/>`"bottom"`<br/>`"bottom-left"`<br/>`"left"`<br/>`"top-left"`

`random` | логический тип данных | `true` / `false`
`particles.move.straight` | логический тип данных | `true` / `false`
`particles.move.out_mode` | строковый тип данных<br/>(за пределами холста) | `"out"`<br/>`"bounce"`
`particles.move.bounce` | логический тип данных<br/>(между частицами) | `true` / `false`
`particles.move.attract.enable` | логический тип данных | `true` / `false`
`particles.move.attract.rotateX` | число | `3000`
`particles.move.attract.rotateY` | число | `1500`
`interactivity.detect_on` | строковый тип данных | `"canvas", "window"`
`interactivity.events.onhover.enable` | логический тип данных | `true` / `false`
`interactivity.events.onhover.mode` | строковый тип данных<br/>выбор массива | `"grab"`<br/>`"bubble"`<br/>`"repulse"`<br/>`["grab", "bubble"]`
`interactivity.events.onclick.enable` | логический тип данных | `true` / `false`
`interactivity.events.onclick.mode` | строковый тип данных<br/>выбор массива | `"push"`<br/>`"remove"`<br/>`"bubble"`<br/>`"repulse"`<br/>`["push", "repulse"]`
`interactivity.events.resize` | логический тип данных | `true` / `false`
`interactivity.events.modes.grab.distance` | число | `100`
`interactivity.events.modes.grab.line_linked.opacity` | число (от 0 до 1) | `0.75`
`interactivity.events.modes.bubble.distance` | число | `100`
`interactivity.events.modes.bubble.size` | число | `40`
`interactivity.events.modes.bubble.duration` | число<br/>(в секундах) | `0.4`
`interactivity.events.modes.repulse.distance` | число | `200`
``````markdown
duration` | число <br /> (в секундах) | `1.2`
`interactivity.events.modes.push.particles_nb` | число | `4`
`interactivity.events.modes.push.particles_nb` | число | `4`
`retina_detect` | логический тип данных | `true` / `false`
```-------------------------------
```### Установка пакетов

#### **NPM**
https://www.npmjs.com/package/particles.js
```bash
npm install particles.js
```

#### **Bower**
```bash
bower install particles.js --save
```

#### **Rails Assets**
```ruby
gem 'rails-assets-particles.js'
```

#### **Meteor**
https://atmospherejs.com/newswim/particles
```bash
meteor add newswim:particles
```

-------------------------------

### Хостинг / CDN

**Пожалуйста, используйте этот хост или свой собственный для загрузки particles.js в ваших проектах**

http://www.jsdelivr.com/#!particles.js