web-dev-qa-db-fra.com

Particles.js en arrière-plan?

J'essaie d'utiliser cet exemple comme arrière-plan, mais je n'arrive pas à le faire fonctionner.

http://vincentgarreau.com/particles.js/#nasa

Pour contourner ce problème, je suis obligé d'utiliser une marge supérieure à -1500 pixels juste pour placer mon texte par-dessus et cela pose des problèmes de réactivité majeurs.

Quelqu'un a-t-il une idée de la façon dont je peux l'utiliser strictement comme arrière-plan?

Le créateur du plugin l'a fait ici sur son site internet.

http://vincentgarreau.com/en

Vous pouvez le dire car lorsque vous l'inspectez, il n'y a pas de "canevas" planant au-dessus comme dans l'exemple CodePen.

javascripthtmlcssparticles
12
Milan Maru

J'ai juste réussi à le faire avec le prochain code CSS, tout comme le créateur le fait dans sa page nasa :

body,
html {
    height: 100%
}

#particles-js canvas {
    display: block;
    vertical-align: bottom;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -webkit-transition: opacity .8s ease, -webkit-transform 1.4s ease;
    transition: opacity .8s ease, transform 1.4s ease
}

#particles-js {
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -10;
    top: 0;
    left: 0
}

Ensuite, j'ai écrit <div id="particles-js"></div> juste après la balise d'ouverture du corps. Notez que vous ne pouvez pas voir la classe canvas car elle est générée par la bibliothèque particules.js.

Fragment de code de création de toile

13
Erwol

J'ai rencontré ce problème auparavant et l'ai résolu en procédant comme suit:

/* to show the canvas bounds and remove scrollbars caused by it, if applicable */
canvas {
    display:block;
    background: rgb(33,36,50);
    position: fixed;
    z-index: -1;
}

puis créez un élément div/main pour votre contenu et ajoutez-y:

mainElementNameHere {
    position: absolute;
}
7
Grey

Essayez d'utiliser le overflow: hidden; propriété à l'élément que vous souhaitez placer devant les particules.js;

#main-section {
    overflow: hidden;
}

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% 50%;
    opacity: 0.48;
}
5
Renan Sigolo

Essaye ça:

#particle_background canvas{
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
}

où votre corps a id = "icle_background "

3
kumail

Je cherchais la même chose. Maintenant, je serai le premier à dire que je n'ai probablement pas fait quelque chose de bien en suivant les instructions ici, mais j'ai trouvé cela et cela fonctionne parfaitement pour moi.

Voir ceci stylo par Michael Van Den Berg

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

canvas {
    display: block;
    vertical-align: bottom;
}
<body>

  <div id="particles-js"></div>
  <div> @*Content you want to be in front goes here*@ </div>

<body>

enter image description here

1
Medismal

Dans id="particles-js" il suffit d'ajouter ce code à votre css:

position: fixed !important;
display: block;

Vous pouvez ajouter !important pour remplacer les styles précédents.

1
Darwin P

Vous pouvez également l'implémenter comme ceci

<body id="particles-js">
 <div class="something">
  <h1> something here </h1>
 </div>
</body>

en css

.something {
 z-index:1;
}

tout l'élément de particule-js placé au fond. espérons utile.

1
Barack Obama

Si vous utilisez des particules js pour le site Web wordpress et en suivant ce lien: http://cakewp.com/divi-tutorials/add-Nice -moving-particules-background-effect /

Ensuite, vous remarquerez peut-être que les particules en mouvement sont au-dessus de votre contenu , dans ce cas, donnez simplement le contenu (il peut s'agir d'une colonne/ligne ou d'un bouton , ou champ de saisie) a "z-index: 5 (ou plus)"

This is the website that I faced problem

Dans cette image, la barre de recherche ne fonctionnait pas. Donc, je lui ai donné "z-index: 5" . Maintenant ça marche bien. De plus, les particules réagissent bien.

1
Raihanul Alam