particles.jsの使用

私は自分の背景としてparticles.jsを使用していますが、パーティクルはウィンドウのサイズまでしか伸びず、スクロールすると消えます。これに対抗しようとして、私はそのCSSセレクターにposition: fixed;を追加しました。パーティクルはページを完全に覆っていましたが、ウェブページ上のすべてのハイパーリンクが無効になりました。それはなぜ起こるのですか？回避策はありますか？particles.jsの使用

編集：particles.js https://github.com/VincentGarreau/particles.js/

<div id="particles-js"></div> <script src="particles.js"></script> <script src="site/js/app.js"></script>

CSS実装ののGithubレポ：JSファイルの場合

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

、上記のリポジトリを参照してください。実際にはプラグインで主な作業を行うのはapp.jsとparticles.jsです。

出典

2017-08-03 Hritik Gupta

あなたはこのライブラリ（多くのフォークがあります）、あなたはそれを設定する方法の小さなREPROを発見した（おそらく）GitHubのプロジェクトへのリンクを含む追加的な情報を提供してください（投稿しないでください。あなたの全体のコードファイル、しかし）。 – JDB

JSを実装するコードのスニペットを提供できますか？そうすれば、潜在的にどこが間違っているかを知ることができます。あるいは、あなたの状況に適したソリューションを考え出すことができます。 – Brxxn

私は同じ問題を抱えていたし、次のように解決：ハイパーリンクは（particles.jsタッチイベントと一緒に）動作させるために

CSS

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

.body-particles{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 100; 
}

HTML

<html> 
    <head> 
     <title>Title</title> 
     <meta charset="utf-8" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1" /> 

     <!-- SOME CSSs HERE --> 

     <link rel="stylesheet" media="screen" href="assets/css/particles.css"> 

     <!-- SOME SCRIPTS HERE --> 
    </head> 
    <body> 
     <div class="body-particles"> 

     <!-- Wrapper --> 
      <div id="wrapper"> 
       <!-- MY STUFF HERE, STYLED WITH MY CSS --> 
      </div> 
     </div> 

     <!-- particles.js container --> 
     <div id="particles-js"></div> 

     <!-- scripts --> 
     <script src="assets/js/particles.js"></script> 
     <script src="assets/js/app.js"></script> 

    </body> 
</html>

私はクラスを追加しましたフォーカスする必要がある要素へのmouseEvents（ハイパーリンク、ナビゲーションバーなど）

CSS

.body-particles{ 
    pointer-events: none; 
} 


.mouseEvents{ 
    pointer-events: all; 
}

出典

2017-08-04 02:23:03

最高の方法ではないかもしれません。 z-indexはCSSを壊す！ –

もっと良い方法がありましたか？ @HritikGupta –

答えて

関連する問題