Главная » JS

Начало работы с Particles.js в JS

На чтение 6 мин. Просмотров 20 Опубликовано

В этом Dev посте я помогу вам понять, использовать и внедрить Particles.js в ваше рабочее пространство. Particles.js — это отличная библиотека JavaScript, созданная Винсентом Гарро для придания пикантности внешнему виду вашей веб-страницы, поэтому прежде чем мы перейдем к реализации, давайте начнем с самого начала.

Содержание
  1. Работа с Particles.js
  2. Реализовать Particles.js
  3. Загрузка Particles.js
  4. VincentGarreau / particles.js
  5. Легкая библиотека JavaScript для создания частиц
  6. particles.js
  7. Легкая библиотека JavaScript для создания частиц.
  8. Создание нашего конфига
  9. Изучить наши опции
  10. Particles.number.value
  11. Particles.color.value
  12. Частицы.форма.тип
  13. Particles.opacity.value
  14. Частицы.размер.значение
  15. Particles.line_linked.enable
  16. Частицы.движение.направление
  17. ЗАКЛЮЧЕНИЕ

Работа с 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

Оцените статью
devanswers.ru
Добавить комментарий