ブログやサイトに雪やら色々降らせるJqueryプラグイン「snowfall」の設置

【この記事を読むのに必要な時間は約 5 分です。】

前回、JavaScriptだけで雪を降らせる「Snowstorm」をクリスマスシーズンなので、ブログやサイトに雪を降らせるSnowstormを設置してみたで紹介した。
今回は、雪に限らず何でも降らせる事ができるJqueryプラグイン「Snowfall」(現在のバージョンは1.6)を紹介する。安定のぼっちのクリスマスシーズンに是非、期間限定で利用してみよう。

Snowfallのダウンロード

Snowfallのホームページ

こちらが、「Snowfall」のホームページ。「Download Jquery Snowfall 1.6」をクリックして、ダウンロードする。
ダウンロードファイル:JQuery-Snowfall-master .zip

1snowfall

GitHubのSnowfallのページからもダウンロードできる。右下の「Download ZIP」をクリックして、ダウンロードする。
ダウンロードファイル:JQuery-Snowfall-master .zip

3github_snowfall

利用方法

必要ファイルとサーバーへのアップロード

ダウンロードしたJQuery-Snowfall-master .zipファイルを解凍する。今回必要なファイルは、snowfall.jquery.jsだけ。これをサーバーにアップロードする。
なお、画像を利用して表示する場合は、画像ファイルもアップロードする。

通常Jqueryプラグインのjsファイルは圧縮版を利用するが、圧縮版のsnowfall.min.jquery.jsファイルが画像ファイルに対応していないので、通常版のsnowfall.jquery.jsファイルを利用する。

ライブドアブログでのアップロード方法は、当ブログのサイト作成>ライブドアブログの記事の中にJqueryプラグインファイルや画像ファイルのアップロードについて説明があるので参考にして欲しい。

設置方法

基本的にヘッダー部分(<head>~</head>の間)への記載だけである。

Jquery本体と「Snowfall」プラグインの呼び出し

ヘッダー部分(<head>~</head>の間)に、いつものように、Jquery本体と「Snowfall」プラグインを呼び出す設定をする。
Jquery本体はGoogle AJX APIのホスティングを利用し、「Snowfall」はアップロード先から呼び出す。以下のように記載する。

ヘッダー部分への記載

<!-- Jquery本体ホスティングここから -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- Jquery本体ホスティングここまで -->
<!-- snowfall.js -->
<script type="text/javascript" src="(http://から始まるsnowfall.jquery.jsのアップロード先URLを記載)"></script>
<!-- /snowfall.js -->

カスタマイズのための記載

ヘッダー部分(<head>~</head>の間)に、上記Jquery本体と「Snowfall」プラグインの呼び出しに続けて記載する。

画像ファイルを使用する場合

画像ファイルを使用する場合は、以下のように記載する。

<!-- snowfall.js setting -->
<script type="text/javascript">
$(window).load(function(){
    $(document).snowfall({
    	image:"(http://から始まる画像ファイルのアップロード先URLを記載)",
    	minSize:8,     //好みで最小の大きさを指定
    	maxSize:15,    //好みで最大の大きさを指定
    	flakeCount:80, //表示数
    	minspeed:2,    //最小落下速度
    	maxSpeed:5});  //最大落下速度
});
</script>
<!-- /snowfall.js setting -->

画像ファイルを使用しない場合

画像ファイルを使用しない場合は、以下のように記載する。

<!-- snowfall.js setting -->
<script type="text/javascript">
$(window).load(function(){
    $(document).snowfall({
    	flakeColor:"#ffffff", //色を指定
    	round:true,   //丸くする、丸が嫌ならfalseを入れる
    	shadow:false,  //影をつける、影を付けたければtrueを入れる
    	minSize:1,     //好みで最小の大きさを指定
    	maxSize:8,    //好みで最大の大きさを指定
    	flakeCount:80, //表示数
    	minspeed:2,    //最小落下速度
    	maxSpeed:5});  //最大落下速度
});
</script>
<!-- /snowfall.js setting -->

特定の記事やカテゴリーだけに「Snowfall」を適用したい場合は、WordPress 特定のカテゴリーや投稿記事に特定(複数)のheader.phpを割り当てる方法を参考にして欲しい。

注意事項

このjavascriptは、Jqueryプラグイン「snowstorm」同様、CPUの稼働率が高くなるので、常時設置しないほうが良いと思う。
クリスマスシーズン限定で楽しもう。

画像について

今回、利用している画像については、ぷらすぶろぐさんの今年も安定のシングルXmasだからワードプレスに雪を降らすからお借りした。ありがとうございます。

DEMO

現在、お正月も過ぎて雪を降らせていないので、こちらにデモ画面だけ用意しておく。
デモ画面
以上

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。

コメント

  1. Private Kv より:

    Hi there, I found your web site by the use of Google while searching for a comparable matter, your web site came up, it looks great. I’ve added to favourites|added to bookmarks.