超簡単！jQueryアニメーションでサイトにインパクトを！
2014.10.17
スマホの台頭で、WEBサイトはFlatの概念が浸透していますが、
シンプルで見易いのは万人受けする分、特に記憶に残ることはありませんね！
なので、ちょっと変わった動きやデザインをつけて、ユーザーをどう振り向かせるか考える方もいると思います。
全デバイス対応だといろいろと手間が増え、先方の予算や期限に間に合わないことも多々・・・・
基本的にスライダー以外は静的なページというパターンが多いですが、
過去に紹介したパララックスなどを用いるのも手ではあります。
でももう少しリッチなサイトにした時はこちらを使うのはいかがでしょうか？
Particleground
URL:
http://jnicol.github.io/particleground/
サイトを見ると、丸と線がゆっくり動いているのがわかります。
更に、マウスの動きにも反応します。
そして大変有難いことに、レスポンシブにも対応しています！
がっつりのアニメーションより、
静かな動き、心地よいアニメーションの方がユーザーに良い印象を与えられるますね！
こちらのアニメーションはフリーのjQueryプラグインなので、
一つのネタとして持っておくのもいいと思います。
超簡単！設置方法
設置は説明するほどでもない位、簡単です。
設置方法
1.DLする
2.headにDLしたファイルを設置する
1.まず、DL
以下からダウンロードしてください。
DOWNLOAD:
http://jnicol.github.io/particleground/
必要なファイルだけPick Up!
particleground-master
∟ jquery.particleground.js
or
jquery.particleground.min.js
∟ demo
∟css – all file
∟js – all file
∟index.html
2.headにDLしたファイルを設置する
ページに「style.css」「jquery-1.11.1.min.js」「jquery.particleground.min.js」「demo.js」を読み込みます。
CSSはRESETも設置されていますので、追加の必要はありません。
<link rel="stylesheet" href="css/style.css">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="js/jquery.particleground.min.js"></script>
<script src="js/demo.js"></script>
<div id="particles">
<div class="intro">
ここにコンテンツを挿入
</div>
</div>
id=particles は、アニメーションを制御しているjquery.particleground.jsとdemo.jsで指定したアニメーションが適用されていますので、もしid名を変更するときは他のファイルも併せて変更してください。
また、demo.jsで丸と線の色も変更できるようになっています。
っと、これで設置完了です！
数分で設置できるので、他のプラグインと組み合わせたりしてもさほど手間がかかりません。
物凄く感謝のjQueryプラグインです。
Contact