CSS animation で遊び倒す　- wave ver.2-

Posted at 2019-01-24

CSS animation day4 となりました。
本日は、波を表現したいと思います。

day2 でも波を表現しましたが、いまいち個人的にデザインが納得していないため、

再挑戦したいと思います。

#1. 完成版

#2. なぜ Waveか？
前回の記事をご参照ください。
(流体デザインを用いた SPAに取り入れるためです。)

#3. 参考文献
こちらです。
Youtube　には、こうした動画がいくつも乗っており、大変勉強になってます。

#4. 分解してみる
　
❶.
まず、波を作ります。
今回はsketch でなく、無料で登録してサクサク使える Figmaで書きます。　

だがしかし、デザイン初心者の私が

ベジェ曲線をうまく書けるわけない〜〜〜

いきなりは、無理でしょ、これ
こちらをみながら、練習し、作りました。　

　
1時間練習の成果：

2時間格闘した成果:

波が3つできました。では、このpng画像を画面に表示します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <section>
        <div class="wave">
        </div>
    </section>
</body>
</html>

styles.css

body{
    margin: 0;
    padding: 0;
}

section{
    width: 100%;
    height: 100vh;
}

.wave{
    position: absolute;
    width:100%;
    height: 165px;
    bottom: 0;
    left: 0;
    background: url('../img/wave1.png');
    background-size: cover;
}

でました。

❷. 次に、動かします。　

styles.css

.wave{
    position: absolute;
    width:100%;
    height: 165px;
    bottom: 0;
    left: 0;
    background: url('../img/wave1.png');
    background-size: cover;
    animation: animate 10s linear infinite;
}

@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background-position: 1193px;
    }
}

なんか変な形の波が一つあります。。
気にしないでおきます

ポイントは2つあって、
・background-size :cover
ダウンロードした画像の縦横比はそのままで、背景をちゃんと覆う最小サイズになるように設定されていること。

・background-position: 1193px;
これは、画像のwidth を設定することです。　

❸. 画像を2つのせ、アニメーションを設定する

styles.css

.wave:before{
    content: '';
    position: absolute;
    width:100%;
    height: 165px;
    top: 0;
    left: 0;
    background: url('../img/wave2.png');
     background-size: cover;
    opacity: 0.4;
      animation: animate-reverse 10s linear infinite;
}

@keyframes animate{
    0%{
        background-position: 0;
    }
    100%{
        background-position: 1193px;
    }
}

@keyframes animate-reverse{
    0%{
        background-position: 1193px;
    }
    100%{
        background-position: 0;
    }
}

ポイントは、2つ
・animate-reverse で逆に動かすことと
・background position を逆に設定し、でてくる2つの画像を左右逆に、設定する。

❹. 画像3つ目をアニメーションで設定する。 1つ目と同じ方向に、ゆっくり進むように設定する　

styles.css

.wave:after{
    content: '';
    position: absolute;
    width:100%;
    height: 165px;
    top: 0;
    left: 0;
    background: url('../img/wave3.png');
    background-size: cover;
    opacity: 0.4;
    animation: animate 20s linear infinite

ついに、完成しました。　

え、何か言いたいことがあるって？　

・・・　

波が変な形で、微妙ですね！　

ベジュ曲線、曲者です！練習します〜
ではまた〜

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

CSS animation で遊び倒す - wave ver.2-

CSS animation で遊び倒す　- wave ver.2-