web-dev-qa-db-ja.com

背景としてのParticles.js？

私はこの例を背景として使用しようとしていますが、うまくいかないようです。

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

これを回避するために、-1500pxのマージン上部を使用してテキストをその上部に配置することを余儀なくされ、応答性に大きな問題を引き起こしています。

誰が私がそれを厳密に背景として使用できるかについてのアイデアを持っていますか？

プラグインの作成者は、ここで彼のウェブサイトでそれを行いました。

http://vincentgarreau.com/en

あなたがそれを検査するとき、CodePenの例にあるように上にホバリングする「キャンバス」がないので、あなたは言うことができます。

javascripthtmlcssparticles
12
Milan Maru

作成者が his nasaページ で行うように、次のcssコードでこれを実行できました。

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
}

それから私は<div id="particles-js"></div>ボディ開始タグの直後。キャンバスクラスはparticles.jsライブラリによって生成されているため、表示されないことに注意してください。

キャンバス作成コードフラグメント

13
Erwol

私は以前にこの問題に遭遇し、これを行うことで修正しました：

/* 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;
}

次に、コンテンツのdiv/main要素を作成し、これに追加します。

mainElementNameHere {
    position: absolute;
}
7
Grey

Particles.jsの前に配置する要素でoverflow: hidden;プロパティを使用してみてください。

#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

これを試して：

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

あなたの体にはid = "particle_background"があります

3
kumail

私は同じものを探していました。今、私はおそらく、ここまでの指示に従って何かをしなかったと最初に言うでしょうが、私はこれを見つけて、それは私にとって完璧に機能します。

こちらをご覧ください pen by 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

id="particles-js"このコードをcssに追加するだけです。

position: fixed !important;
display: block;

あなたは付け加えられます !importantは、以前のスタイルを上書きします。

1
Darwin P

このように実装することもできます

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

cSSで

.something {
 z-index:1;
}

背景に配置されたparticle-jsのすべての要素。役に立つことを願っています。

1
Barack Obama

wordpress Webサイトでパーティクルjsを使用し、次のリンクをたどる場合： http://cakewp.com/divi-tutorials/add-Nice -moving-particles-background-effect /

次に、動く粒子がコンテンツの上にあることに気付くかもしれません、その場合はコンテンツを与えてください（列/行、またはボタンかもしれません） 、または入力フィールド）a「z-index：5（or more）」

This is the website that I faced problem

この写真では、検索バーが機能していませんでした。それで、私は "z-index：5"を与えました。今では正常に動作します。また、粒子はよく反応しています。

1
Raihanul Alam