Множество крошечных частиц, движущихся и взаимодействующих друг с другом или с вами, имеют определенную привлекательность для них. Если вы когда-нибудь окажетесь в ситуации, когда вам нужно работать с большим количеством частиц, Particles.js будет вам полезен. Как видно из названия, это библиотека JavaScript, которая может помочь вам создать системы частиц. Кроме того, он легкий, простой в использовании и дает вам много контроля.
В этом уроке я расскажу обо всех возможностях библиотеки и помогу вам начать работу. Этот урок является первой частью серии и будет охватывать только основы.
Установка и использование
Во-первых, вам нужно разместить библиотеку. Вы можете загрузить его на свой собственный сервер или использовать jsdeliver CDN, как я.
|
1
|
<script src=»//cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js»></script>
|
Вам также необходимо создать элемент DOM, в котором Particles.js будет создавать частицы. Дайте ему некоторый легко идентифицируемый id , чтобы ссылаться позже.
|
1
|
<div id=»particles-js»></div>
|
Теперь, чтобы создать базовую систему частиц с настройками по умолчанию, вам просто нужна единственная строка JavaScript для инициализации библиотеки.
|
1
|
particlesJS();
|
Частицы по умолчанию белые. Они также связаны тонкими белыми линиями. Так что, если вы сейчас ничего не видите, просто измените фон на что-то другое. Вот мой CSS для стилизации частиц div :
|
1
2
3
|
#particles-js {
background: cornflowerblue;
}
|
Попробуйте нажать где-нибудь внутри демо ниже. После каждого щелчка Particles.js будет генерировать еще четыре новых частицы.
Настройка пользовательских параметров
Несмотря на то, что для создания предыдущей демонстрации потребовалось всего четыре строки кода, конечный результат может оказаться не тем, что вы ищете. Мне кажется, что частицы немного больше по размеру и плотно упакованы. Может быть, вы хотите, чтобы частицы были другой формы или имели случайный размер. Particles.js позволяет вам установить все эти и многие другие свойства в JSON, на которые вы можете ссылаться во время инициализации. Общий синтаксис для вызова функции будет выглядеть так:
|
1
|
particlesJS(dom-id, path-json, callback (optional));
|
Здесь dom-id — это идентификатор элемента, в котором вы хотите, чтобы частицы появились. path-json — это путь к файлу JSON со всеми параметрами конфигурации, а callback — это дополнительная функция обратного вызова. Вместо пути вы можете непосредственно поместить свой код JSON во второй параметр.
Давайте попробуем создать снегопад с помощью этой потрясающей библиотеки. Сначала наша функция будет выглядеть так:
|
1
|
particlesJS(«snowfall», ‘assets/snowflakes.json’);
|
Я удалил функцию обратного вызова и изменил Id DOM на более конкретное имя. Снежинки в основном будут сферической формы. Они будут падать вниз и иметь неоднородный размер. Кроме того, в отличие от нашего первого демо, они не будут связаны линиями.
Перемещение частиц вокруг
В начале наш файл snowflakes.json будет иметь следующий код:
|
1
2
3
4
5
6
7
8
|
{
«particles»: {
},
«interactivity»: {
}
}
|
Все наши параметры конфигурации, связанные с физическими свойствами, такими как форма, размер и движение, будут находиться внутри particles . Все параметры конфигурации, которые определяют поведение взаимодействия, перейдут в interactivity .
Я устанавливаю количество частиц на 100. Как правило, это будет зависеть от доступного пространства. Как уже говорилось ранее, я также установлю форму круга. На этом этапе ваш файл должен выглядеть так:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
{
«particles»: {
«number»: {
«value»: 100
},
«shape»: {
«type»: «circle»
}
},
«interactivity»: {
}
}
|
Я использую значение 10, чтобы установить размер снежинок. Поскольку снежинки различаются по размеру, я установлю random на true Таким образом, снежинки могут иметь любой размер от нуля до максимального предела, который мы указали. Чтобы отключить или удалить все линии, которые связывают эти частицы, вы можете установить для параметра false значение false для line_linked .
Для перемещения частиц вам нужно установить для свойства enable значение true . Без каких-либо других настроек частицы будут двигаться беспорядочно, как будто они находятся в космосе. Вы можете установить направление этих частиц с помощью строкового значения, например, "bottom" . Несмотря на то, что общее движение частиц направлено вниз, они все равно должны двигаться немного случайным образом, чтобы выглядеть естественно. Это может быть достигнуто путем установки straight в false . На этом этапе snowflakes.json будет иметь следующий код:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
{
«particles»: {
«number»: {
«value»: 100
},
«shape»: {
«type»: «circle»
},
«size»: {
«value»: 10,
«random»: true
},
«line_linked»: {
«enable»: false
},
«move»: {
«enable»: true,
«speed»: 2,
«direction»: «bottom»,
«straight»: false
}
},
«interactivity»: {
}
}
|
С приведенным выше кодом JSON вы получите следующий результат:
Изменение поведения взаимодействия
Если вы наводите указатель мыши на демонстрацию выше, вы заметите, что линии все еще существуют, но только временно отображаются во время наведения. Чтобы полностью удалить их, можно установить для свойства enable для события onhover значение false . Попробуйте щелкнуть внутри демонстрационной версии выше, и вы заметите, что каждый щелчок генерирует четыре частицы. Это поведение по умолчанию. Вы также можете изменить количество частиц, используя свойство частиц_nb в push . Я установил это число на 12 в этом случае.
Вы также можете определить, нужно ли обнаруживать события в окне или на холсте, используя параметр detect_on .
Вот полный код для файла JSON:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
{
«particles»: {
«number»: {
«value»: 100
},
«shape»: {
«type»: «circle»
},
«size»: {
«value»: 10,
«random»: true
},
«line_linked»: {
«enable»: false
},
«move»: {
«enable»: true,
«speed»: 2,
«direction»: «bottom»,
«straight»: false
}
},
«interactivity»: {
«detect_on»: «canvas»,
«events»: {
«onhover»: {
«enable»: false
}
},
«modes»: {
«push»: {
«particles_nb»: 12
}
}
}
}
|
Как видите, мне не нужно было специально включать событие onclick . Он включен по умолчанию. Точно так же я мог бы удалить другие опции, такие как "detect_on": "canvas" в interactivity и "straight": false "detect_on": "canvas" "straight": false в move Я сохранил их так, чтобы начинающие не запутались в таких вещах, как, например, почему частицы не движутся по прямым линиям.
Вы можете попробовать разные значения, чтобы изменить снежинки в этой демонстрации CodePen .
Последние мысли
Начать работу с Particles.js легко. Если вы никогда раньше не работали с системами частиц, эта библиотека поможет вам быстро начать работу. Этот урок был только базовым введением в библиотеку. В следующих двух уроках этой серии я расскажу о всех аспектах этой библиотеки более подробно.
Если у вас есть какие-либо вопросы относительно этого урока, пожалуйста, дайте мне знать в комментариях.