クリスマスに使いたい!雪のパーティクルをチラチラ降らす JavaScript を作ってみよー

Snow Particle
雪やーこんこん!霰やこんこん!ついでに風邪でこんこん!

インスピレーション大切!

www.tutsgeek.com

最近お気に入りでよく見させていただいている、Tutstgeek さんにて素敵なスクリプトが公開されていましたので、それに感化されて同じ様な物を作ってみました!Tutstgeek さんは Dress Cording@Rochas さんに教えていただきました。m(__)mペコリ<アリガトウゴザイマース!!

Jquery Christmas Snow Animation Effect

Jquery Christmas Snow Animation Effect – Tutsgeek.com

こんな感じで雪がパラパラと上から降ってくるスクリプトです。DEMO を開いて見てみてくださいね〜!確かこういう系のスクリプトを去年の今頃にも作りたいと思っていた事を思い出しましたw

動作確認したブラウザ!

動作確認済みブラウザ

今回は PC 向けに3種類、スマホ向けに2種類用意してみました。

PC 向けは、モダンなブラウザの最近のバージョンであれば問題なく動くと思います。動作確認は Mac の Chrome 23.0.1271.95、Firefox 17.0.1、Safari 5.1.7、Opera 12.11 でのみ確認しました。IE は知りません、IE は知りませーん、多分動かない?

追記:IE9 と IE10 で動作すると教えていただきました!

スマホ向けは、手持ちの Android 2.3.6 の標準ブラウザと iOS シュミレーターの Safari のみ。

「この場で snowparticle.1.js を使う!」みたいな感じで、その場でスクリプトを実行出来るようにしていますが、スマホから PC 向けのスクリプトは重いので実行しない方が良いと思います。このリンクはブックマークレットにしてあるのでブックマークバーにドラッグしてお好きなサイトでもお使いいただけます、たぶんw

サイトでご利用になる場合は JavaScript ファイルをダウンロードしてそれをあなたのサーバーにアップロードして使う様にお願いします。たまに無断の上に直リンで使われていたりしますが、外部の JavaScript ファイルを読み込む事によるリスクをちゃんと把握された上でやられた方が良いですよ?特に会社や商売をされているのなら尚更。

PC 向けスクリプト書いたよ!その1

snowparticle.1.js

まずベーシックな感じを心がけました!
チラチラ降ってくるよ!かわいいですよね〜w

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
(function(d,b,w){
	var q = d.createElement('div');
	q.id = 'snowparticle';
	b.appendChild(q);
	q = d.getElementById('snowparticle');
	b.style.overflowX = 'hidden';
	var h = w.innerHeight;
	var u = d.documentElement.scrollTop || b.scrollTop;
	var e = u+h+10;
	var p = 10;
	var z = 9999;
	var t = new Array();
	var l = new Array();
	var y = new Array();
	var s = new Array();
	var g = new Array();
	var c = new Array();
	d.addEventListener('scroll',function(){u = d.documentElement.scrollTop || b.scrollTop;e = u+h+10;},false);
	for(var i=0;i<50;i++){
		var m = d.createElement('div');
		m.id = 'yuki'+i;
		t[i] = Math.random()*-h+Math.random()*(h/2)+u;
		l[i] = Math.random()*w.innerWidth;
		m.setAttribute('style','position:absolute;z-index:'+(z+i)+';top:-'+t[i]+'px;width:'+p+'px;height:'+p+'px;background:rgba(255,255,255,0.8);border-radius:8px;left:'+l+'px;');
		m.setAttribute('class','snow');
		q.appendChild(m);
		y[i] = Math.random()*25+0.1;
		s[i] = Math.random()*5+0.5;
		g[i] = d.getElementById('yuki'+i);
		c[i] = 0;
	}
	setInterval(function(){
		for(var i=0;i<50;i++){
			if(e>t[i]){
				if(y[i]>=c[i]){
					l[i] = l[i]+0.5+Math.random()*0.5;
				}else{
					l[i] = l[i]-0.5-Math.random()*0.5;
				}
				if((y[i]*2)<=c[i]){
					c[i] = 0;
				}
			}else{
				t[i] = u-10;
				l[i] = Math.random()*w.innerWidth;
			}
			t[i] = t[i]+s[i];
			g[i].style.top = t[i]+'px';
			g[i].style.left = l[i]+'px';
			c[i]++;
		}
	},45);
})(document,document.body,window);
  • 大雑把な流れは、2〜18行目で変数とか定義して、19〜31行目で div を50個作ってスタイルを指定して、32〜52行目は50個の div を繰り返し動かして(揺らぎながら落下)います。
  • 19行目、一応スクロール監視してウィンドウの今表示されているエリアに降らすようにしています。
  • 24行目、div にスタイル指定しています。雪は画像を使っていません、border-radius で丸くしているだけです。
  • div はウィンドウ上部内外から表示されて、下にパラパラと落下してウィンドウ外に出たら top を指定して上に移動させています。
  • Math.random() で乱数を多用しているのは、極力不規則な動きになる様にしてみました。
  • 雪の数を増減させたい場合は 19、33行目の for() の 50 を変更してみてください。50 はちょっと多いかも?(小さくするとCPU負荷は減ります)
  • 落下速度を早めたい場合は、28行目の5の値を6とか7とか大きめに。遅くしたい場合は、4とか3に。
  • 52行目の setInterval の繰り返しまでの数値は45と若干余裕を持たせています、30、20と小さくするとCPUに負荷はかかりますが動作は機敏になります。滑らかに見えるかも?
  • 余談:最初 document.body.scrollHeight でページ全体に降らしてたのですが、雪50個だと少なすぎだったので見えてる範囲内ループに変更しました。

PC 向けスクリプト書いたよ!その2

snowparticle.2.js

先程の snowparticle.1.js は雪の縦横のサイズは 10px 固定だったのですが、こちらはランダムにサイズ指定してるので大きさが変動します!あとは style に box-shadow を追加してぼかし有りにしています。ちょっとナチュラルな印象ですよね?わたし的にはこっちの方がかわいいかなーとw(snowparticle.1.js より少し CPU の負荷が増してると思います。)

PC 向けスクリプト書いたよ!その3

snowparticle.3.js

先程の snowparticle.2.js の box-shadow を keyframes 使ってアニメーションにしてみました!これは実用向きではありませんが、幻想的な雰囲気がかなりあって素敵ですよ〜!CPU を結構使うので重いです。が、しかーし見るのはオススメ!ブックマークレットでダークな背景のサイトとかで使うとうっとりなりますw ね!ね!

スマホ向けにも書いたよ!その1

snowparticle.smart.1.js

PC 向けの snowparticle.1.js をスマホ向けにスペック落として変更してみました!雪の数を20個に、雪のサイズは 7px に、落下速度は少し下げて、setInterval() の数値は50にしてみました。

スマホ向けにも書いたよ!その2

snowparticle.smart.2.js

今度は snowparticle.2.js をスマホ向けにスペック落として変更してみました!雪のサイズはランダムに小さめにしてみました。

snowparticle.3.js みたいに keyframes 使ってのアニメーション版も書こうかなと思いましたが、古い Android だとスペック悪いので動かないかなーと思ってやめました。box-shadow 使ってぼかし入れる位がギリギリかなーと。

設置方法!

使っていただける方いらっしゃるか不明ですが、一応書いておきます…w(使ってぇーーー!!w)

<html>
<head>
	<script src="snowparticle.1.jsのURL"></script>
</head>
<body>
</body>
<html>

ダウンロードした snowparticle.1.js を head で読み込む方法です。読み込み時に実行されます。jQuery とか他のライブラリは使ってないので読み込み順番は気にしなくて良いと思います。

<html>
<head></head>
<body>
 
<!-- 他のタグがいっぱいあるとして... -->
 
<script src="snowparticle.1.jsのURL"></script>
</body>
<html>

閉じ body タグ直前で読み込む方法です。こちらの方がオススメかな〜!

<html>
<head></head>
<body>
 
<!-- 他のタグがいっぱいあるとして... -->
<a href="javascript:(function(d){var s=d.createElement('script');s.charset='UTF-8';s.src='snowparticle.1.jsのURL';d.body.appendChild(s);})(document);">文字とか画像とか</a>
<!-- 他のタグがいっぱいあるとして... -->
 
</body>
<html>

アンカータグ使ってリンクにしたい場合の方法です。ブックマークレットとしても動作しまーす。イェイ!

PC とスマホで切り替えて読込む!

PC とスマートフォンで読み込むスクリプトを別々にしたい場合もあると思うのでw

1
2
3
4
5
6
7
8
(function(u,d,s){
	var ins=function(url){var j=d.createElement('script');j.src=url;s.parentNode.insertBefore(j,s);};
	if(u.indexOf('iPhone')==-1 && u.indexOf('Android')==-1){ /* iphone と Android 以外の場合 */
		ins('snowparticle.2.js とかのURLを!');
	}else{ /* iphone と Android の場合 */
		ins('snowparticle.smart.1.js とかのURLを!');
	}
})(navigator.userAgent,document,document.getElementsByTagName('script')[0]);

外部ファイル化して読み込みしても OK だし、head タグ、または閉じ body タグ直前で script タグの中に入れても良いと思いまーす。お好みで!

まとめ!

特にまとめる内容無いかもしれませんが、雪(要素数)多いせいか意外と重いもんだなーと感じました。クロスブラウザ考慮するなら div で border-radius より画像のが無難ですよね?でも画像だと若干ギザって汚く感じたので今回は(いつも)モダンブラウザで動けばいいや!で書いてみましたw 誰かが(きっと、いつか)IE対応バージョンとか jQuery 版とか書いてくれるのを期待しつつ年末なので大掃除とかにも励みまーすw

  • 要素数が多いと重い!(一応100個とかでも動くのは動く)
  • setInterval は 50ミリ秒以下に!(でも小さくすると負荷かかるょ)
  • 重くても表示したい欲求が出てしまう、雪スクリプトは素敵!魅力的!

もし設置するならブラウザの負荷とか確認しつつ、特にスペックの悪い機器の事も考慮して余裕を持たせて数値を変更させたりしてください。スクリプトはご自由にどうぞ!不具合等ありましたら @actywav までお願いします。m(__)mペコリ

設置していただきました!

ウェビメモ http://webimemo.com/

ウェビメモ@xxmiz0rexx さんが Twitter で教えてくれました!
仕事が早い!早くてビックリ!しかもウェビメモにすごくマッチしてるー!
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

クリエイティブメモメモ http://creativememomemo.com/

クリエイティブメモメモ@tihata さんにも設置していただけました!
多分?メモ帳をイメージされたデザインですっごくかわいいです!本当逆にグー!ですね〜w
あれ?今のところ「メモ」がタイトルに入ってるブログが…!(次はデザインメモメモメモさんとかw)
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

Ateitexe http://ateitexe.com/

Ateitexe@ateitexe さんにも設置していただけました!
背景が前と変わってるー!雪の結晶が入っててすっかり冬仕様に!背景が薄めなのでナチュラルで素敵です!
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

WEB屋 麗[Uruwashi] http://www.web-uruwashi.com/

WEB屋 麗[Uruwashi]@X_urara_X さんにも設置していただけましたー!
ヘッダーの牡丹の写真と背景の大きな「麗」が印象的な和風なデザインなんですが想像以上にマッチしていました!特に牡丹の上に雪がかかった時が風流な情景をイメージさせてくれるな〜と思いました!和風もいいですね!
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

冬季限定!ブログに雪を降らせるScript「SnowParticle」を設置しました

Will feel Tips@ichitaso さんにも設置していただけました!
なんと!!記事にまでしていただけみました!
背景ダークなので雪がよく映えますよね〜w
PC 向けに snowparticle.3.js を使っていただけたみたいでクリックで実行出来る様にされています!
ありがとうございまーす!m(__)mペコリ

Dress Cording

Dress Cording@Rochas_ さんにも設置していただけました!
深夜に作業っていただけたみたいで、しかし見逃しはしませーん!デザイナーさんなのでサイトデザインも上品で素敵です!
PC 向けに snowparticle.1.js を使っていただけたみたいでーす。
ありがとうございまーす!m(__)mペコリ

[み] @actyway さんのスクリプトで、みはら.comにも雪を降らせてみた | みはら.com

みはら.com@masashi_385 さんにも設置していただけました〜!
ブログ何系なんでしょ〜?幅が広そうな印象をうけました!大雑把にだと IT でしょうか?
勝手なイメージですが、ホバーでブルブルするロゴが雪っぽい印象で、ダークなヘッダーに雪が映えますね!
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

InfinityScope

https://twitter.com/mamigaku/status/278643221985374209

InfinityScope@mamigaku さんにも設置していただけました!
ロゴが四葉のクローバーっぽく印象に残るデザインで、カスタム投稿のページのみに雪降らせていただいてるみたいです!(局所的吹雪みたいな…w)
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

こさりんのぶろぐ | webとか思ったことについてブログ

こさりんのぶろぐ@cosarin さんにも!(と言うかわたしがおねだりw)
なんか前とデザイン変わってるー!特にヘッダーが!大きなロゴとマカロンがインパクトありますよね〜w
PC 向けに snowparticle.2.js を使っていただけたみたいです。
ありがとうございまーす!m(__)mペコリ

以下リンクのみ!

一旦もうリンクは追記しないと書いていたのですが、まだまだ実装していただけてるみたいなのでリンクと少なめなコメント追記して行きたいと思います。(気がついたら&徐々に)
雪のスクリプトを使ってくださってありがとうございまーす!m(__)mペコリ