【jQuery】1行でOK！雪を降らせるすごいプラグイン「jQuery-Snowfall」の使い方を紹介

アイキャッチ：jQueryプラグイン、jQuery-Snowfall

Web制作会社ではよく使用されていると思いますが、Webページに雪を降らせることができる便利なjQueryプラグイン「jQuery-Snowfall」を紹介します。

Demo

jQuery-Snowfallは雪の量や大きさ、速度など細かくオプションで指定することができるため、非常に使い勝手が良いプラグインで有名です。

先日キャンペーン用に雪を降らすLPを作成しましたので、本プラグインを紹介しようと思いました。では、使い方です。

ダウンロード
- ファイル一式
使い方
さいごに

ダウンロード

まずは、下記のGihubからPullをするか、ZIPファイルをダウンロードしてください。

GitでPullをする方はこちら。

Githubページを開く

ZIPファイルをダウンロードする方は、下記ダウンロードボタンをクリックすると、ダウンロードを開始します。

ダウンロード

ファイル一式

フォルダの中身一式

「JQuery-Snowfall-master」
　｜＿「src」
　　　　｜＿「snowfall.jquery.js」

フォルダを開くといろいろとファイルが入っていますが、「snowfall.jquery.js」のみ使用します。

使い方

それでは早速ですが、「jQuery-Snowfall」の使い方を紹介します。

Demoページはこちら。

Demo

jQueryを読み込む

// jQuery本体読み込み
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
// プラグイン読み込み
<script type="text/javascript" src="./snowfall.jquery.js"></script>

まずはjQuery本体を読み込ませた直後に、プラグインファイルである「snowfall.jquery.js」を読み込ませます。ファイルの置き場所はパスが合っていればどこでも大丈夫です。

jQueryを書く

$(function() {
  $(document).snowfall(); // この1行でOK
});

なんとこれだけでOKです。1行追加するだけで、Webページに雪を降らすことができます、簡単ですね。

さらにオプションも豊富です。

オプション指定

$(function() {
  $(document).snowfall({
    minSize  : 1,    // 雪の最小サイズ
    maxSize  : 5,    // 雪の最大サイズ
    minSpeed : 1,    // 雪の最低速度
    maxSpeed : 8,    // 雪の最高速度
    round    : true, // 雪の形を丸くする
    shadow   : true, // 雪に影をつける
    flakeColor : "#fff", // 雪の色を指定
  });
}