棒グラフに視線を集めるアニメーション表現

アニメーション

くりちゃんと言います。

今回は棒グラフにちょっとしたアニメーションを加えて、視線を集めるテクニックを紹介したいと思います。

完成品

DEMO

コードについて解説

では、コードについて解説していきたいと思います。

コードがこちら↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>graph_animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bar__bg">
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation01">
                <div class="bar bar--animation01"></div>
            </div>
        </div>
    </div>
</body>
</html>
@charset "utf-8";
body{
    background-color: #333;
}
.bar__bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 980px;
    margin: 0 auto;
    padding: 30px;
    background-color: #51aeb3;
}
.bar__wrapper01{
    position: relative;
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
    border-color: #e1e1e1;
    line-height: 30px;
}
.bar__wrapper02{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    border-radius: 3px;
}
.bar__wrapper02--animation01{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
@keyframes bar-bg{
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
.bar{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 32px 32px;
    border-radius: 3px;
    animation: bar-bg-move 1.2s linear infinite;
}
.bar--animation01{
    width: 90%;
    background-image: linear-gradient(-45deg, #4072B3 25%, #6088C6 25%, #6088C6 50%, #4072B3 50%, #4072B3 75%, #6088C6 75%, #6088C6);
}
@keyframes bar-bg-move{
    0% {
        background-position: -32px 0;
    }
    100% {
        background-position: 0 0;
    }
}

CSSの部分について詳しく解説していきますね。

まず一番外枠(.bar__wrapper01)にボックスシャドウを使って内側に影をつけて、100%の状態の時を表現しています↓

box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.07);

次に中の部分(.bar)です。まずanimationのプロパティを一定間隔で無限に繰り返すように設定します。

animation: bar-bg-move 1.2s linear infinite;

次に斜めのストライプ柄をつくります。

background-image: linear-gradient(-45deg, #4072B3 25%, #6088C6 25%, #6088C6 50%, #4072B3 50%, #4072B3 75%, #6088C6 75%, #6088C6);
}
background-size: 32px 32px;

background-image: linear-gradient()を使用して、ボーダーを作り、それを45度傾けます。background-size:()を32pxに指定しておくと、ボーダーを繰り返して表示してくれます。

animationのプロパティ がこちら↓

@keyframes bar-bg-move{
    0% {
        background-position: -32px 0;
    }
    100% {
        background-position: 0 0;
    }
}

background-position:()を32pxずつ動かしています。 background-size:()を32pxに指定しているので、非常に滑らかな動きをしてくれますね。

最後に全体のコードものせておきます↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>graph_animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="bar__bg">
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation01">
                <div class="bar bar--animation01"></div>
            </div>
        </div>
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation02">
                <div class="bar bar--animation02"></div>
            </div>
        </div>
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation03">
                <div class="bar bar--animation03"></div>
            </div>
        </div>
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation04">
                <div class="bar bar--animation04"></div>
            </div>
        </div>
        <div class="bar__wrapper01">
            <div class="bar__wrapper02 bar__wrapper02--animation05">
                <div class="bar bar--animation05"></div>
            </div>
        </div>
    </div>
</body>
</html>
@charset "utf-8";
body{
    background-color: #333;
}
.bar__bg{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 980px;
    margin: 0 auto;
    padding: 30px;
    background-color: #51aeb3;
}
.bar__wrapper01{
    position: relative;
    width: 100%;
    height: 30px;
    margin-bottom: 20px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: inset 0px 0px 15px 0px rgba(0, 0, 0, 0.07);
    border-color: #e1e1e1;
    line-height: 30px;
}
.bar__wrapper02{
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-size: 32px 32px;
    border-radius: 3px;
}
.bar__wrapper02--animation01{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}
.bar__wrapper02--animation02{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.1s forwards;
}
.bar__wrapper02--animation03{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.2s forwards;
}
.bar__wrapper02--animation04{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.3s forwards;
}
.bar__wrapper02--animation05{
    animation: bar-bg 1.5s cubic-bezier(0.165, 0.840, 0.440, 1.000) 0.4s forwards;
}
@keyframes bar-bg{
    0%{
        width: 0%;
    }
    100%{
        width: 100%;
    }
}
.bar{
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-size: 32px 32px;
    border-radius: 3px;
    animation: bar-bg-move 1.2s linear infinite;
}
.bar--animation01{
    width: 90%;
    background-color: #6088C6;
    background-image: linear-gradient(-45deg, #4072B3 25%, #6088C6 25%, #6088C6 50%, #4072B3 50%, #4072B3 75%, #6088C6 75%, #6088C6);
}
.bar--animation02{
    width: 80%;
    background-color: #EEF9FF;
    background-image: linear-gradient(-45deg, #AAD6EC 25%, #EEF9FF 25%, #EEF9FF 50%, #AAD6EC 50%, #AAD6EC 75%, #EEF9FF 75%, #EEF9FF);
}
.bar--animation03{
    width: 75%;
    background-color: #8CD790;
    background-image: linear-gradient(-45deg, #77AF9C 25%, #8CD790 25%, #8CD790 50%, #77AF9C 50%, #77AF9C 75%, #8CD790 75%, #8CD790);
}
.bar--animation04{
    width: 70%;
    background-color: #EE817B;
    background-image: linear-gradient(-45deg, #FCECEA 25%, #EE817B 25%, #EE817B 50%, #FCECEA 50%, #FCECEA 75%, #EE817B 75%, #EE817B);
}
.bar--animation05{
    width: 55%;
    background-color: #fff;
    background-image: linear-gradient(-45deg, #fff 25%, #333 25%, #333 50%, #fff 50%, #fff 75%, #333 75%, #333);
}
@keyframes bar-bg-move{
    0% {
        background-position: -32px 0;
    }
    100% {
        background-position: 0 0;
    }
}

まとめ

いかがでしたでしょうか。ただの棒グラフでもちょっとしたアニメーションを加えることで、視線を集めることができるようになります。

これからも、もっともっとおもしろい動きを見つけていきましょう。

ではまた来週~。

コメント

タイトルとURLをコピーしました