バーガーメニューなどアニメーションで切り替わるボタンを生成できる「Transformicons」

バーガーメニューのアニメーションはCSSでも作れますが、「Transformicons」ではメニューからローディングアニメーションまで、生成したコードをコピペするだけで簡単に設置できちゃいます。後からCSSでボタンをアレンジすることも可能です。

Transformicons


メニュー
グリッド
追加
メニュー
ローディング
  • loading

使い方は「Builder」ページより、作成したいアイコンを選択して「Build」ボタンをクリックするだけです。HTML・CSS/Sass・JavaScriptのコードが生成されますので、コードをコピペして使用すればOKです。

ただこのコードのJavascriptではアニメーションが動作しない…。「Documentation」ページに記載してる.add(class名)を追加して動作しました。

Java
<script>出力したJSコード</script>
<script>transformicons.add(".tcon");</script>


PICK UP
RELATED POSTS
  • ビューポートなどで要素の可視性を検出できる「Emergence.js」
  • Flickrでクリエイティブ・コモンズの写真を無料で使用する
  • コピペするだけで使えるCSSボタンジェネレーターまとめ
  • パーツを組み合わせるだけで簡単にHTMLを生成できる「Stitches」
  • 画像に3Dブラーのホバーエフェクトを掛けられる「tiltfx.js」
  • イメージを見ながら学べるCSS GRIDのチートシート「GRID」
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
  • 無料で使えるおしゃれな英語の筆記体フリーフォントまとめ
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年6月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア