Faire une animation en arrière-plan avec particle.js

Posted By: gdcPosted On:

Particle.js permet d’avoir des fonds animé assez sympathique(voir la vidéo ci-dessous), la doc n’étant pas très explicite, j’ai décidé de faire un article pour vous montrer la procédure.

Avant de commencer il vous faudra atom et wsl.

J’ouvre atom.

atom

Je crée un nouveau projet .

Je vais vous montrer la méthode du barbu (en sachant qu’on peut le faire sans toute les commande Linux, mais ça vous permettra d’apprendre quelque commande Linux et a vous servir wsl).

Cette méthode consiste ouvrir terminus en appuyant sur plus.

cd Documents
mkdir particle
cd particle
touch index.html
mkdir css
mkdir js
ls -a

Dans l’ordre :
D’abord il faut change de répertoire pour aller dans mes documents.
Je crée un dossier particle.
Ensuite un répertoire.
Un fichier index.html.
Un dossier CSS.
Par la suite un dossier JS.
Et enfin un ls pour vérifier que c’est bien créer.

Installation de nodejs npm et particle.js

Pour utiliser particule.js il me faut Node.js et NPM
alors oui je pourrais simplement mettre le CDN, mais imaginons que le projet s’arrête ou que CDN ferme, tous vos effets disparaisse (c’est serait ballot).

Au préalable, si ce n’est pas déjà fait, on va installer nodejs et npm (ça vous sera utile pour sass electronjs etc…).

sudo apt-get install nodejs
sudo apt-get install npm

Une fois installé, on va mettre particle.js dans notre projet. Si on se rend sur son github; on voit qu’il faut taper cette commande.

npm install particles.js

Il va créer diffèrent dossier et fichier.

arborescence

Il crée un dossier node_modules à l’intérieur on a la demo.

Les fichiers nécessaires sont:
app.js
style.css
particle.js
je vais les copier 

cp node_modules/particles.js/demo/js/app.js js
cp node_modules/particles.js/demo/css/style.css css
cd node_modules/particles.js/ #pour allez sur le répertoire enfant
cp particles.js  ../../js #pour copier dans js les ../ ça veux dire qu'on remonte dans le repertoire (ce qu'on fait 2 fois)

Maintenant que j’ai copié, je n’ai plus besoin du dossier node_modules et du fichier package-lock.json on va utiliser la commande rm.

#d'abord on remonte dans l'arborescence
cd ..
cd ..
rm -r node_modules
rm package-lock.json

Je pourrais continuer dans la geekerie en utilisant nano pour faire ma structure HTML ; mais c’est quand même plus simple avec l’éditeur atom (pour info taper nano index.html pour quitter nano control +exit) .

On peut aussi utiliser vim (vim index.html) mais si ce meme existe ,c’est non sans raison

meme vim
Pour info il faut taper :q

Maintenant je clique sur add folders et je choisis le dossier particle pour pouvoir travailler sur mon dossier avec atom

dosssier

On ouvre index.html et on entre ce code html.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css/style.css">
  <title>Document</title>
</head>
<body>
<div id="particles-js"></div>
<script src="js/particles.js"></script>
<script src="js/app.js"></script>
</body>
</html>

Si vous lancez le fichier HTML vous avez le résultat par défaut, c’est-à-dire la vidéo que je vous ai montré au début.

Personnalisons un peu

Maintenant on va le personnaliser.
Sur le site principal vous avez un générateur pour cela.

snow

Disons qu’on est en période de noël et qu’on veut marquer le coup en faisant tomber la neige.

Je télécharge en appuyant sur  »download current config (json) »

⚠️ ne fermez pas l’onglet vous allez encore en avoir besoin

Ouvrir ce fichier avec un bloc note faire un ctrl+a et un ctrl+c.

Il faudra ouvrir app.js et remplacer de la ligne 16 à 125 en sélectionnant cette partie et collant (ctrl+v).

le code sera ceci

/* -----------------------------------------------
/* How to use? : Check the GitHub README
/* ----------------------------------------------- */

/* To load a config file (particles.json) you need to host this demo (MAMP/WAMP/local)... */
/*
particlesJS.load('particles-js', 'particles.json', function() {
  console.log('particles.js loaded - callback');
});
*/

/* Otherwise just put the config content (json): */

particlesJS('particles-js',

{
  "particles": {
    "number": {
      "value": 400,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "color": {
      "value": "#fff"
    },
    "shape": {
      "type": "circle",
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 40,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": false,
      "distance": 500,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 6,
      "direction": "bottom",
      "random": false,
      "straight": false,
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas",
    "events": {
      "onhover": {
        "enable": true,
        "mode": "bubble"
      },
      "onclick": {
        "enable": true,
        "mode": "repulse"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 400,
        "line_linked": {
          "opacity": 0.5
        }
      },
      "bubble": {
        "distance": 400,
        "size": 4,
        "duration": 0.3,
        "opacity": 1,
        "speed": 3
      },
      "repulse": {
        "distance": 200,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true
}

);

Ne pensez pas que c’est fini, un problème va se produire au niveau du css.
Si vous ajoutez un header et un paragraphe la neige ne sera pas intégré à votre header.

Ouvrez le code pen
et copier le code css dans style.css sur l’éditeur de texte

Crie d'effroi
oui je sais,c’est moche et pas indenté pas de panique atom-beautify fera le taf

Pour indenter si vous avez le package atom-beautify; il suffit de faire un ctrl+alt+b .

Pour l’instant le problème est toujours présent
pour le régler un petit commentaire sur le background-color de #particles.js et ajouter position fixed.

#particles-js {
  position:fixed; /*absolute*/
  width: 100%;
  height: 100%;
/*background-color:#b61924;*/
  background-image: url("");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}

l’autre solution peut être z-index à -1, c’est seulement utilisable si vous n’avez pas de background-color sur par exemple header.

Il existe aussi une autre bibliothèque qui fait exactement la même chose, c’est tsparticle.

Comments are closed.