Home > ウェブデザイン備忘録 > 粒子状のパーティクルを背景に表示させる方法。

粒子状のパーティクルを背景に表示させる方法。

18.10.27

ウェブデザイン備忘録

粒子状のパーティクル　動くアニメーション

◆htmlには以下の記述（画像などの要素扱い）

<div id="particles"></div>

1	<div id="particles"></div>

◆CSSには以下の記述（画像などの要素扱いのためposition: absolute;）

#particles{
　height: 735px;
  position: absolute;
  width: 100%;
	}

1

2

3

4

5

#particles{

　height: 735px;

position: absolute;

width: 100%;

}

◆jsファイルは以下を記述（ワードプレス）

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js<?php version_num(); ?>"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.particleground.js<?php version_num(); ?>"></script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/demo.js<?php version_num(); ?>"></script>

1

2

3

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery-1.11.1.min.js<?php version_num(); ?>"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.particleground.js<?php version_num(); ?>"></script>

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/demo.js<?php version_num(); ?>"></script>

①jquery-1.11.1.min.js
↑
jquery本体

②jquery.particleground.js
↑
スピードなど細かい設定ができる。詳細は以下のリンク
http://www.fumiononaka.com/Business/html5/FN1509002.html

③demo.js
↑
ドットと線の色を変えられる

おすすめ参考サイト

https://ics.media/entry/11172

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« サクラサーバーで無料ＳＳＬを利用する方法

ワードプレスで子テーマを設定する方法。 »

関連記事