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

      2015/04/09


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

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

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


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


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

snowparticle.jsの使用方法




snowparticle.3.js


↑こちらをクリックしてみてください!


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

対応ブラウザ

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

使用しているJavaScript


(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;}'+
 [email protected] 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);

「設置したいけどサーバーが無い!」という方向け


↓こちらの記事の「Google codeで外部jsファイルを読み込む」を参考にしてください。

アメブロのタイトルと記事の下に各種SNSボタンを設置する方法|ichitaso's back of flyer


Bloggerでのデータファイル置場に関する検証と考察 - ログろいど


こちらも参考になりますよ。でわでわ!

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でWillFeelTipsをフォローしよう!



  関連記事

nginx
高速Webサーバー構築!さくらVPS nginxでのWordPress設定方法とレンサバ3社の読込速度を比較

3/14に新しくレンタルサーバを借りまして、Google BloggerからWo ...

Server
無料で広告無し!WordPressも設置できるレンタルサーバー『wkey.me』

通常レンタルサーバーとなると、一ヶ月いくらなど有料となりますが、今回紹介するサー ...

centos-nginx-phpmyadmin
CentOS 6にnginxとphpMyAdmin最新バージョンをサクッとインストールする方法

レンタルしているVPSサーバーを引っ越す必要があったので、今後も簡単に移設できる ...

iPhone4S
Blog記事作成の参考に!Youtubeの埋め込みでHD再生とiPhoneで再生時に横画面表示させる方法

ブログで記事を作成するときに、Youtubeなどの動画を使って紹介すると、画像だ ...

WordPressなどのブログで自分のサイトがはてブされた時に通知される設定方法

はてなブックマークは、自分のためにブックマークしておくだけではなく、コメント(ブ ...

 - Blogger, WordPress