CSS animation day7 となりました。
ちょっとはCSS animation に慣れてきましたが、まだ底なし沼の感じがあります。
本日は、雲を表現したいと思います。
#1. 完成版
See the Pen WPwxXJ by hiroya iizuka (@hiroyaiizuka) on CodePen.
#2. なぜか？
雲を取り入れることで、サイトに厳粛な印象を漂わせたり
不思議で魅力的な感じを表現することができます。
有名な素敵なwebサイトですが
こういうデザインは、みるものを本当に魅了しますね！
#3. 参考文献
youtube
雲をこちらからダウンロード
#4. 分解してみる
❶.
では、画面に雲を出しましょう。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="cloud"></div>
</body>
</html>
styles.css
body{
margin: 0;
padding: 0;
background: #090a0f
}
.cloud{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
background: url('../img/clouds.png');
background-size: cover;
}
ポイントは1つ
・background-size :cover
ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されます。
❷.
雲を動かす
styles.css
.cloud{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
background: url('../img/clouds.png');
background-size: cover;
animation: cloud 60s linear infinite;
}
@keyframes cloud{
0%{
background-position: 0px;
}
100%{
background-position: 5440px;
}
}
ポイントは2つ
・animation の動く時間(60s) はゆっくりの方が、厳かな感じが出そうです。
・background-position
100% の設定に、画像の横幅のサイズを書くことで、画像上を左から右までフルに動きます
❸.
逆方向に流れるゆっくり目の雲を追加します。
styles.css
.cloud:before{
content: '';
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%;
background: url('../img/clouds.png');
background-size: cover;
opacity:0.9;
animation: cloud-reverse 120s linear infinite;
}
@keyframes cloud-reverse{
0%{
background-position: 5440px;
}
100%{
background-position: 0px;
}
}
このテクニックは、wave2 と同じで
逆方向に、ゆっくりなアニメーションを、右から左に流す表現方法です。
画面にさらなる立体感が出て、パララックスの動きと似てますね。
背景を変えたり、月を添えたり、星をつけたり
いろんな表現を追加するともっと素敵になりますね。
本日は以上です〜