Particles.js: Introduction

Il y a un grand nombre de minuscules particules se déplaçant et interagissant entre elles - ou interagissant avec vous - avec une attraction unique. Particles.js sera très utile si vous devez faire face à de grandes quantités de particules. Comme son nom l'indique, c'est une bibliothèque JavaScript qui vous aide à créer des systèmes de particules. De plus, il est léger, facile à utiliser et vous donne beaucoup de contrôle.

Ce tutoriel couvrira toutes les fonctionnalités de cette bibliothèque et vous aidera à démarrer. Ce tutoriel est la première partie de cette série et ne couvre que les bases.

Installation et utilisation

Tout d'abord, vous devez héberger la bibliothèque. Vous pouvez le télécharger sur votre propre serveur ou utiliser JSDeliver CDN comme je l'ai fait.

<code><br></code>

Vous devez également créer un élément DOM où les particules.js créeront des particules. Donnez-lui un cercle facile à identifier. À ce stade, votre fichier devrait ressembler à ceci:

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

J'utilise une valeur de 10 pour définir la taille du flocon de neige. Étant donné que les flocons de neige varient en taille, j'ai défini random à true. De cette façon, la taille du flocon de neige peut varier entre les limites zéro et maximales que nous spécifions. Pour désactiver ou supprimer toutes les lignes reliant ces particules, vous pouvez définir line_linked 'S enable à false.

pour déplacer les particules, vous devez définir l'attribut enable à true. Sans aucun autre réglage, les particules se déplaceront en désordre, tout comme elles sont dans l'espace. Vous pouvez définir l'orientation de ces particules en utilisant des valeurs de chaîne (telles que "bottom"). Même si le mouvement global des particules est à la baisse, ils doivent toujours se déplacer légèrement au hasard pour paraître naturels. Cela peut être fait en définissant straight à false. À ce stade, snowflakes.json contiendra le code suivant:

<code>{<br>  "particles": {<br>    "number": {<br>      "value": 100<br>    },<br>    "shape": {<br>      "type": "circle"<br>    },<br>    "size": {<br>      "value": 10,<br>      "random": true<br>    },<br>    "line_linked": {<br>      "enable": false<br>    },<br>    "move": {<br>      "enable": true,<br>      "speed": 2,<br>      "direction": "bottom",<br>      "straight": false<br>    }<br>  },<br>  "interactivity": {<br><br>  }<br>}<br></code>

Utilisez le code JSON ci-dessus, vous obtiendrez les résultats suivants:

Modifier le comportement interactif

Si vous survolez la démo ci-dessus, vous remarquerez que les lignes existent toujours, mais ne s'affichent temporairement que pendant le volant. Pour les supprimer complètement, vous pouvez définir la propriété onhover de l'événement enable sur false. Essayez de cliquer sur la démo ci-dessus et vous remarquerez que chaque clic génère quatre particules. C'est le comportement par défaut. Vous pouvez également modifier le nombre de particules en utilisant l'attribut push sous particles_nb. Dans ce cas, j'ai réglé ce numéro à 12.

Vous pouvez également utiliser l'option detect_on pour déterminer s'il faut détecter des événements sur une fenêtre ou sur une toile.

Ce qui suit est le code complet du fichier JSON:

<code><br></code>

Comme vous pouvez le voir, je n'ai pas à activer l'événement onclick spécifiquement. Il est activé par défaut. De même, je peux supprimer d'autres options telles que interactivity et "detect_on": "canvas" sous move. Je les garde pour que les débutants ne soient pas confus pour des questions telles que les particules ne se déplacent pas en ligne droite. "straight": false"

Vous pouvez essayer différentes valeurs pour modifier les flocons de neige dans le codep ci-dessus. Cliquez simplement sur l'onglet

js pour modifier JSON.

Réflexions finales

Particles.js est facile à démarrer. Si vous n'avez jamais utilisé de système de particules auparavant, cette bibliothèque vous aidera à démarrer immédiatement. Ce tutoriel n'est qu'une introduction de base à la bibliothèque. Dans les deux didacticiels suivants de cette série, je couvrirai plus en détail tous les aspects de la bibliothèque.

Si vous avez des questions sur ce tutoriel, veuillez me le faire savoir dans le forum.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!