環境

js
JS
Javascript
html
html5
ipad
ios

説明

側ネイティブの会社の受付アプリを作っていてリッチなアニメーションが欲しかったです。下記の記事を参考にjシャボン玉を作って見ました。驚くほど簡単で大変素晴らしいスクリプトだと思いました。

実行

html

<html>
<head>
  <script src="bubbleparticle.2.jsのURL"></script>
</head>
<body>
</body>
<html>

javascript

(function(d,b,w){
  var q = d.createElement('div');
  q.innerHTML = '<style>html,body{overflow-x:hidden;}.bubble{position:absolute;background:rgba(255,255,255,0.1);border:thin solid rgba(255,255,225,0.3);border-radius:8px;box-shadow: 0 0 1px 1px rgba(255,255,225,0.2);}'+
  '.bubble::after{content:"";display:block;height:3px;width:3px;border-radius:2px;background:rgba(255,255,255,0.2);}</style>';
  q.id = 'bubbleparticle';
  b.appendChild(q);
  q = d.getElementById('bubbleparticle');
  var h = w.innerHeight;
  var u = d.documentElement.scrollTop || b.scrollTop;
  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;},false);
  for(var i=0;i<50;i++){//【1】泡の量を指定
    var m = d.createElement('div');
    m.id = 'awa'+i;
    t[i] = Math.random()*h+u;
    l[i] = Math.random()*w.innerWidth;
    var p = Math.random()*8+6;
    m.setAttribute('style','z-index:'+(z+i)+';top:'+t[i]+'px;width:'+p+'px;height:'+p+'px;left:'+l[i]+'px;');
    m.setAttribute('class','bubble');
    q.appendChild(m);
    y[i] = Math.random()*25+0.1;
    s[i] = Math.random()*5+0.5;//【2】泡の上昇速度
    g[i] = d.getElementById('awa'+i);
    c[i] = 0;
  }
  setInterval(function(){
    for(var i=0;i<50;i++){//【1】泡の量を指定
      if(u<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+h-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);//【3】繰り返しまでの数値
})(document,document.body,window);

css

/* ------ 泡（大きいマル）のスタイル ------ */
.bubble{ 
  position:absolute;
  background:rgba(255,255,255,0.1);/*泡の色・濃さ*/
  border:thin solid rgba(255,255,225,0.3);/*線の色・濃さ*/
  border-radius:8px;/*丸み*/
  box-shadow: 0 0 1px 1px rgba(255,255,225,0.2);/*泡の光彩（外側）*/
}

/* ------ 光（小さいマル）のスタイル ------ */
.bubble:after{ 
  content:"";
  display:block;
  height:3px;/*光の高さ*/
  width:3px;/*光の幅*/
  border-radius:2px;/*丸み*/
  background:rgba(255,255,255,0.2) /*光の濃さ*/
}

参考

ここら辺の本を読んで、めっちゃ勉強になりました、ブログって簡単にわかるけど、深い部分で基礎が結構抜け落ちてたりするんだよね… 基礎の徹底は、良いエンジニアの基本なので、ここら辺を横着するか否かで将来のエンジニア人生も大きく変わる。なので、こういう本はしっかり読もうと思います。（お勧めなので、是非勝ってみればいいと思います :)）

<br />

OFF.TOKYO：プログラミング課題を抱えてる人を助けるWebブログ

javascriptでシャボン玉を作る

環境

説明

実行

html

javascript

css

参考

関連