CSS animation day5 となりました。
1日1 qiita はなかなか大変です。
本日は、雨を表現したいと思います。
#1. 完成版
#2. なぜ rain か？
流体デザインが流行ると思っており、そのデザインがなぜ素敵かを考えたき、流体の動きが、自然界の動きと似ているからだと考えました。
つまり、自然を感じるものとデザインとの相性は良いわけと思いました。
今後病院の中に、アートや animation を取り入れる際に、雨とか雲とか、木々の葉っぱが風で揺れる感じなどを表現できれば、患者さんや職員が癒されると考えました。
そういうえば、先日、テレビに出ました。
あいつ今何してる？という番組です。
看護師でvvvvを駆使している、メディカルデザインエンジニアの吉岡さんにご協力いただき、病院にデジタルアートを取り入れたことが取材されました。これからも、今後の医療界のために、お互い切磋琢磨して、励んでいきます。
病院の外来診察室にて
#3. 参考文献
https://www.youtube.com/watch?v=QtL_w61ovCc
#4. 分解してみる
❶.
まずは、雨の画像を入手します。
こちら が良さそうです。
会員登録して、雨の素材を入手します。
❷. では、コードを書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="rain">
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-color: black;
}
.rain {
height: 100vh;
background: url('../img/rain.png');
}
夜の景色に雨が振りました。
❸.
アニメーションを設定します。
.rain {
height: 100vh;
background: url('../img/rain.png');
animation: rain 0.3s linear infinite;
}
@keyframes rain {
0%{
background-position: 20% 100%;
}
100%{
background-position: 0% 0%;
}
}
ポイントは
background-position
背景画像の初期位置を、background-positionで設定することで、雨が動きます
値が2つの構文を使って、X, Yの位置をずらすことができます。
❹.
最後に、雷を設定しましょう。
.rain:before{
content: '';
position: absolute;
width: 100%;
height: 100%;
background: #fff;
animation: lightening 4s linear infinite;
opacity: 0;
}
@keyframes lightening {
0%{
opacity: 0;
}
10%{
opacity:0;
}
11%{
opacity: 1;
}
14%{
opacity:0;
}
20%{
opacity:0;
}
21%{
opacity:1;
}
26%{
opacity:0;
}
100%{
opacity:0;
}
}
完成しました。
こういう一見すごそうな動画も、分解してみるとなんてことはない技術の、重ね合わせでできるんですね。
ではまた〜