プログラミング

javascriptでシャボン玉を作る

2017年9月5日

0
0

環境

  • js
  • JS
  • Javascript
  • html
  • html5
  • ipad
  • ios

説明

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

実行

on.gif

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) /*光の濃さ*/
}

 

参考

 

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

Pocket
LinkedIn にシェア

エンジニアにおすすめできる本

Card image cap
リーダブルコード

より良いコードを書くためのシンプルで実践的なテクニック

Card image cap
Webを支える技術

HTTP,URI,HTML,そしてREST

Card image cap
誰でもPythonで作れる

儲かるAIとソフトウェアの作り方

Card image cap
プログラマが知るべき97のこと

現場で使える実践哲学のマスターピース

Card image cap
情熱プログラマー

時代を超えて。ソフトウェア開発者の幸せな生き方

Card image cap
アジャイルサムライ

プログラミング達人開発者への道

Card image cap
Rubyを作った男 まつもとゆきひろ

コードの世界 スーパー・プログラマになる14の思考法

  • この記事を書いた人
  • 最新記事

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-プログラミング

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.