背景にアクセントを付けたい！

　_{≪くれきん≫}

ホームページの背景画像に動きのあるアクセントを付けたい時がありますよね。検索してたら便利なスクリプトを見つけました。フリーで配布しているのでファイルのダウンロード方法や設置方法をご紹介します。まずは particles.js のトップページにある「Download Zip File」のボタンをクリックします。ダウウンロードが始まりますので保存したZipファイルを全て展開します。パーティクルの大きさや速度は変更しない方が無難ですので「particles.js-master」フォルダーをそのままホームページのサーバーにアップロードします。次はアクセントを付けたいページの<head>～</head>に以下のスクリプトをコピペして下さい。パーティクルの色の変更は6行目の3色を背景画像に合わせて変更して下さい。色のコードはこちらを参照してください。

window.onload = function() {
  Particles.init({
    selector: '.background',
    sizeVariations: 10,
    color: ['#000077', '#404B69', '#990000'],
    connectParticles: true
  });
};

次に、<body>の直下に以下の html をコピペして下さい。2行目のパスは「particles.js-master」フォルダーをアップロードした場所と変更するページの階層で変えて下さい。｟下記のパスは index.html と変更するページ、「particles.js-master」フォルダーが同じ場所(階層)にある場合です｠　それが分からない？という方はこちらを参照してください。

<canvas class="background"></canvas>
<script src="particles.js-master/dist/particles.min.js.gz"></script>

以上でおしまいです。めちゃイージーでございます。

コメントする コメントをキャンセル

コメントするコメントをキャンセル