takeuchi

動きのあるハンバーガーボタンを、さっと実装できる「Transformicons」

Mobile でハンバーガーボタンはよく見かけますが、
ちょっとアニメーションをつけたりするのは意外と時間がかかるものです。

 

そこで、ご存知の方も多いかもしれませんが、
今回ご紹介するのは「Transformicons」

 

1. サイトにアクセス「Transformicons

・『builder』を押して、buildの設定をします。

 

2. 好きなアイコンを選択

・『Output』メニューから、簡単設定
出力形式を指定するだけ
Style → CSS or Sass 、 JavaScript → Minified or Unminified

 

3.『BUILD』ボタンを押せば、あっという間にソースが出力されます

このソースをそれぞれコピペ、反映し

<script>transformicons.add('.tcon')</script>

別途こちらの記述で動きます。
ボタンのアニメーションとは別にJavaScriptで開閉するアコーディオンの設定と
絡めて実装すれば使えそうですね。

 

以上で簡単にアニメーション付きのボタンが簡単に実装できます。

 

新しいウェブ体験を作ろう TAMのPWA開発
お問い合わせはこちら