WordPressブログはじめてみる?

サイトを一気に冬仕様にする!JavaScriptでサイト全体に雪を降らせる方法

ちょっと時期的に遅いエントリーかもしれませんが、サイト全体に雪を降らせる方法をメモ的に共有しておきますね。

多分いろいろ方法があると思うんですが、今回はJavaScriptを使用。 DEMOも公開しておきます!

1.下記のコードをコピーして任意の名前で外部ファイル作成

[code lang=”js”]/* Snowfall jquery plugin
version 1.2, Dec 20 2009
Developed by Jason Brown for any bugs or questions email me at loktar69@hotmail
info on the plugin is located on Somethinghitme.com

values for snow options are

flakeCount,
flakeColor,
flakeIndex,
minSize,
maxSize,
minSpeed,
maxSpeed

Example Usage :
$(document).snowfall({flakeCount : 100, maxSpeed : 10});

-or-

$(‘#element’).snowfall({flakeCount : 800, maxSpeed : 5, maxSize : 5});

-or with defaults-

$(document).snowfall();
*/

(function($){
$.fn.snowfall = function(options){

var element = this;

// random fuction for generating random vals
random = function random(min, max){
return Math.round(min + Math.random()*(max-min));
}

// snow flake class
function Flake(_x, _y, _size, _speed)
{
// Flake properties
this.id = flakeId;
this.x = _x;
this.y = _y;
this.size = _size;
this.speed = _speed;
this.step = 0,
this.stepSize = random(1,10) / 100;

var flakeMarkup = "<div id=’flake-" + this.id + "’ style=’width: " + this.size + "px; height: " + this.size + "px; background: " + options.flakeColor + "; position: absolute; top: " + this.y + "px; left:" + this.x + "px; font-size: 0px; z-index: " + options.flakeIndex + ";’></div>";

if($(element).get(0).tagName === $(document).get(0).tagName){
$(‘body’).append(flakeMarkup);
}else{
$(element).append(flakeMarkup);
}

this.element = document.getElementById(‘flake-‘ + this.id);

// Update function, used to update the snow flakes, and checks current snowflake against bounds
this.update = function(){
this.y += this.speed;

if(this.y > (elHeight) – 6){
this.reset();
}

this.element.style.top = this.y + ‘px’;
this.element.style.left = this.x + ‘px’;

this.step += this.stepSize;
this.x += Math.cos(this.step);

if(this.x > (elWidth) – 6 || this.x < 6){
this.reset();
}
}

// Resets the snowflake once it reaches one of the bounds set
this.reset = function(){
this.y = 0;
this.x = random(0, elWidth);
this.stepSize = random(1,10) / 100;
this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;
this.speed = random(options.minSpeed, options.maxSpeed);
}
}

// plugin vars
var flakes = [],
flakeId = 0,
i = 0,
elHeight = $(element).height(),
elWidth = $(element).width(),
defaults = {
flakeCount : 35,
flakeColor : ‘#ffffff’,
flakeIndex: 999999,
minSize : 1,
maxSize : 3,
minSpeed : 2,
maxSpeed : 3
},
options = $.extend(defaults, options);

// Bind the window resize event so we can get the innerHeight again
$(window).bind("resize", function(){
elHeight = $(element).height();
elWidth = $(element).width();
});

// initialize the flakes
for(i = 0; i < options.flakeCount; i+=1){
flakeId = i;
flakes[i] = new Flake(random(0,elWidth), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed));
}

// this controls flow of the updating snow
function snow(){
for( i = 0; i < options.flakeCount; i += 1){
flakes[i].update();
}

setTimeout(function(){snow()}, 30);
}

snow();
};
})(jQuery);[/code]

snowfall.jquery.jsなど適当に名前をつけてサイトの任意のディレクトリに保存

2.jQueryを読み込ませておく

jQueryのサイトはこちらから http://jquery.com/

3.jQueryのリンクコードの下に上の外部ファイルを読みこませる。


snowfall.jqueryの部分は自身でつけた名前でOK

4.実行ファイルをの手前などに配置して、数値を変更して完了!

ちなみに数値を変えることで雪の量やスピードなどを変えれます! flakeCount: 150, 量 maxSpeed : 5, スピード maxSize : 3 サイズ ここでは「150、5、3」の部分ですね!

  • flakeCount は降る雪の量。数値が増えると量が増えます。
  • maxSpeed はその名の如くスピードの調整。数値がでかくなると早くなります。
  • maxSize は粒の大きさ。数値がでかくなるごとに粒もでかくなります。

※どれも数値を上げすぎると重くなるので注意お。 これであなたのサイトもウインターバージョンに変身ですね!試してみてくださイ♪では!

DEMOサイトへ

シェアしてくれたらうれしー。
ABOUT US
矢野キチ
フリーランスのWEB屋です。このブログでは「自由に生きる」をテーマに生活の中で思ったことをザクザク書いていきます。身体的特徴としては目が細いので、ゴミがあまり目に入らないので人生得しています。

このサイトで使っているWordPressテーマ
「STORK19」

当ブログはWordPressを使用して作られています。そしてデザインテンプレートはSTORK19を使用しています。

2件のコメント

いきなりすいません、とあるサイトでその方が伝言板 にコメントしたあとの伝言板に雪が 降っていてその方のコメントはこ うなっていて、色々調べたところJav ascript 外部 読み取りでやっている ようです、私も同じ用に雪を降らし たいのですがどのようにしたらいい でしょうか。 本当いきなりで申し訳のですが宜しければお願いします。

実際に掲示板を見てみないとわからないのですが、urlはわかりますか?できればTwitterか何かで連絡いただけると助かります。@logic3code

モバイルバージョンを終了