超簡単!jQueryアニメーションでサイトにインパクトを!

2014.10.17

スマホの台頭で、WEBサイトはFlatの概念が浸透していますが、 シンプルで見易いのは万人受けする分、特に記憶に残ることはありませんね! なので、ちょっと変わった動きやデザインをつけて、ユーザーをどう振り向かせるか考える方もいると思います。 全デバイス対応だといろいろと手間が増え、先方の予算や期限に間に合わないことも多々・・・・ 基本的にスライダー以外は静的なページというパターンが多いですが、 過去に紹介したパララックスなどを用いるのも手ではあります。 でももう少しリッチなサイトにした時はこちらを使うのはいかがでしょうか?

Particleground

liruu01 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>

 
3.idとclassを指定

<div id="particles">
  <div class="intro">

  ここにコンテンツを挿入

  </div>
</div>

 
id=particles は、アニメーションを制御しているjquery.particleground.jsとdemo.jsで指定したアニメーションが適用されていますので、もしid名を変更するときは他のファイルも併せて変更してください。 また、demo.jsで丸と線の色も変更できるようになっています。 っと、これで設置完了です! 数分で設置できるので、他のプラグインと組み合わせたりしてもさほど手間がかかりません。 物凄く感謝のjQueryプラグインです。
Webサイトテンプレート
WEBサイトホームページ制作
Webサイトテンプレート

Contact

About us

ご要望に沿いながら、効果を最大限に引き出すデザインや柔軟な企画アイディアを創造することをモットーに、東京を拠点として活動を広げています。

About us

Contact

WEBサイト制作などのご質問やご依頼は、メールフォームにて承っております。
ご送付いただいてから、7営業日以内に返信いたします。
 
サイトリニューアルやキャラクター制作などをお考えでしたら、ぜひお問合せください。

Contact