Q&A
1. htmlの下に入るというのはどういう意味でしょうか？
→ 重なって表示されるのでしょうか。それとも別コンテンツの下部に表示されるということでしょうか
2. 具体的にどのようなコードを記載したのでしょうか。
そちらを元に、何が悪いのかをお尋ねしたほうが良いかと思います。
Webコーディング初心者です。よろしくお願いします！
https://github.com/jnicol/particleground
上記情報のアニメーションを背景に実装したく
いろいろなサイトが書いてある手順を元に進めていたんですが
背景に敷きたい箇所を<div id="particles">で囲っても
背景に敷かれず、html情報の下に入ってしまいます。
どうすれば、背景へ実装できるでしょうか？
cssの中身に関しても必要なことがあればお教えいただきたいです！
どうぞよろしくお願いいたします！！
回答2件
0
ベストアンサー
今回のキモは、ID "particles" 要素ではなく、ID "particles" 直下の子要素に対し、margin-top を調整することにあります。
HTML
1<div id="particles"> 2 <div id="intro"> <!-- ← この要素の margin-top を調整する --> 3 <h1>Particleground</h1> 4 <p>A JavaScript plugin for snazzy background particle systems</p> 5 <a href="https://github.com/jnicol/particleground/archive/master.zip" class="btn">Download</a> 6 </div> 7</div>
Javascript
1$(document).ready(function() { 2 $('#particles').particleground({ 3 dotColor: '#5cbdaa', 4 lineColor: '#5cbdaa' 5 }); 6 // ↓↓↓ ここがキモ ↓↓↓ 7 // 縦要素中央表示：#intro の高さの半分を margin-top の負値として設定 8 $('#intro').css({ 9 'margin-top': -($('#intro').height() / 2) 10 }); 11});
※ 上記コードは未検証です。。。ごめんなさい。
投稿2016/01/20 00:34
総合スコア397
0
どの様なコードを記載したのか見えないので何とも言えませんが。。。
該当サイトを確認してみたところ、javascript (demo.js) によって、margin-top で表示位置を調整しているみたいですが（負値を設定することにより強制的に上部に表示）、そういった処理は行われていますか？
view-source:http://jnicol.github.io/particleground/
http://jnicol.github.io/particleground/js/demo.js
投稿2016/01/19 01:04
編集2016/01/19 01:07総合スコア397
ありがとうございます！！<head＞の中に、下記コードを入れています。<body>の中には、背景に敷きたい部分を、<div id="particles>でくくっています。いかがでしょうか？
ーーー
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.particleground.min.js"></script>
<script>
$(document).ready(function() {
$('#particles').particleground({ //背景を表示したい要素の指定
dotColor: '#F66081', //ドットの色を指定
lineColor: '#F66081', //ドットをつなぐ線の色を指定
density:'15000', //生成されるparticleの密度を指定
proximity: 100,
parallaxMultiplier: 10,
lineWidth: 2,
particleRadius: 35,
minSpeedY: 0.1,
maxSpeedY: 0.1,
minSpeedX: 0.1,
maxSpeedX: 0.1,
});
});
</script>
申し訳ありませんが、例題をコードハイライト表示で行いたいので、コメントではなく別途回答でお答えします。
あなたの回答
tips
プレビュー
