CSSとJavascriptだけのBubbleアニメ

Pocket
LINEで送る
GREE にシェア
LinkedIn にシェア

こんにちわ。
 

cssアニメは奥が深いことを、改めて理解した、下駄です。
 

とある会社のwebサイトを作った時に、水の中のイメージで泡が上っていく動画ファイルを背景に貼り付けたのが非常に印象良くできたので、
 

それをもっと軽くできないかと考えて、cssのみでBubbleアニメに挑戦してみました。
 

ただし、素のcssだけだと、ランダム座標や、いろいろなパラメータの繰り返し処理など、限界があったので、javascriptと連動することも許容しましたが、ライブラリなどは一切使っていないので、ブラックボックス無しの状態にすることができました。

ソースコード

 

 

 

解説

基本的にhtmlには、”bubble-area”というクラス名がついた器の中に、泡を発生させる仕様で、bubble.cssとbubble.jsを事前に読み込んでおく事を前提に設計しています。
 

cssでの重な内容は、
 

泡1個分のcssを作っているんですが、左右の揺れと、上に移動する処理を別々に行うために、”bubble-move”と”bubble-shake”という2つのdivを自動で作るようにしています。
 

それをjavascriptで、画面(器)の底辺にx座標をランダムで配置して、タイミングをずらして、画面上部に座標移動すると、
 

cssのトランジション処理で、泡が上に移動していくようにしています。
 

一番上まで到達した泡は、transitionendイベントを受け取って、自然に消えるようにセットしてみました。
 

泡が次から次へと生まれてきた時に、エレメントが残った状態では、そのページの処理速度が重くなるだろうと考えて、泡の最大個数を最初に表示して、その後は1個消えたら1個追加するという仕様にしています。
 

こうすることで、非常に軽い状態を保つことが可能になります。

プレビュー

See the Pen
Bubble
by YugetaKoji (@geta1972)
on CodePen.

今の所の課題

bubble-areaのサイズに応じて、スピード変更をするような値付与を考えると、どんな大きさでも安定したアニメになるので、その点は考慮してみたいですね。
 

あと、カーソルでクリックしたら、泡が弾けて消えるような機能などをつけると、ホームページで使った時にかなり面白い印象が与えられます。
 

やってみても、見てみても面白いcssアニメでした。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です