炭酸入浴剤なシュワワな泡あわの JavaScript で寒さも和らぐほっこりと!

湯、ゆ、yu な JavaScript
「ゆっ!」ってことでお風呂をイメージ!温泉(♨)のマークのが良かった?

はじめに!

湯船が気持ち良い季節になりましたね!炭酸系の入浴剤(バブとかきき湯)を入れて入ると炭酸ガスの効果で血行がよくなるとかならないとか…!たまに使ってみると新鮮ですよねw

泡でシュワワ!

去年も同じ時期に「まるでサイダーみたい!炭酸飲料みたいに気泡が上がってく JavaScript でシュワワのアワワ!」って記事を書いていまして、スクリプトはそちらの使い回しだったりします。少し改修したりカスタマイズはしています!

ってことで視覚的にほっこりして行っていただけたらと思います〜!\(^o^)/

ほっこり!

湯&泡の JavaScript
お風呂で炭酸系入浴剤を使ったイメージな JavaScript : actyway

PC 用にデモページを用意しましたので、スマホからだとかなり重いと思います。(泡の数が100個なのさ)ぜひ PC から見てみてください!冬のお風呂の入浴剤をイメージして暖色の背景にしてみました!本当はもっと黄色よりにしたかったんですが、泡が目立ちにくくなる為にこの色になりましたw

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
/* 泡のスクリプトのお風呂バージョン */
(function(w, d, b) {
	var h = w.innerHeight,
	u = d.documentElement.scrollTop || b.scrollTop,
	e = u - 10,
	z = 9999,
	i = 0,
	p = 0,
	t = new Array(),
	l = new Array(),
	y = new Array(),
	s = new Array(),
	g = new Array(),
	c = new Array(),
	q = d.createElement('div'),
	css = '.bubble{'+
		'position:absolute;'+
		'background:rgba(255,255,255,0.2);'+
		'border-radius:8px;'+
		'box-shadow: 0 0 1px 2px rgba(255,255,225,0.3);'+
		'}'+ 
	'.bubble::after{'+
		'content:"";'+
		'display:block;'+
		'height:4px;'+
		'width:4px;'+
		'border-radius:2px;'+
		'background:rgba(255,255,255,0.4);'+
	'}';
 
	q.innerHTML = '<style>'+ css +'</style>';
	q.id = 'bubbleparticle';
	b.appendChild(q);
	q = d.getElementById('bubbleparticle');
	b.style.overflowX = 'hidden';
 
	/* スクロールとリサイズ時のイベント */
	d.addEventListener('scroll', function() {
		u = d.documentElement.scrollTop || b.scrollTop;
	}, false);
	w.addEventListener('resize', function() {
		u = d.documentElement.scrollTop || b.scrollTop;
		h = w.innerHeight;
	}, false);
 
	/* 泡用の div を100個用意 */
	for (i = 0; i < 100; i++) {
		var m = d.createElement('div');
		m.id = 'awa' + i;
		t[i] = Math.random() * (h + u) + u; /* 泡の発生位置、top */
		l[i] = Math.random() * w.innerWidth; /* 泡の発生位置、left*/
		p = Math.random() * 8 + 6; /* 泡のサイズ */
		m.setAttribute('style', 'z-index:' + (z + i) + ';top:' + t[i] + 'px;width:' + p + 'px;height:' + p + 'px;left:' + l + 'px;');
		m.setAttribute('class', 'bubble');
		q.appendChild(m);
		y[i] = Math.random() * 25 + 0.1; /* ゆらぐ最大値 */
		s[i] = Math.random() * 5 + 3.5; /* 上昇速度最大値 */
		g[i] = d.getElementById('awa' + i);
		c[i] = 0;
	}
 
	/* 泡をアニメーションさせるループ */
	setInterval(function() {
		for (i = 0; i < 100; 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 - 16;
				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);
})(window, document, document.body);

css や 泡の数(上記では100になっています、2カ所あります。)を変更してお使いください!

特定の要素を避けたいな!

湯&泡の JavaScript(特定の要素を避ける)
お風呂で炭酸系入浴剤を使ったイメージな JavaScript 特性要素を避けるバージョン : actyway

いつも実用性がないスクリプトばかり書いてるのですが、今回は特定の要素のエリアの幅は避けて、泡が上がって来ない様にしています。サイトで使っていただくのに、文章の上に泡が上がってくると文字が読みにくい!ってケースを想定しています!

「yu」のボックスの幅を特定して避ける様にしています。泡が二手に分かれている感じになってますね!へへんw

JavaScript!

変更点は主に「setLeft()」って関数が追加になっていて、この関数が良い位置を返してくれています!

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/* 泡のスクリプトのお風呂バージョン2 */
(function(w, d, b) {
	var h = w.innerHeight,
	u = d.documentElement.scrollTop || b.scrollTop,
	e = u - 10,
	z = 9999,
	i = 0,
	p = 0,
	o = 0,
	n = 0,
	t = new Array(),
	l = new Array(),
	y = new Array(),
	s = new Array(),
	g = new Array(),
	c = new Array(),
	q = d.createElement('div'),
	css = '.bubble{'+
		'position:absolute;'+
		'background:rgba(255,255,255,0.2);'+
		'border-radius:8px;'+
		'box-shadow: 0 0 1px 2px rgba(255,255,225,0.3);'+
		'}'+ 
	'.bubble::after{'+
		'content:"";'+
		'display:block;'+
		'height:4px;'+
		'width:4px;'+
		'border-radius:2px;'+
		'background:rgba(255,255,255,0.4);'+
	'}';
 
	q.innerHTML = '<style>'+ css +'</style>';
	q.id = 'bubbleparticle';
	b.appendChild(q);
	q = d.getElementById('bubbleparticle');
	b.style.overflowX = 'hidden';
 
	/* 特定の要素(ID:yu)の幅を特定 */
	o = d.getElementById('yu').offsetLeft;
	n = o + d.getElementById('yu').offsetWidth;
 
	/* スクロールとリサイズ時のイベント */
	d.addEventListener('scroll', function() {
		u = d.documentElement.scrollTop || b.scrollTop;
	}, false);
	w.addEventListener('resize', function() {
		u = d.documentElement.scrollTop || b.scrollTop;
		h = w.innerHeight;
		o = d.getElementById('yu').offsetLeft;
		n = o + d.getElementById('yu').offsetWidth;
	}, false);
 
	/* 特定の要素の位置を避けた数値を返す */
	function setLeft(){
 
		/* 特定要素より左側の数値を返す */
		if(Math.round(Math.random() * 1)){
			return Math.random() * o;
 
		/* 特定要素より右側の数値を返す */
		} else {
			return Math.random() * (w.innerWidth - n) + n;
		}
	}
 
	/* 泡用の div を100個用意 */
	for (i = 0; i < 100; i++) {
		var m = d.createElement('div');
		m.id = 'awa' + i;
		t[i] = Math.random() * (h + u) + u; /* 泡の発生位置、top */
		l[i] = setLeft(); /* 泡の発生位置、left*/
		p = Math.random() * 8 + 6; /* 泡のサイズ */
		m.setAttribute('style', 'z-index:' + (z + i) + ';top:' + t[i] + 'px;width:' + p + 'px;height:' + p + 'px;left:' + l + 'px;');
		m.setAttribute('class', 'bubble');
		q.appendChild(m);
		y[i] = Math.random() * 25 + 0.1; /* ゆらぐ最大値 */
		s[i] = Math.random() * 5 + 3.5; /* 上昇速度最大値 */
		g[i] = d.getElementById('awa' + i);
		c[i] = 0;
	}
 
	/* 泡をアニメーションさせるループ */
	setInterval(function() {
		for (i = 0; i < 100; 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 - 16;
				l[i] = setLeft(); /* 泡の発生位置、left */
			}
			t[i] = t[i] - s[i];
			g[i].style.top = t[i] + 'px';
			g[i].style.left = l[i] + 'px';
			c[i]++;
		}
	}, 45);
})(window, document, document.body);

泡の避けが甘いと感じましたら、「setLeft()」関数内ので10程度足し引きしてみてください。
スクリプトは改変、配布ご自由に!\(^o^)/

追記(20131201):早速「Design Color」にて、この特定の要素を避ける泡の JS を使っていただけました!記事本文のエリアを避ける様にされています。文章が読みやすくなったと感想をいただけました!

ほぼひとりごと

今回も月末にドタバタと余裕無く記事書きました>< 1月にはマシになるかな〜? もう少しお風呂っぽく演出を凝ってみたかったんですけど、妥協しまくりくりくりでした…!

もともと、この泡のスクリプトは去年に彩さんの「Design Color」用に記事を書きました。なんと!うれしい事に長い期間に渡って使い続けていただけています。設置するのでしたらこちらの「とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 | Design Color」の記事も見てみてください!個人的には「やまなし」のサンプルの感じが好きですw

今年ぱくさんは何てコメントくれるかな〜?w(去年のコメントはこちら

追記(20131201):今年はちょうどビールフェスのサイトを作られていたそうで、タイミング的によろしかったみたいです!偶然w 泡のスクリプトも使っていただけるそうで完成が楽しみです!\(^o^)/

記事のご紹介!

[¢]デザイナーがjavascriptに恋をするとシュワ×2なプラグインができる【Sparkling.js】

@i_saku39 さんがこの記事見て1から JavaScript を書かれたみたいです!泡部分は画像で表示されています。Sparkling.js って名前つけられていて、デモだとシャンパンみたいなイメージに感じましたよ〜!ライセンスは MIT で jQuery 非依存とのことです。