11486 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Background particules

Bonjour,

Je me permets de vous écrire car je rencontre des difficultés pour animer le background d'un site avec des particules. Pour obtenir lesdites particules, j'utilise ceci. La demo est ici.

Selon vous, en utilisant les codes fournis, est-il possible d'appliquer à la balise body ce background ?

Lorsque j'insère un élément sur la page (titre, paragraphe, image), les particules et l'élément ne se superposent pas. La notion de background perd ainsi son sens (aperçu en fin de message).

Une personne a-t-elle déjà réalisé cet effet ?

Merci Smiley smile

upload/1532341060-59717-capture-daeacran-2018-07-23-a.jpg
Modifié par MickFR (23 Jul 2018 - 12:18)
Salut,

Le problème ne vient pas de la librairie, mais de la façon dont tu organises ton style.
Appliquer le script sur le body ne changera rien dans ce cas de figure.

Tu n'as pas partagé ton code, donc il sera difficile de t'aider sur ton DOM, mais à ce que je vois, tu as un container qui porte probablement une classe "particles-js" (celle par défaut sur le tutoriel de particles.js), et j'imagine, directement dans le body.

En HTML/CSS, pour superposer des éléments, tu peux jouer avec la propriété position.
Il faut que ton bloc contenant les particules ait une position absolue et pour position de départ le coin en haut à gauche. 


body {
    position: relative;
}
.particles-js {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1; 
}


S'agissant d'un background, j'ai rajouté ici le z-index (qui définit la priorité de l'élément dans la superposition) à -1 pour éviter les mauvaises surprises. En fonction du besoin, cette propriété est vouée à changer.
J'ai fait un petit essai et ce n'est pas gagné.

Ce script utilise l'élèment canvas pour générer son dessin de particules.
J'ai dû mal à savoir si le canvas peut-être contenu dans un <div> pour être utiliser comme un calque à superposer dont l'ordre dépend de z-index, ou s'il se rapporte directement à une partie de la surface de la fenêtre du navigateur.

Même en modifiant le style de <div class="particules-js"> comme ceci :
{ position: fixed; width: 100vw; height: 100vh; top:0; left: 0; }

et en rajoutant après lui un <div> avec un { z-index: 9999; }
je n'arrive pas à afficher ce nouveau <div>
Oups, je n'avais pas vu toutes les démos.

Pour l'utiliser en fond de page, il faut faire comme ceci :
<body>
<div id="particules.js"></div>
<div id="content">
      Je suis fou du chocolat Lanvin
</div>
</body>

#content {
    position: absolute;
    z-index: 100;
    top: 2rem;
    text-align: center;
    width: 50%;
    background: #fff;
    margin-left: 25%;
    height: 10rem;
    padding-top: 3rem;
}

Ce n'est le #particules.js qu'il faut modifier, mais l'autre <div> avec un "position: absolute;"

L'auteur donne un exemple à cette URL :
https://vincentgarreau.com/particles.js/
Modifié par bazooka07 (23 Jul 2018 - 14:33)
Merci de votre aide Smiley smile

Je vais faire de nouveaux essais.

Si je comprends bien, le contenu du site doit obligatoire être dans un conteneur en position: absolute et avoir un z-index suffisant pour s'afficher au dessus des particules ?

Pas optimal pour developper un site "complexe" avec colonnes etc.

Dès le départ, avoir un conteneur en position absolute m'embête Smiley decu

D'autres librairies proposent peut-être une structure différente. Je vais chercher Smiley smile
Modifié par MickFR (23 Jul 2018 - 14:49)
MickFR a écrit :

Si je comprends bien, le contenu du site doit obligatoire être dans un conteneur en position: absolute et avoir un z-index suffisant pour s'afficher au dessus des particules ?

Pas optimal pour developper un site "complexe" avec colonnes etc.

C'est ce que j'en conclus.
Cela oblige à mettre tout le contenu du site dans un container au lieu du body.
On doit pouvoir remplacer le position:absolute par un position: fixed.

L'idéal serait de trouver un autre script qui face cela avec une image SVG.

Dommage, c'est sympa comme anim.
J'ai essayé avec une nouvelle librairie.
J'ai utilisé la balise <canvas> et je l'ai mise en position fixe de telle sorte que l'animation couvre l'ensemble de la fenêtre du navigateur. J'ai appliqué un z-index: -1.

Le résultat est ici : https://codepen.io/anon/pen/jpBJxM

On voit que l'animation contenue dans le canvas est gênée par la section. Les éléments ne se superposent pas.

La position fixe me plaît car même si on scroll, l'animation est toujours visible.

Librairie utilisée : Glassy-Worms
Modifié par MickFR (23 Jul 2018 - 16:30)
Salut,

Alors oui comme dit plus haut, il va de soi que l'élément doit être "au moins" au même niveau que celui qui englobe ton canvas. Mais c'était le cas dans ton exemple, si je ne m'abuse ? Tout était bien dans le body ?

Pour en revenir sur les remarques qui ont été faites, personnellement je n'ai aucun soucis à passer un élément canvas sous un autre élément avec la propriété absolute.

Pour reprendre ton codepen (qui utilise worms cette fois), voilà ma tentative : https://codepen.io/anon/pen/bjWQBy

PS : Ah oui, j'ai vu aussi que tu avais essayé d'inclure un canvas "manuellement" en ajoutant dans le html la balise <canvas> ainsi que des attributs. La librairie que tu utilise ne fonctionne pas comme ça. Si tu explore ton code, tu peux voir que le script génère lui-même un canvas à la fin du corps de la page en fonction de la configuration que tu lui donnes dans le JS. Smiley cligne
Merci de t'être penché sur ma problématique.

Suite à ton retour, j'ai modifié mon code.

J'y vois plus clair Smiley smile
Modifié par MickFR (24 Jul 2018 - 15:58)
Sujet clos
Aller à