#17 JavaScriptで背景に炭酸　泡の表現【ぴよぴよコーダーの開発日記】

背景に炭酸の泡を浮かべたい！とググったところ、素晴らしいです。作成された方がいらっしゃいました。

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

使い方、上記URLからbubbleparticle.2.jsをダウンロードして、読み込むだけ。

DEMO作りました。

つまずいたところは、背景色の設定方法。最初は前回のデモのように、bodyタグにグラデーションをつけてheight:100%にしていたのですが、泡が上下するとウィンドウの高さが上下して100%が取れない。。。

そこで、下記のサイトのデモを参考に、背景はposition:fixedで設定することにしました。「とっても幻想的な泡のスクリプト！実装方法やサンプルを紹介」。こちらのサイトに、泡の量や上昇速度の調整方法も書かれていて参考になりました。

position:fixedで背景を敷く方法でもスクロールバーを一番下までおろすと、泡の上下とともに、スクロールバーが自動的に上下してしまうのですが、一般的なサイトは下のほうにはフッターがあるし、そうそう下までスクロールしてガン見しないだろうと想定してみる。