水中っぽいアニメーションをCSSとjQueryで作ってみる

最近なんだか暑いので、気分だけでも涼もうということで水中っぽい、泡が出るアニメーションを作ってみた。

はじめに

実は泡が出るアニメーションはすでに多数存在する。ただ自分が表現したいものとは違っていたので、既出のものを参考にしながら作ってみた。

水中を表現しよう

水中は絵でもグラデーションで表現することが多い。海藻や魚があれば別だが、個人的には青一色だとのっぺりした印象になり、水中だと認識しにくい。

しかしグラデーションをかけるだけで、不思議なことに水中っぽくなる。青系統の色を使って、上に明るい色、下に暗い色を配置するだけだ。2色だと物足りなかったので、今回は3色使い、斜めにグラデーションがかかるようにした。

コードはこんな感じ。CSSだけでできる。この時、htmlとbodyの幅と高さを指定しないと一面に表示されないので注意。

html, body {
 width: 100%;
 height: 100%;
 margin: 0;
}

body {
 background: -moz-linear-gradient(top right, #94ffe8, #3498db, #08009c); 
 background: -webkit-linear-gradient(top right, #94ffe8, #3498db, #08009c); 
 background: linear-gradient(to bottom left, #94ffe8, #3498db, #08009c);
}

泡を出そう

水中といえばやはり泡。泡の見た目をCSSで作り、アニメーションをjQueryで実装した。

アニメーション

jQuery(document).ready(function($){
 var bArray = [];
 //泡のサイズの配列
 var sArray = [6,8,10,12];

 //泡が出る幅の範囲計算
 for (var i = 0; i < $('body').width(); i++) {
   bArray.push(i);
 }

 //配列からランダムに値を出す関数
 function randomValue(arr) {
   return arr[Math.floor(Math.random() * arr.length)];
 }

 setInterval(function(){
   //泡のサイズをランダムに選定
   var size = randomValue(sArray);

   //body内のランダムな場所に泡を配置
   $('body').append(
     '<div class="bubble" style="left: ' + randomValue(bArray) + 'px; 
     width: ' + size + 'px; height:' + size + 'px;"></div>'
   );

   //5秒かけて下から上に泡が上るようにし、不透明度を下げる。上まで上った泡は取り除く
   $('.bubble').animate({
     'bottom': '100%',
     'opacity' : '-=0.7'
   }, 5000, function(){
     $(this).remove()
   });

   //0.35秒ごとに泡を発生させる
 }, 350);

});

CSS

.bubble {
 position: absolute;
 border-radius: 100%;
 border: 1px solid #fff;
 bottom: 1px;
}

完成

最後に文字も追加し、HTMLとCSSを追記して完成だ。
出来上がったものはこんな感じ。文字は水中エフェクトを作りたいと思うきっかけになった、好きな曲名を入れてみた。

最後に

泡の量を増やしたり、泡の見た目を変えたり、方向を変えたりしていろいろなエフェクトを作れそうだと思った。今思いつくだけでも、炭酸水、雪などに応用できそうだ。

参考

CSSのグラデーション（linear-gradient）の使い方を総まとめ！