WAVEアニメーションを使ったメインビジュアル【webデザイン】

2023年1月13日

メインビジュアルに使える波型のアニメーションを紹介します。

WAVEアニメーションを使ったメインビジュアル【webデザイン】

HTML↓

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WAVEアニメーションを使ったメインビジュアル【webデザイン】</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header></header>
    <div class="hero">
        <div class="wave_top">
            <div></div>
        </div>
        <h1>wave animation </h1>
        <div class="wave_bottom">
            <div></div>
        </div>
    </div>
    <footer></footer>
</body>
</html>

CSS↓

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    background: #333333;
}
header{
    height: 10vh;
    width: 100%;
    background: #ffffff;
}
.hero{
    height: 80vh;
    width: 100%;
    position: relative;
}
h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    text-transform: uppercase;
    font-size: 3em;
    letter-spacing: 2px;
}
.wave_top{
    position: absolute;
    width: 100%;
    height: 36px;
    top: 0;
    left: 0;
}
.wave_top > div{
    width: 100%;
    height: 100%;
    background: url(top_wave1.png);
    background-size: 1365px 36px;
    animation: wave .7s linear infinite;
}
.wave_bottom{
    position: absolute;
    width: 100%;
    height: 36px;
    bottom: 0;
    left: 0;
}
.wave_bottom > div{
    width: 100%;
    height: 100%;
    background: url(top_wave1.png);
    background-size: 1365px 36px;
    transform: rotate(180deg);
    animation: wave .7s linear infinite;
}
footer{
    height: 10vh;
    width: 100%;
    background: #ffffff;
}
@keyframes wave {
    0%{
        background-position: 0px 0px;
    }
    100%{
        background-position: -227.5px 0px;
    }
}

HTMLの解説

　　　<div class="hero">
        <div class="wave_top">
            <div></div>
        </div>
        <h1>wave animation </h1>
        <div class="wave_bottom">
            <div></div>
        </div>
    </div>

bodyを外枠にして、その中に<headr><.hero><footer>の3つのボックスを作成しています。今回のメインは<.hero>のボックスになります。

<.hero>のボックスの中に、波となるボックスを上下に配置します。今回はCSSで画像を差し込むので<div>タグをそれぞれに挟んでいます。

CSSの解説

波の配置

.wave_top{
    position: absolute;
    width: 100%;
    height: 36px;
    top: 0;
    left: 0;
}
.wave_top > div{
    width: 100%;
    height: 100%;
    background: url(top_wave1.png);
    background-size: 1365px 36px;
    animation: wave .7s linear infinite;
}

画像の親要素となる、.wave_topと.wave_bottomのheightを36pxに設定します。これは好きな高さに設定して構いません。

画像を差し込むdivのbackground-sizeを幅1365px、高さ36pxに指定します。この高さは親要素の高さと一緒にする必要があります。幅がなぜ1365pxかと言うと、波の画像の元々のサイズが2730px×72pxなので、等倍で高さ36pxにしたときの幅が1365pxになります。ですので、使う画像によってここの数値が変わってきます。

これで波の画像のセッティングは完了です。

アニメーション

@keyframes wave {
    0%{
        background-position: 0px 0px;
    }
    100%{
        background-position: -227.5px 0px;
    }
}

波のセッティングができたらあとはアニメーションの設定をして終わりです。最初のbackground-positionを親要素(.wave_top)の左上に固定します。最後のbackground-positionをX軸方向にだけ-227.5px分動かします。この227.5は使っている波の画像の一回分の幅になります。今回使っている画像の波の数は6つなので1365割る6で227.5pxの計算になっています。これがinfiniteで永遠ずれ続けることでアニメーションを再現しています。

.wave_bottomの波はtransform:rotate(180deg)で垂直方向に回転させるだけで設定できます。