Небольшая javascript-бибилиотека, с помощью которой можно немного приукрасить свой сайт. Напоминает это старые добрые 90-е, когда модно было делать подобные js-скрипты с летающими звездочками, бабочками и прочей нечистью. Тогда это смотрелось круто, сейчас не вызывает ничего кроме раздражения. Однако частицы, которые создает particles.js весьма приятны для глаза и что самое главное — ненавязчивы. К тому же они интерактивные, что заставляет пользователя ненадолго «залипнуть» в этот интересный эффект.

Внимание, данная статья отредактирована для версии 2.0.0.

Официальная страница находится на домене французского разработчика и выглядит весьма минималистично: http://vincentgarreau.com/particles.js/

Там же есть ссылка на github.

Саму библиотеку можно скачать по ссылке.

Использовать библиотеку так же просто. В html добавляем скрипт, а так же вставляем контейнер с произвольным id. Порядок следования не принципиален.

<script src="путь_до_файла/particles.js"></script>

...

<div id="particles-js"></div>

И далее в любом вашем js-скрипте вставляем вызов функции particlesJS(). Первым параметром передаем id контейнера, а вторым — объект с настройками. Третьим параметром может быть callback-функция.

particlesJS('particles-js', {
  "particles": { /* настройка частиц */
    "number": {
      "value": 80, { /* количество частиц */
      "density": { /* плотность частиц */
        "enable": true, /* включено/выключено */
        "value_area": 800 /* площадь, по которой частицы рассеяны, чем больше число, тем меньше плотность */
      }
    },
    "color": { /* цвет */
      "value": "#ffffff"
    },
    "shape": {
      "type": "circle", /* форма: "circle", "edge", "triangle", "polygon", "star", "image" */
      "stroke": { /* обводка частиц */
        "width": 0, /* ширина обводки */
        "color": "#000000" /* цвет обводки */
      },
      "polygon": {
        "nb_sides": 5 /* количество сторон полигона (type: polygon), от 3 до 12 */
      },
      "image": { /* картинка, которая будет отображаться при выборе параметра формы type: image */
        "src": "img/github.svg",
        "width": 100, /* ширина картинки */
        "height": 100 /* высота картинки */
      }
    },
    "opacity": { /* прозрачность */
      "value": 0.5, /* значение прозрачности от 0.0 до 1.0 */
      "random": false, /* случайное значение для каждой частцы, но максимальным будет значение value */
      "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", /* направление: none (хаотично), top, top-right, right, bottom-right, bottom, bottom-left, left, top-left */
      "random": false, /* скорость движения для каждой частицы случайна */
      "straight": false, /* движение строго в указанном направлении */
      "out_mode": "out", /* out (частицы выходят за пределы экрана) или bounce (не выходят за пределы) */
      "bounce": false, /* частицы отталкиваются друг от друга или нет */
      "attract": { /* притяжение частиц друг к другу */
        "enable": false, /* включено/выключено */
        "rotateX": 600, /* притяжение по горизонтали */
        "rotateY": 1200 /* притяжение по вертикали */
      }
    }
  },
  "interactivity": { /* интерактивность */
    "detect_on": "canvas", /* реакция на событие мыши в окне (window) или в объекте (canvas) */
    "events": { /* события */
      "onhover": { /* по наведению */
        "enable": false, /* включено/выключено */
        "mode": "repulse" /* repulse (отталкивание частиц), grab (соединение связующих линий), bubble ('пузырение' частиц) */
      },
      "onclick": { /* по клику */
        "enable": true, /* включено/выключено */
        "mode": "push" /* push (добавление новых частиц), remove (удаление частиц), bubble (временное изменение прозрачности частиц на непрозрачное и увеличение их в размере), repulse (отталкивание частиц) */
      },
      "resize": true /* я не понял на что влияет этот параметр, экспериментируйте =) */
    },
    "modes": { /* параметры видов событий */
      "grab": { /* при onhover: mode: grab */
        "distance": 800, /* расстояние от мышки до частиц, при котором проявляются линии */
        "line_linked": {
          "opacity": 1 /* прозрачность линий */
        }
      },
      "bubble": { /* при onhover или onclick: mode: bubble */
        "distance": 800, /* расстояние от мышки до частиц, при котором происходит эффект */
        "size": 80, /* размер увеличения частиц */
        "duration": 2, /* продолжительность эффекта в секундах при клике */
        "opacity": 0.8, /* максимальная прозрачность */
        "speed": 3 /* скорость эффекта */
      },
      "repulse": { /* при onhover или onclick: mode: repulse */
        "distance": 400, /* расстояние отталкивания */
        "duration": 0.4 /* продолжительность отталкивания */
      },
      "push": { /* при onclick: mode: push */
        "particles_nb": 4 /* количество добавляемых частиц */
      },
      "remove": { /* при onclick: mode: remove */
        "particles_nb": 2 /* количество убираемых частиц */
      }
    }
  },
  "retina_detect": true /* поддержка ретина-дисплеев */
}, function(){ /* Вызываем callback-функцию */
  console.log('callback - particles.js загружен!');
});

Так же в версии скрипта 2.0.0 появилась возможность класть все настройки в json-файл. При этом в вызове можно указать его расположение.

/* particlesJS.load(@id-контейнера, @путь-до-файла-настроек, @callback-функция (опционально)); */
particlesJS.load('particles-js', 'assets/particles.json', function() {
  console.log('callback - particles.js загружен');
});

А это пример для старых версий скрипта (1.х.х). Приведен на всякий случай. Здесь нет третьего параметра.

particlesJS('particles-js', {
  particles: { // настройка частиц
    color: '#fff',
    shape: 'circle', // форма "круг", "квадрат" или "треугольник"
    opacity: 1,
    size: 4,
    size_random: true,
    nb: 150,
    line_linked: { // настройка линий
      enable_auto: true,
      distance: 100,
      color: '#fff',
      opacity: 1,
      width: 1,
      condensed_mode: {
        enable: false,
        rotateX: 600,
        rotateY: 600
      }
    },
    anim: {
      enable: true,
      speed: 1
    }
  },
  interactivity: {
    enable: true,
    mouse: {
      distance: 250
    },
    detect_on: 'canvas', // "canvas" или "window"
    mode: 'grab',
    line_linked: {
      opacity: .5
    },
    events: {
      onclick: {
        enable: true,
        mode: 'push', // "добавлять" или "убирать" (частицы)
        nb: 4
      }
    }
  },
  /* Поддержка ретина-дисплеев */
  retina_detect: true
});

Так же со всем этим можно поиграться в codepen.

Удачи в экспериментах 😉