WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

雪を降らせることができるsnowparticle.js

f:id:mmmmofu:20161130134517p:plain

こちらからお借りしました。
actyway.com

jQueryに依存していない
PC用とスマホ用がある

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Snow Particle</title>
  <script>
    (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('js/snowparticle.1.js');
      }else{ /* iphone と Android の場合 */
        ins('js/snowparticle.smart.1.js');
      }
    })(navigator.userAgent,document,document.getElementsByTagName('script')[0]);
  </script>
  <style>
    body{
      width: 100%;
      height: 100%;
      background: #000;
      overflow: hidden;
    }
  </style>
</head>
<body>

</body>
</html>

jsを読みこむと動作する。
JSの中身は以下のようになっています。

/* snowparticle.1.js */
(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[i]+'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);

関連記事

mmmmofu.hatenablog.com