В этом Dev посте я помогу вам понять, использовать и внедрить Particles.js в ваше рабочее пространство. Particles.js — это отличная библиотека JavaScript, созданная Винсентом Гарро для придания пикантности внешнему виду вашей веб-страницы, поэтому прежде чем мы перейдем к реализации, давайте начнем с самого начала.
- Работа с Particles.js
- Реализовать Particles.js
- Загрузка Particles.js
- VincentGarreau / particles.js
- Легкая библиотека JavaScript для создания частиц
- particles.js
- Легкая библиотека JavaScript для создания частиц.
- Создание нашего конфига
- Изучить наши опции
- Particles.number.value
- Particles.color.value
- Частицы.форма.тип
- Particles.opacity.value
- Частицы.размер.значение
- Particles.line_linked.enable
- Частицы.движение.направление
- ЗАКЛЮЧЕНИЕ
Работа с Particles.js
Прежде чем мы начнем что-то делать, я настоятельно рекомендую вам поработать с готовыми примерами на демонстрационном сайте Винсента Гарро particals.js здесь.
В этих демонстрациях показаны некоторые классные вещи, которые мы можем сделать с помощью particles.js, например, не только заставить частицы любого размера плавать вокруг нашей веб-страницы, но и добавить взаимодействие с мышью, чтобы оттолкнуть эти частицы при наведении или добавить новые частицы при нажатии. После того, как вы побаловались с этим, настало время.
Реализовать Particles.js
Прежде чем мы сможем приступить к работе с этой библиотекой, мы должны начать с внедрения ее в наше рабочее пространство. Имейте в виду, что это не единственный способ внедрения particles.js, мы можем использовать npm, Bower или множество других пакетов, чтобы заставить particles.js работать, но для этого блога Dev я просто покажу ручное внедрение.
Загрузка Particles.js
-
Вы можете загрузить последнюю версию zip-файла particals.js по ссылке ниже в правой части страницы под названием «Releases».
VincentGarreau / particles.js
Легкая библиотека JavaScript для создания частиц
particles.js
Легкая библиотека JavaScript для создания частиц.
Настраивайте, экспортируйте и делитесь своей конфигурацией particles.js на CodePen:
http://vincentgarreau.com/particles.js/Демонстрация на CodePen:
http://codepen.io/VincentGarreau/pen/pnlso
Загрузите particles.js и настройте частицы:
index.html
<div id="particles-js"></div> <script src="particles.js"></script>
Войдите в полноэкранный режим Выход из полноэкранного режима app.js
/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */ particlesJS.load('particles-js', 'assets/particles.json', function() { console.log('callback - particles.js config loaded'); });
Войдите в полноэкранный режим Выход из полноэкранного режима particles.json
{ "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":
…
Войти в полноэкранный режим Выход из полноэкранного режима Посмотреть на GitHub -
После загрузки распакуйте файл, скопируйте его в папку проекта и вставьте приведенный ниже код в начало html-файла.
<head>
<script src="/particles.js"></script>
</head>
<body>
</body>
Создание нашего конфига
Теперь я рекомендую создать файл particles.cfg.json и добавить в него основные настройки, представленные на GitHub Particles.js в разделе «Usage». Это добавит кучу настроек к нашим частицам, которые вам могут понадобиться, а могут и не понадобиться, но в любом случае это хорошая идея, чтобы разобраться с библиотекой.
После создания файла json-config нам следует добавить div частиц с соответствующей высотой и шириной, чтобы наша веб-страница знала, в какой области могут отображаться наши частицы, как показано ниже.
<head>
<script src="/particles.js"></script>
</head>
<body>
<div id='particle-div'></div>
</body>
|||||||||||||||||||||||||||||||||||||
Css
particle-div {
width: (number)px;
height: (number)px;
}
Теперь все готово к работе! …Ну почти, нам все еще нужно загрузить наши частицы на страницу. и в зависимости от того, как вы хотите, чтобы ваши частицы отображались, вы можете не захотеть, чтобы они отображались при начальной загрузке вашей страницы. Итак, вот основной синтаксис для загрузки частиц, но я оставлю остальное на ваше усмотрение, хотите ли вы, чтобы это происходило в функции «по щелчку» или только в начале загрузки веб-страницы.
//our particle div / our config file /
particlesJS.load('particle-div', 'particles.cfg.json')
ПОЗДРАВЛЯЕМ! Вы успешно внедрили particles.js,
Но это еще не все. Теперь пришло время
Изучить наши опции
Лучший способ получить четкое представление обо всех возможностях, которые у вас есть, когда речь идет о particles.js, — это зайти на основной GitHub, созданный Винсентом Гарро. Но поскольку это мой Dev-блог и я все еще хочу помочь вам научиться кое-чему, я собираюсь разделить наиболее популярные опции для particles.js, чтобы помочь вам лучше понять, как они работают и как их использовать. Обратите внимание, что вы должны добавлять/редактировать эти опции в файл particles.cfg.json, а не в файл CSS.
Particles.number.value
Принимает числовое значение и изменяет количество отрисованных частиц в зависимости от этого значения.
Particles.color.value
Принимает строковое значение цвета, RGB-объект, HSL-объект, array-hex, а также строку ‘random’, чтобы изменить все цвета частиц на это значение.
Частицы.форма.тип
Принимает строковое значение «edge»(квадрат), «triangle», «circle», «star», «polygon», или «image». и устанавливает частицам этот тип формы. также допускается использование массивов значений, ПРИМЕР([‘circle’, ‘star’, ‘polygon’]). Примечание (вы также можете добавить элементы ширины/высоты к вашей фигуре с помощью particles.shape.stroke.width/height/or even color.
Particles.opacity.value
Принимает числовое значение от 0 до 1 и изменяет непрозрачность на основе этого значения.
Частицы.размер.значение
Принимает числовое значение и изменяет размер частиц в зависимости от этого значения.
Particles.line_linked.enable
принимает булево значение и добавляет связанную линию между несколькими частицами рядом с ним.
Частицы.движение.направление
Принимает строку типа «top», «bottom-right» и т.д. для перемещения частиц в этом направлении. Аналогично существуют particles.move.random или particles.move.straight, которые указывают частицам двигаться случайным образом или по прямой линии. Пример прямой линии мы можем увидеть в демо-версии particles.js Nyan-Cat.
ЗАКЛЮЧЕНИЕ
Я искренне надеюсь, что эта статья облегчила вам навигацию, внедрение и использование particles.js в любом проекте, над которым вы работаете или не работаете. Понимание новых библиотек может быть немного сложным, но помните, что всегда есть люди, которые пытаются облегчить ваше обучение. СПАСИБО ЗА ЧТЕНИЕ!!!!
** Источники, которые я использовал, и которые вы тоже должны использовать!
Vincent Garreau particle.js веб-сайт/демо-версии
Geeks4Geeks как использовать particles.js
Видео о создании эффектов частиц
Причины, по которым не стоит использовать particles.js