HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/5-17.css">body内の粒子を表示させたい場所にHTMLを記載します。
<div id="wrapper">
<canvas id="particle"></canvas>
<!--/wrapper--></div>body終了タグ直前に jQuery、particleText.jsと、動きを制御する自作のJS の3 つを読み込みます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="js/particleText.js"></script><!--https://github.com/55Kaerukun/particleText.jsからダウンロードして使用-->
<!--自作のJS-->
<script src="js/5-17.js"></script>
CSSの書き方
画面全体に効果を設定したい場合は、下記のように設定する。
#wrapper{
/*描画されるテキストを中央寄せにする*/
display:flex;
justify-content: center;
align-items: center;
}
#particle{
width:100%;
height: 100vh;
vertical-align: bottom;/*canvasタグ下に余白が生まれるのを防ぐ*/
}
JSの書き方
$("#particle").particleText({
text: "If you can dream it<br>you can do it.<br>日本語もいけるよ", // 表示させたいテキスト。改行の場合は<br>追加
colors:[ "#fff","#ccc", "#ddd" ], // パーティクルの色を複数指定可能
speed: "high", // slow, middle, high の3つから粒子が集まる速さを選択
});
※テキストが横に長いと画面からはみ出て非表示になります。その場合は改行を利用して表示させます。
※particleText.js本体の中では、font-familyの指定や、粒子の数の指定が出来ます。
レイアウトによって調整してください。