Il s’agit d’une animation que vous avez certainement déjà remarquée sur différents sites, car cet effet ne passe pas inaperçu.
Peut-être vous êtes-vous déjà demandé comment le mettre en place sur votre site ?
Si tel est le cas, je vous explique tout en détails dans cet article…
Tout commence par un plugin
Cet effet de particules animées est géré par une librairie JavaScript nommé Particles.js
Pour éviter d’avoir à mettre les mains dans le code pour l’implémenter dans votre thème, vous pouvez installer ce plugin gratuit ; très utile, il fera le boulot à votre place et permettra d’accueillir le code de configuration de l’effet.
Configurez votre effet
Rendez-vous sur le site de particles.js et faites les réglages qui vous intéressent.
Il y a déjà 5 exemples qui permettent d’illustrer les possibilités de la librairie, mais ensuite à vous de jouer avec les options pour configurer l’effet selon vos envies.
Vous pouvez changer beaucoup de choses comme la forme des particules, leur taille, leur nombre, leur couleur, leur vitesse, si elles sont reliées entre elles ou non, si on peut interagir avec la souris… bref, vous l’avez compris, il y a des millions de possibilités !
Ne vous souciez pas de la couleur de fond car celle-ci sera définie directement dans le Divi Builder (ce sera la couleur de fond de votre section, ligne ou module).
Une fois que vous êtes satisfait de vos réglages, cliquez sur Download current config (json), ce qui aura pour effet de télécharger sur votre ordinateur un fichier .json contenant votre configuration.
Ouvrez ce fichier avec un éditeur de texte et placez en première ligne particlesJS(‘VOTRE_IDENTIFIANT’, et en dernière ligne );
Prenez soin de modifier VOTRE_IDENTIFIANT par le terme de votre choix (par exemple : fond_particules)
Ce qui nous donne :
Ensuite, copiez l’ensemble du contenu de votre fichier dans votre presse-papier.
Appliquez votre effet
Rendez-vous maintenant dans l’administration de WordPress.
Dans le menu de gauche, si vous avez bien installé et activé le plugin dont je vous parlais en début d’article, devrait apparaitre un nouvel élément de menu nommé Particle Background. Cliquez dessus, collez le contenu de votre presse-papier dans le champ Add Your Json Code here et validez en cliquant sur le bouton bleu Enregistrer les modifications.
Allez sur la page où vous souhaitez ajouter votre effet de particules animées et ouvrez les paramètres de la section, de la ligne ou du module dans lequel doit apparaitre l’effet.
Dans Avancé -> ID et classes CSS -> ID CSS, précisez le nom de l’identifiant que vous avez choisi tout à l’heure.
Validez les changements, sauvegardez votre page et vous verrez apparaitre votre effet de particules animées.
Dernière précision
Si vous souhaitez appliquer sur votre site plusieurs effets différents de particules animées, il vous suffit de coller les différents codes (avec des identifiants différents), les uns au-dessous des autres dans le champ Add Your Json Code here de la page d’options du plugin.
Soyez créatifs, amusez-vous bien !
Bonjour, le début du code téléchargé ne ressemble pas tout à fait à ce que vous montrez, n’étant pas très à l’aise avec le JS je pense n’avoir pas fait la bonne manipulation sur l’identifiant, pourriez vous prendre un exemple avec un vrai code pour mieux visualiser la méthode ? Merci beaucoup pour le partage de la technique. Christophe.
En effet, c’est normal que le début et la fin du code ne ressemblent pas au contenu du fichier JSON téléchargé, étant donné que comme je l’explique, il faut ajouter une ligne de code en ligne 1 + les balises ); à la fin. 😉
Je ne comprends pas cela ne fonctionne pas..
Revérifie bien l’étape où il faut modifier le code en ajoutant son identifiant car le souci vient très certainement de là… 😉
Bonjour,
Il y a quelques semaines j’ai suivi votre tuto pour installer cet effet sur le header fullwidth de DIVI et cela a très bien marché. Or, aujourd’hui, j’ai voulu intégrer un second code mais cela a bloqué le premier.
Du coup, impossible de récupérer l’effet même en reprenant vos explications. Est-ce que les éléments sont en cache ? Est-il possible de remédier à cela ?
En espérant une réponse de votre part,
Cordialement
Bonjour Quentin,
tu as bien procédé comme précisé dans la conclusion du tuto ? C’est-à-dire en ajoutant de nouveau le code nécessaire pour le nouvel effet mais avec un identifiant différent du premier ?
Bonjour,
Oui, effectivement. J’avais changé le nom. Sauf que ça n’a pas fonctionné sur ma nouvelle section (qui avait un nouveau nom) et en plus ça a désactivé l’effet du premier essai. Du coup, j’ai supprimé le nouveau nom mais depuis, plus rien n’apparaît comme s’il y avait un historique qui conservait cette erreur. Y a t-il un cache à vider ? Une manière de reprendre de zéro ou du moins que le plug-in réinitialise les anciens enregistrements ?
C’est dur à dire comme ça, mais vérifie bien les identifiants que tu as utilisés, et qu’ils soient bien à chaque fois insérés dans “ID CSS” sur ta section.
Après, le plugin en lui-même n’a pas de cache ; par contre, as-tu un plugin de ce genre d’installé ?
Si besoin, vient sur le groupe Facebook de Divi Community, on sera plus à l’aise pour t’aider. 😉
J’adooooooore tout vos tutos ! Merci beaucoup vous nous aidez à rendre nos sites toujours plus originaux !
Je suis en ce moment en train de refaire tout mon site (qui n’a pourtant que quelques mois) : adieu Avada, bonjour Divi !
Merci Ava, on fait de notre mieux 😉
Bonjour, très bon tuto mais je rencontre un soucis.
J’arrive bien à afficher le script à l’endroit souhaité mais celui ci se trouve déformé.
Les ronds sont des ovales, les carrés des rectangles…
Si je fait ctrl+roulette de la souris pour changer le % de zoom de la fenêtre sa régle le soucis de déformation. Comment remédier à ce soucis ?
Bonjour Julien du coup j’ai retester particles.js mais pour afficher ma configuration sa ne marche pas il n’y a pas d’endroit insérer votre fichier json donc j’ai mis dans l’éditeur du plugin mais du coup sa ne m’affiche pas ma config mais celle par défaut en rouge et le code en plein milieu aussi…
Merci de votre retour et merci pour ses tutos !
Même en insérant le fichier j.son comme indiqué dans le plugin dans le fichier particle-background-wp et d’y copié son fichier .json rien y fait j’ai la config par défaut qui s’affiche…
le plugin aurait il changé car il n’y a pas d’endroit pour y insérer son fichier .json..;
c’est frustrant de pas y arriver, si quelqu’a déjà réalisé ses config perso et que sa marche merci de m’indiquer vos étapes car c’est à ni rien comprendre…
merci de vos retours
salutations
bonjour,
débutante sur DIVI, je suis arreté à la partie presse papier, et recoller le tout !!
je cherche mais ne comprend pas la manip
merci de l’aide
J’ai l’impression que tu ne sais pas ce qu’est le “presse-papier” ?… 🙂
C’est là où sont stockées les informations temporairement sauvegardées lors d’un copier/coller.
Bonjour, j’ai bien installé le json pour “particules”, cela à bien fonctionné. hardi de tout cela, j’ai fait une deuxième configuration et là c’est le drame ! Aprés rajout du code json dans l’option du plugin et enregistrement et bien sur changement du nom, j’ai changé le nom dans ma section de page et puis plus rien à l’exécution ne reste que la couleur de fond. Aprés quelques test, il ne me prend que la première configuration enregistrée dans le plugin. Pour la deuxième je rajoute : …);
particlesJS(‘fond_particules_2’,{…
Merci pour votre aide
Bonjour, as-tu résolu ton problème?
Bonjour,
l’un d’entre vous a-t-il trouvé une solution pour mettre des effets différents sur des pages différentes ?
Mon premier effet sur la page d’accueil fonctionne parfaitement. Si je mets le même sur une autre page ça fonctionne aussi, par contre si j’en mets un différente sur cette deuxième page (code copié-collé en dessous du précédent dans le plugin, avec un nom différent) rien ne s’affiche sur la deuxième page. Sur la page d’accueil le premier reste cependant bien en place.
Merci 🙂
Bonjour,
Idem pour moi il n’y a que la première animation qui est pris en charge j’ai beau changer les lignes codes avec une dénomination différente c’est la même animation qui se joue alors que tout est différent ! en gros si j’enlève toutes les animations et que j’en mets une nouvelle c’est l’animation que j’ai utiliser en premier qui reviens tout le temps alors que j’ai configurer une animation complètement différente…
Merci pour vos réponses.
Bonjour,
Après 150 essais je n’arrive toujours pas à mettre en oeuvre les particules !
Pouvez vous m’aider ?
Cordialement
Bonjour,
bien sur. Rien ne marche du tout?
Bonjour j ai un probleme au niveau de la sécurisation de mon site une fois le plug in activé
You currently have TLSv1 enabled.
This version of TLS is being phased out. This warning won’t break your padlock, however if you run an eCommerce site, PCI requirements state that TLSv1 must be disabled by June 30, 2018.
et une fois que je le désactive il y a le cadena vert qui vient sinon il es jaune probleme j ai plus de bakground animé si je le désactive.
Bonjour, tu sembles en effet avoir un souci de SSL… je ne pense pas que le plugin soit en cause car nous l’utilisons sur notre site de démo et tu pourras constater que le HTTPS est bien présent, sans alerte.
Tu peux essayer le plugin Really Simple SSL qui peut t’aider à résoudre tes soucis de SSL.
Bonjour à tous, je ne sais pas si je vais avoir une réponse pcq j’arrive un peu tard mais je le tente … voilà je dois intégrer une nouvelle page sur un site construit avec Divi. La personne souhaite un effet qui est disponible sur un thème qui s’appelle SALIENT et qui permet d’intégrer un bandeau avec un mot ou un logo en particules. Je n’arrive pas à le reproduire en Js. J’arrive seulement à intégrer un background comme vous le montrez dans votre article, si jamais quelqu’un à un début de solution … je suis preneuse ! En plus de ça, mon client veut que les particules soient des triangles !!!!!!! 👍
Pour ce que tu cherches à faire, regarde peut-être du côté de ce tuto. Je pense qu’il faudra utiliser Tweenmax pour un meilleur rendu.
Bonjour Pierre,
Comme d’habitude ce tuto est top.
Dis-moi pourrais tu partager son paramétrage du fichier JSON car je n’arrive pas à avoir le même résultat que toi et j’adore celui de ta démo.
Par avance merci.
Pat
Merci pour les encouragements. 🙂
J’ai mis la config de ma démo sur Github : https://github.com/PierreBichet/divi-particles-background/blob/master/demo-config.json
Merci Pierre,
Je vais tester ce que cela donne sur mon site.
Grand merci.
Pat
Pierre,
Merci pour ton partage.
J’ai testé sur mon site et c’est pas mal.
En revanche sur un smartphone, les bulle ne sont pas rondes mais ovales.
Et c’est pas génial, aurais-tu une astuce pour régler ce problème?
Par avance merci.
Hello!
Thanks for the awesome tutorial, I followed every single step and in the end it was just not showing the particles in the background. Then when I opened the Theme Customizer controls it was there. Now, when I close the theme customizer controls it disappears again and I don’t see it. I don’t understand why this happens, any help would be highly appreciated.
Thanks so much!
Hello, have you cleared your cache ? Or do you use like WPRocket ou WP Super cache ?
Bonjour, ce tuto est-il encore d’actualité?
En effet, j’ai tenté d’implanter cet effet sur mon site internet mais celui-ci n’a pas fonctionné. J’ai bien suivi les instructions à la lettre, et j’ai tenté de l’implémenter dans le Visual builder ainsi que dans le thème Builder de Divi mais rien n’y fait, rien apparaît…
Avez-vous peut-être une solution?
Merci d’avance pour votre réponse
J’ai utilisé cette méthode il y a quelques semaines sur un de mes sites donc je confirme que ça fonctionne.
Super Tuto, j’ai gafouillé au début vu que je suis newbie mais j’ai fini par y arriver
Merci bc pour ce tuto (y)
Cela fonctionne correctement sur section fixe mais quand il y a des section de défilement d’image (slides), cela ne fonctionne plus, ce qui est vraiment dommage. il y a t’il moyen de remédier au problème et de le rendre visible sur tous les slides?
Ça vient probablement d’une limitation du script original dont nous n’avons pas la maîtrise…
Il y a le plugin Divi Toolbox qui, entre autres, propose cet effet.
Bonjour,
Pour tout ceux qui n’arrive pas à faire marché comme moi (J’y ai passé quelques heures) voila ma solution :
particlesJS(‘IDENTIFIANT’,
Il ne faut pas metre simple guillemet (‘) mais les guillemets classique (” “) comme ceci :
particlesJS(“IDENTIFIANT”,
Je m’en suis apercu en me randant sur une page d’exmple de l’editeur de ce très bon tuto 🙂
https://github.com/PierreBichet/divi-particles-background/blob/master/demo-config.json
J’espère que ca pourra en aider certain 😉