SVGフィルターを使ってボタンにオリジナリティのある動きを実装するチュートリアル

サンプル

CordropsにSVGフィルターを使ってボタンにオリジナリティのある動きを実装するチュートリアルが掲載されていました。

素敵なエフェクトなので、実装方法とあわせて紹介します。

まずは、公式サイトのデモをご覧ください。

公式サイトのデモ

ボタンをクリックすると、ボタンが伸びて、独特の動きをします。

ボタンの動作にインパクトをつけたいときに活用できます。

GitHubにソースが公開されているので、実装方法を紹介したいと思います。

実装方法

今回実装する完成版のサンプルを用意しました。

まずは、GitHubの右上にある「Download Zip」からzipファイルをダウンロードします。

zipファイルのjsフォルダに入っている、「TweenMax.min.js」と「main.js」を、</body>閉じタグの直前に読み込みます。

スタイルシートとして、zipファイルのcssフォルダに入っている、「main.css」を読み込みます。

HTMLでボタンを用意します。

さらに、SVGフィルタをHTML内に記述します。<body>タグの中なら、どこでも大丈夫です。

SVGで作成したフィルタのスタイルをボタンに適用します。

以上で、サンプルの実装は完了です。

サンプル

公式サイトのデモにある、他のエフェクトについても、ダウンロードしたzipフォルダに入っているindex.htmlのソースコードを参考にして、同様の方法で実装できます。HTML内のボタン<button>とSVGフィルタ<svg>の部分を変更するだけでOKです。

参考情報

人気の記事

日本語対応の無料WordPressテーマ10選
日本語対応の無料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
2017年におすすめしたい、日本語対応の有料WordPressテーマ10選
アドセンス運用に最適なWordPressテーマ3選
アドセンス運用に最適なWordPressテーマ3選

コメント

  • Posted on
  • Updated on
  • Views 1,139