Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS】水滴落下、からの透過波紋

 どうも!LSSです!!

 

little-strange.hatenablog.com

に少し手を加え、水滴が水面に落ちてそこに波紋が広がる、というものにしてみました。

サンプルとコード、そして「LSSがコード改変した手順を長々と」書いています。

 

 

水滴落下、からの透過波紋

 

 

 

コード

<style>
@keyframes trwavea{
0%{background-size:20px 10px,100% 100%,100% 100%;}
95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;}
0%{background-position:50% -100%,50% 50%,0 0;}
100%{background-position:50% 50%,50% 50%,0 0;}
}
.trwave{
height:210px;
background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side,#6666bb,#8888ff 100%);
background-repeat:no-repeat;
animation:trwavea 3s linear infinite;
}
</style>
<div class="trwave"> </div>

 

【CSS】(トリッキーな方法で)透過波紋! - Little Strange Software

からの追加・変更箇所を赤太字にしています。

 

 

コード改変の流れ

まず、元の「透過波紋」は、

  • 「下敷きグラデーション」と「部分透過した波紋グラデーション」の2枚を重ねて表示。
  • 「部分透過した波紋グラデーション」だけをアニメーションで拡大。

というものでした。

 

そこに「波紋が始まる前に水面に落下する水滴」を追加するとしたら…

  • 更にもう一枚の「水滴」を上に重ねて表示。
  • 波紋が広がり始めるのが「アニメーション開始時」で、広がりきったのが「アニメーション終了時」、そしてアニメーションは infinite 指定で無限に繰り返される事から「アニメーション終了時にちょうど水滴が水面に着水するようにすれば、次の回のアニメーションでそこから波紋が広がる」という事になります。
  • 水滴の着水店は、枠のちょうど中央(波紋の開始位置)「50% 50%」の位置。
  • なので水滴は「表示位置が『50% 0%(またはそれより小さいマイナス値)』から『50% 50%』まで変化する」ようなアニメーションにすれば良さそうです。

と、ここまで考えてから作り始めました。

 

まず、「位置」をアニメ対象にするため、前回は「background-size」をkeyframes内で変化させていましたが「background-position」もkeyframesの中に入れる事になります。

 

まずは、とりあえずbackground-positionの指定をkeyframes内に移動し、0%と100%にコピペします。

background-position:50% 50%,0 0;



@keyframes trwavea{
0%{background-size:100% 100%,100% 100%;}
95%,100%{background-size:2000% 2000%,100% 100%;}
0%{background-position:50% 50%,0 0;}
100%{background-position:50% 50%,0 0;}
}

 

この時点で一度プレビューし、元のままの動きである事を確認します。

 

 

次に、「水滴」のイメージを追加します。

background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(中略),
radial-gradient(中略);

という感じで、background-imageにカンマ区切りで並べているところの一番最初に追加しました。

 

そして、「background-size」「background-position」もまた、元々2つのグラデーションイメージに対して個別指定していたので、同様に指定を追加する必要があります。

 

それらはkeyframes内に記述しているので、

@keyframes trwavea{
0%{background-size:20px 10px,100% 100%,100% 100%;}
95%,100%{background-size:20px 30px,2000% 2000%,100% 100%;}
0%{background-position:50% -100%,50% 50%,0 0;}
100%{background-position:50% 50%,50% 50%,0 0;}
}

同様にカンマ区切りで先頭に付け足しました。

 

あと、ついでにサイズを
「最初は 20px 10px(横20 縦10)」
「最後は20px 30px(横20 縦30)」
と縦長に変化するという細かい事を入れてたりします(ほぼ分かりませんがw)

 

移動については
「最初は50% -100%(横位置は中央、縦位置は枠の上辺より更に1枠高さ分上の位置)」
「最後は50% 50%(枠中央)」
という指定にしています。
この「-100%」を、「-200%」などにすると移動距離が延びる(ほとんど枠外で見えませんが)事から水滴の落下速度が速くなります。

 

 

あとがき

「なんとか、divタグ1つだけで、backgroundを駆使して色々やってみる」という挑戦なので、これはもう「複数のdivタグを駆使したほうが使い勝手の良いものが作れそう」なところにきていますw

 

ブログ仲間の のんべえさん(id:whisky-coke)が、また別の方法で「透過波紋に水滴を追加」されていて、そちらの方が見ごたえのあるものになっていますので、あわせてご覧ください^^

whisky-coke.hatenablog.com

 

 

おまけ:波紋の色変更

【CSS】(トリッキーな方法で)透過波紋! - Little Strange Software

も、今回のもそうなんですが、波紋の色に「濃い暗い色」を指定しています。

この色は、

background-image:
radial-gradient(farthest-side,#7777ee 60%,#7777ee00 100%),
radial-gradient(farthest-side,#8888ff 5%,#8888ff00 6%,#8888ff 7%,#8888ff00 8%,#8888ff 9%,#8888ff00 10%,#8888ff 11%,#8888ff00 12%,#8888ff 13%),
radial-gradient(farthest-side,#6666bb,#8888ff 100%);

この#6666bbで指定した色となっており、ここを変更するだけで波紋の色が変わります。

 

例えばこの色を「水面の色#8888ffよりは明るい色」の#aaaaffにすると、

 

こうなります。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^