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

2012/12/11　21:552017/08/25　20:47

[PHOTO:BRANIMIR JAREDIC – summers gone III]

寒い時期が続いていますね。北海道も11月に雪が降ってから、すっかり根雪になってしまい、まさに冬って感じです。

ブログ読者の方の地域は、どうでしょうか？降っていない地域ですと、なんとなく季節感を感じて嬉しくなったり☆(・ω<)

というわけで、冬季限定の『Snow Particle』を設置してみましたので楽しんでもらえればと思います。

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

actyway

いつも楽しく拝見させていただいてる、「actyway」さんが素敵なものを作ってくれました。

Contents

1. snowparticle.jsの使用方法
- 1.1. 対応ブラウザ
2. 使用しているJavaScript
3. 「設置したいけどサーバーが無い！」という方向け

snowparticle.jsの使用方法

snowparticle.3.js
↑こちらをクリックしてみてください！

ブックマークレットととしても使えるので、詳しい仕様は上記「actyway」さんのサイトを参考に。

対応ブラウザ

Chrome
Firefox
Safari
Opera
IE9以降

スマホ向けもあるようですが、重くなるので設置していません。ぜひ、PCで見てみてください。

使用しているJavaScript

snowparticle.3.js

(function(d,b){

 var q = d.createElement('div');

 q.innerHTML = '<style>.snow{animation:void3 3.5s infinite;-webkit-animation:void3 3.5s infinite;-moz-animation:void3 3.5s infinite;-o-animation:void3 3.5s infinite;}'+

 '@keyframes void3{'+

 'from{box-shadow: 0 0 5px 3px rgba(255,255,255,0.3);}'+

 '60%{box-shadow: 0 0 15px 12px rgba(255,255,255,0.5);}'+

 'to{box-shadow: 0 0 3px 2px rgba(255,255,225,0.3);}'+

 '}'+

 '@-webkit-keyframes void3{'+

 'from{box-shadow: 0 0 5px 3px rgba(255,255,255,0.3);}'+

 '60%{box-shadow: 0 0 15px 12px rgba(255,255,255,0.5);}'+

 'to{box-shadow: 0 0 3px 2px rgba(255,255,225,0.3);}'+

 '}'+

 '@-moz-keyframes void3{'+

 'from{box-shadow: 0 0 5px 3px rgba(255,255,255,0.3);}'+

 '60%{box-shadow: 0 0 15px 12px rgba(255,255,255,0.5);}'+

 'to{box-shadow: 0 0 3px 2px rgba(255,255,225,0.3);}'+

 '}'+

 '@-o-keyframes void3{'+

 'from{box-shadow: 0 0 5px 3px rgba(255,255,255,0.3);}'+

 '60%{box-shadow: 0 0 15px 12px rgba(255,255,255,0.5);}'+

 'to{box-shadow: 0 0 3px 2px rgba(255,255,225,0.3);}'+

 '}'+

 '</style>';

 q.id = 'snowparticle';

 b.appendChild(q);

 q = document.getElementById('snowparticle');

 b.style.overflowX = 'hidden';

 var h = window.innerHeight;

 var u = document.documentElement.scrollTop || document.body.scrollTop;

 var e = u+h+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 = document.documentElement.scrollTop || document.body.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()*window.innerWidth;

  var p = Math.random()*8+6;

  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] = document.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()*window.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);