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

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をポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

関連記事

• 
  2024.06.28 カラースキームの選び方: 初心者Webデザイナー向けガイド
• 
  2018.10.27 センスの良いフォント　フリー集
• 
  2018.11.09 サクラサーバーで無料ＳＳＬを利用する方法
• 
  2018.10.26 サクラサーバーにワードプレスをインストールするまでの流れ
• 
  2020.08.28 css js【簡単】下からふわっと出てくるアニメーションの作り方
• 
  2023.12.20 ACF(Advanced Custom Fields)編集画面にフィールドが出ない場合の対策