Share
Beaucoup de petites particules se déplaçant et interagissant les unes avec les autres ou avec vous ont un certain attrait pour elles. Si vous vous trouvez dans une situation où vous devez travailler avec beaucoup de particules, Particles.js vous servira bien. Comme son nom l’indique, il s’agit d’une bibliothèque JavaScript qui peut vous aider à créer des systèmes de particules. De plus, il est léger, facile à utiliser et vous donne beaucoup de contrôle.
Dans ce tutoriel, je vais couvrir toutes les fonctionnalités de la bibliothèque et vous aider à démarrer. Ce tutoriel est la première partie de la série et ne couvrira que les bases.
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 moi..
Vous devez également créer un élément DOM où Particles.js créera les particules. Donnez-lui un peu facilement identifiable identifiant , pour référencer plus tard.
Maintenant, pour créer un système de base de particules avec des paramètres par défaut, il vous suffit d’une seule ligne de JavaScript pour initialiser la bibliothèque..
particules JS ();
Les particules sont par défaut blanches. Ils sont également reliés entre eux par de fines lignes blanches. Donc, si vous ne voyez rien pour le moment, changez simplement le fond d’arrière-plan. Voici mon CSS pour le style de la particule div:
# particules-js fond: bleu corbeau;
Essayez de cliquer quelque part dans la démo ci-dessous. Après chaque clic, Particles.js générera quatre nouvelles particules.
Même s'il n'a fallu que quatre lignes de code pour créer la démo précédente, le résultat final pourrait ne pas correspondre à ce que vous recherchez. Pour moi, les particules semblent être un peu plus grosses et densément tassées. Vous voulez peut-être que les particules aient une forme différente ou une taille aléatoire. Particles.js vous permet de définir toutes ces propriétés et bien d’autres encore en JSON, auxquelles vous pourrez vous référer lors de l’initialisation. La syntaxe générale pour appeler la fonction ressemblera à ceci:
particulesJS (dom-id, path-json, callback (facultatif));
Ici, dom-id est l'identifiant de l'élément où vous voulez que les particules apparaissent. path-json est le chemin du fichier JSON avec toutes les options de configuration, et rappeler est une fonction de rappel facultative. Au lieu d’un chemin, vous pouvez directement placer votre code JSON dans le deuxième paramètre..
Essayons de créer des chutes de neige en utilisant cette superbe bibliothèque. Au début, notre fonction ressemblera à:
Accentsconagua
particulesJS ("chutes de neige", "assets / snowflakes.json");J'ai supprimé la fonction de rappel et changé le DOM Id à un nom plus spécifique. Les flocons de neige auront principalement une forme sphérique. Ils tomberont vers le bas et auront une taille non uniforme. En outre, contrairement à notre première démo, ils ne seront pas connectés par des lignes.
Au début, notre snowflakes.json Le fichier aura le code suivant:
"particules": , "interactivité":
Toutes nos options de configuration liées aux propriétés physiques comme la forme, la taille et le mouvement iront à l'intérieur des particules. Toutes les options de configuration qui déterminent le comportement de l'interaction iront à l'intérieur l'interactivité.
Je règle le nombre de particules à 100. Cela dépend généralement de l'espace disponible. Comme indiqué précédemment, je vais également définir la forme pour encercler. À ce stade, votre fichier devrait ressembler à:
"particules": "nombre": "valeur": 100, "forme": "type": "cercle", "interactivité":
J'utilise une valeur de 10 pour définir la taille des flocons de neige. Puisque les flocons de neige varient en taille, je vais définir au hasard à vrai. De cette façon, les flocons de neige peuvent avoir une taille comprise entre zéro et la limite maximale spécifiée. Pour désactiver ou supprimer toutes les lignes qui lient ces particules, vous pouvez définir activer à faux pour line_linked.
Pour déplacer des particules, vous devrez définir la activer propriété à vrai. Sans autre paramètre, les particules bougeront au hasard, comme si elles étaient dans l'espace. Vous pouvez définir la direction de ces particules avec une valeur de chaîne telle que "bas". Même si le mouvement général des particules se fait vers le bas, elles doivent tout de même se déplacer un peu au hasard pour avoir l’air naturel. Ceci peut être réalisé en fixant tout droit à faux. À ce point, snowflakes.json aura le code suivant:
"particules": "nombre": "valeur": 100, "forme": "type": "cercle", "taille": "valeur": 10, "aléatoire": vrai, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivité":
Avec le code JSON ci-dessus, vous obtiendrez le résultat suivant:
Si vous survolez la démonstration ci-dessus, vous remarquerez que les lignes existent toujours mais ne s'affichent que temporairement pendant le survol. Pour les supprimer complètement, vous pouvez définir la activer propriété pour la En vol stationnaire événement à faux. Essayez de cliquer à l'intérieur de la démo ci-dessus et vous remarquerez que chaque clic génère quatre particules. Ceci est le comportement par défaut. Vous pouvez également modifier le nombre de particules à l'aide de la touche particules_nb propriété sous pousser. J'ai mis ce nombre à 12 dans ce cas.
Vous pouvez également déterminer s'il faut détecter les événements sur la fenêtre ou le canevas à l'aide du bouton detect_on option.
Voici le code complet du fichier JSON:
"particules": "nombre": "valeur": 100, "forme": "type": "cercle", "taille": "valeur": 10, "aléatoire": vrai, "line_linked": "enable": false, "move": "enable": true, "speed": 2, "direction": "bottom", "straight": false, "interactivité": "detect_on": "canvas", "événements": "onhover": "enable": false, "modes": "push": "particules_nb": 12
Comme vous pouvez le constater, je n'ai pas eu à activer spécifiquement le sur clic un événement. Il est activé par défaut. De même, je pourrais supprimer d'autres options telles que "detect_on": "canvas" sous l'interactivité et "straight": faux sous bouge toi. Je les ai gardés pour que les débutants ne se confondent pas avec des choses comme pourquoi les particules ne bougent pas en lignes droites.
Vous pouvez essayer différentes valeurs pour modifier les flocons de neige dans cette démonstration de CodePen..
Commencer avec Particles.js est facile. Si vous n'avez jamais travaillé avec des systèmes de particules auparavant, cette bibliothèque vous permettra de démarrer en un rien de temps. Ce tutoriel n'était qu'une introduction de base à la bibliothèque. Dans les deux prochains tutoriels de cette série, je traiterai de manière beaucoup plus détaillée de tous les aspects de cette bibliothèque..
Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
