夕暮ログ

C#やJavascript、最近はAndroidなんかも好きなtinqのブログ。「夕暮れログ」

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

雪を降らせるスクリプトsnowparticle.2.jsをちょっと改造して使ってみた

寒さが厳しくなってきました。
雪とは縁が遠い静岡県民ですが、ブログに雪を降らせてみました。

こちらのスクリプトを使わせていただきました。PC用のsnowparticle.2.jsです。
クリスマスに使いたい!雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway

この手のスクリプトはドラッグや全部選択をすると雪が選択状態になり、青い四角がぱらぱらと落ちてきたりするようになってしまうものが多いです。そういうのはあまり好きではないのですがこのスクリプトではCSSのみを使っているので反転状態になることはありません。


そのままだと白背景に隠れてしまって少し残念なので、少しばかり改造してみました。


//元のプログラム(25行目付近)
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;box-shadow: 0 0 2px 2px rgba(255,255,225,0.3);left:'+l[i]+'px;');

//改造後
var color = "rgba(" + (255 - Math.floor(Math.random() * 20)) + "," + (255 - Math.floor(Math.random() * 20)) + "," + (255 - Math.floor(Math.random() * 20)) + ",0.8)" ;
m.setAttribute('style','position:absolute;z-index:'+(z+i)+';top:-'+t[i]+'px;width:'+p+'px;height:'+p+'px;background:'+ color + ';border-radius:8px;box-shadow: 0 0 2px 2px '+ color +';left:'+l[i]+'px;');



乱数で微妙に色をずらして、ほのかに色をつけています。
*20のところを調整すればもっと濃い色も出るようになります。
ただ、あんまり濃いとしつこすぎるので注意。20でも濃いなーと思う人は15とかに調整するといいと思います。

CSSの雪もいいですが、もう何年も本物の雪を見ていない気がするので静岡も今年は少しは雪が降ってほしいものです。
でも、雪がかすかにでもふると交通が大混乱になるんですよね・・・
スポンサーサイト

ホーム

プロフィール

tinq tinq(もしくはTinqWill)

Sky  For   Every 改装予定

プログラミングお勉強中の高校生。月一くらいは更新したい

最新記事

カテゴリ

月別アーカイブ

検索フォーム

最新コメント

リンク

最新トラックバック

FC2Ad

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。