Transformicons

3本線がXになったりする、動きのあるボタンを生成できるTransformiconでサイトメニューを作ってみた

2015.2.22 (更新日:2016.03.02)
Transformicons

Lifehackerで動きのあるボタンが簡単に作れる「Transformicons」というのが紹介されていたので、早速試してみました。

動きのあるボタンというのは3本線が☓に変化したりする、アレです。

Dream_Seed

試しにこのサイトの左上に仕込んでみました。

Transformicons_Builder

使い方は至って簡単。

まず自分で利用したいアイコンをチェックしてスライドを緑色にします。

Transformicons_Builder 2

あとは、Buildという赤いバーを押せば、CSSやHTML、Javascriptなどが出力されます。

Markupに出力されるのは、そのままボタンを表示したい位置に記述するHTMLです。

StylesはCSSですね。Sassで出力することも可能です。

JavaScriptは圧縮したバージョンと人が読める形の圧縮なしでも出力可能。通常は圧縮版でいいと思います。このJavascriptは「transformicons.js」という名前で保存しアップロードしておきます(実際には名前はなんでもいいですけど)。

ここまでは非常に簡単なのですが、この先についてはあまり具体的な説明がなく、躓く人も多いんじゃないかと思います。

一応、Documentationというページに説明があるのですが、HTMLとCSSは説明不要だと思います。

Javascriptは、下記のような感じで読み込みます。

<script src="site/js/transformicons.js"></script>
<script>transformicons.add('.tcon')</script>

これだけで、ボタンをクリックするとアニメーションが働きます。

ただ、これだとアニメーションするだけで特に何かが起きるわけではありません。ここから例えばメニューが展開したりといったことをするにはjQueryなりで別途機能を追加する必要があります。

Clickイベントでメニューを表示したり非表示にしたりするぐらいならあちこちでサンプルが見つかると思うので、たいして難しくはないのですが。

このへんの動きまで含めてコードを生成してくれると楽なんですけどねぇ、誰か作らないかな?

(via lifehacker)

タグ: , , ,

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

BenQ Wit

BenQの目に優しいデスクライトWiTは子供の勉強机で使うには理想的かもしれない【AD】

会社を辞めてから、特に予定がない場合はほとんどの時間を机に向かって過ごしているのですが、さすがに最近目の疲れが気になりだしてきました。 昼間はまだいいのですが、特に夜が顕著でディスプレイを見ながら手元

kumihimo1

「君の名は。」のあの組紐が劇中イメージそのままに本物の組紐として製品化

興行収入が200億円を超え、邦画史上歴代2位となった映画「君の名は。」に登場する重要アイテム、あの組紐が商品化されました。 なんちゃって組紐ではなく、国産正絹100%でちゃんと組紐として作られています

projectfield1

カードゲームが進化するかも? Sonyがスマートフォンと連動する新ハード「Project FIELD」を発表

Sonyが100%子会社の株式会社フォワードワークスを設立、スマートフォンと連動する新ハード「Project FIELD」を発表しました。 Project FIELDは見た通り板状のハードで、ここに専

SmartWatch 3

SonyのSmartWatch 3が公式ストアで9,880円に値下がり コストコでは8,980円

SonyのAndroid Wearスマートウォッチ、SmartWatch 3 SWR50がコストコで8,980円(税込)で販売されていました。 売っていたのはコストコの幕張店。 もともと2万円近い価格

IIJmio

IIJmioのコストコ限定パッケージはデータ容量39GB増量特典付き

IIJmioはAmazon限定で3か月間4GB(合計12GB)を増量したり、BIC SIM限定で事務手数料1円+1GBを12か月間増量というキャンペーンを行っていますが、コストコ限定で39GB増量とい

SonyのSmartWatch 3が公式ストアで9,880円に値下がり コストコでは8,980円

SonyのSmartWatch 3が公式ストアで9,880円に値下がり コストコでは8,980円

SonyのAndroid Wearスマートウォッチ、SmartWatch 3 SWR50がコストコで8,980円(税込)で販売されていました。 売っていたのはコストコの幕張店。 もともと2...

Pebble Time 2、Pebble Coreはキャンセルされ、返金が行われるとのこと(追記あり)

Pebble Time 2、Pebble Coreはキャンセルされ、返金が行われるとのこと(追記あり)

FitbitによるPebbleの買収の話が出ていますが、これにより開発中だったPebble Time 2、Pebble Coreはキャンセルされるという話をBloombergが伝えています。 関...

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEI Mate 9の詳細レビュー 5.9インチだけど片手で楽に持てるサイズ感

HUAWEIの最新モデル、HUAWEI Mate 9を購入したので早速レビューです。 まだ1ShopmobileやExpansys、GearBestなどのECサイトには入荷していなかったので、今回...

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

スマホの画面をテレビに出力できるMiracast(ミラキャスト)の使い方

名前だけは聞いたことはあるものの、使っている、活用しているという話をあまり聞かないMiracast(ミラキャスト)、どんなものかと思って実際に使ってみました。 ...

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

honor 8の詳細レビュー HUAWEI P9やZenfone 3と比較してみました

上位機種のHUAWEI P9と同等のスペックを持つhonor 8の詳細レビュー。HUAWEI P9やASUS ZenFone 3と比較しながら紹介します。...

MENU

back to top