• 前の記事
• 次の記事

上記のように hover すると、クルリとアニメーションするボタンエフェクトを、サンプルとして作成する工程を解説します。
解説上は単純な『丸いアニメーション』ですが、アイデア次第では、かなりイイ感じのボタンエフェクトを作成することが出来るのではないかという提案です。

svg

サンプルでは直径 20px の円形(circle)1つと、矢印を表現している直線(path)2本で構成されています。
実際の記述は下記になります。
この circle で記述された円形を、マウスホバー時にクルリとアニメーションさせます。

<svg class="circle20" width="20" height="20">
    <circle cx="10" cy="10" r="9"></circle>
    <path d="M 5.25 10.5 L 14.5 10.5 L 10.875 8.375"></path>
</svg>

2行目で円形を定義しています。
cx で円の中心 x座標、cy で円の中心 y座標、r で円の半径をそれぞれ定義します。
この場合のsvg は縦横 20px のエリアですので、結果エリアいっぱいに円が絵画されます。
※外周線 1px が加算されます

3行目で直線2本を定義しています。
例：M 5.25 10.5 アルファベットは曲線や直線などのタイプ属性、その後の数値はそれぞれ x座標・y座標です。

html

<ul class="c-pagination">
    <li class="c-pagination-item">
        <a href="#" class="c-button c-button-svgReverseDirection">前の記事</a>
    </li>
    <li class="c-pagination-item">
        <a href="#" class="c-button">次の記事</a>
    </li>
</ul>

下記のように javascript にて任意の class を持った要素に、ズバっと svgタグが代入されるようにモジュール化しておくと、コーディング時には同じボタンエフェクトを入れたいボタン要素に、class 付与するだけで適用されます。
それと svg を使用しているので、拡大・縮小してもジャギらないという特性から、大きさの調整が容易で、画像のように何パターンも用意することなく、1つの svg で大抵対応可能となります。
具体的には css(transform) で大きさは調整できます、さらに線の色・太さは css(stroke) で調整可能ですので、汎用性も結構高いですね。

結果的にコーディング作業も捗りますし、管理する際もラクになります。

$(".c-button").append('<svg class="circle20" width="20" height="20"><circle cx="10" cy="10" r="9"></circle><path d="M 5.25 10.5 L 14.5 10.5 L 10.875 8.375"></path></svg>');

css

svg の表示設定

.c-button .circle20{
    fill:transparent;
    stroke:#333;
}
.c-button .circle20 circle{
    stroke-dasharray:63;
    stroke-dashoffset:0;
    transition:all .75s ease;
}

2・3行目で svg の線・塗を指定しています。
6行目では svg の破線間隔を指定しています。
7行目では svg の破線開始位置を指定しています。
8行目では svg 可変時のディレイ・イージングを指定しています。

6・7・8行目の指定が、やや謎に思われるかもですが・・・この破線設定などのおかげでアニメーションがイイ感じになります。
stroke-dasharray:63; 63px 間隔で実線と線が無い部分が設定されます。
※63px は直径 20px の円周長(20 × 円周率)
stroke-dashoffset:0; 実践部分から絵画されます。
transition:all .75s ease; 要素に変更があった場合、0.75秒かけてイージングされます。
css にてアニメーションさせる場合は『animation』プロパティを使用するのが一般的ですが、マウスオン・アウト時に途切れずにアニメーションさせたいので『ディレイ・イージング』を使用しています。

アニメーション設定

.c-button:hover .circle20 circle{
    stroke-dashoffset:126;
}

通常時 stroke-dashoffset:0; で設定されている svg破線開始位置を、上記のようにボタンホバー時に stroke-dashoffset:126; を設定しているため、transition:all .75s ease; の設定の関係性から、結果的に【0.75秒かけて絵画されている円がクルリと消えて、また表示される】という動きになります。

svg の矢印の向きを変える

もちろん左右セットで svg を用意しておくという方法もありますが、ブッチャケ面倒です…
コーディング・更新管理をラクにする という大義名分を振りかざしつつ、怠慢なコーダー目線の観点から、css でチャチャっとヤッツケようぜぃ って思ったので☟これ。

.c-button-svgReverseDirection .circle20{
    transform:rotate(180deg) scale(1, -1);
}

transform の rotate・scale を設定(scale にマイナス値を与える)することで、結果的に 反転表示 させることが出来ます。(これって結構知らない方が多いような気がしますw)

おまけ

まとめ

今回のテーマは、あくまでも『svg を使ってボタンエフェクトを作成しよう』ですが、javascript を利用してのモジュール化や、同じソースコードで、逆向きの矢印を表示させるなどの、ちょっとした一手間でコーディング速度や、更新管理性向上を行っております。
なんせスーパーラクしたい派なので、こういう知恵だけは回る私です٩(๑❛ᴗ❛๑)۶