まるでサイダーみたい!炭酸飲料みたいに気泡が上がってく JavaScript でシュワワのアワワ!

泡でシュワワ!
素敵だったのでキャプチャ使わせていただいてます〜!

炭酸ちゃうよ!JavaScriptだよ!

JavaScript の説明に行く前に事の経緯を書きます!
少しだけお付き合いくださいませ!

前回、「雪の JavaScript」の記事を書きましたところ Twitter 経由でかわいいとか綺麗とか声をいただけました。そして実際に設置していただいてありがとうございまーす!

その中で、Design Color の彩さんから雪の JavaScript を実装したいと言っていただけました。

Design Color http://designcolor-web.com/

でも Design Color と言えば海で、サイトの90%は海で出来ています状態で、わたしは「海の中で雪はないんちゃう」と思ったのですが、「雪ぜひぜひ使ってくださーい!」とか返答しちゃってるんです!!(疲労と寝不足で頭回ってない)

… 反省。
の後に気泡が上がって行く JavaScript を書きました。

「この場で bubbleparticle.2.js を使う!」のリンクはブックマークレットでもあるので、ブックマークバーなどにドラッグして保存してもお使いいただけると思います。

追記:Design Color で実装していただけました!やったね!

http://designcolor-web.com/2012/12/18/bubbleparticle/
とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 | Design Color

なんと記事まで書いていただけました!特にサンプルが印象的で泡とマッチしてると思いました。流石デザイナーさん!ありがとうございます〜m(__)mペコリ

以下 JavaScript の内容でーす。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
(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++){
		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;
		g[i] = d.getElementById('awa'+i);
		c[i] = 0;
	}
	setInterval(function(){
		for(var i=0;i<50;i++){
			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);
})(document,document.body,window);

前回の snowparticle.2.js をベースに変更しました。設置方法などは 雪の JavaScript の記事を参照してみてください。改変再配布ご自由に!

追記(20131201):このスクリプトの「改良版の記事」を書いています。そちらもどうぞ!

すしぱくさんの勝手なイメージ

とか妄想しましたw(冬なのでシュワワな泡は寒いってニュアンス)
え?これですか?これは日頃のしk

願望叶って本人による本物ツイート!
@susipaku さんは、サラッと毒吐くイメージあるけどそれに嫌味がなくて、思わず笑ってしまうんですよね〜w

susi-paku.com 楽しければいいのです

そんな素敵なすしぱくさんのブログはこちら!
今年一年もお世話になったなーとしみじみw

追記だよ!(2015/10/22)

実際に導入して使っていただいた事例をご紹介!
ありがたい事にこの泡の JavaScript は公開して随分経つにも関わらず最近導入したと教えていただきました。過去にも教えていただいた事はあったのですがその都度追記しておけばよかった、と後悔しつつも追記しています。

http://chavachava.web.fc2.com/
chitose ebihara portfolio

最近 Web 業界に入るべく学校を卒業された海老原さんが卒業制作で作られたポートフォリオ。海をテーマにされた素敵なデザイン、泡のアニメーションのアレンジや人魚&魚の動きに細かいこだわりを感じます。