※当サイトの記事には、広告・プロモーションが含まれます。

Transformicons  ~Animated icons, symbols and buttons using SVG and CSS~ アニメーションするアイコンを生成

『Transfomicons』を試してみる

アイコンをクリックしたら、クリックされたアイコン自身がアニメーションするようなソースコードを自動生成してくれる『Transfomicons』。

⇩ 下記サイトへ。

Transfomicons

f:id:ts0818:20150912104943p:plain

『Builder』をクリックします。選択されると白くなります。

f:id:ts0818:20150912104945j:plain

ページが変わってアイコンの選択画面が出ます。

f:id:ts0818:20150912104944j:plain

自分の使いたいアイコンを選択します。

f:id:ts0818:20150912104947p:plain

ソースコードの形式を選択します。ソースを分析したい人は『Unminified』を選択すれば、圧縮されてない見やすいソースを生成してくれます。

f:id:ts0818:20150912104946j:plain

『BUILD』という赤いボタンをクリックでソースコードを生成してくれます。ソースを自分のファイルにペーストして完了です。

f:id:ts0818:20150912104948j:plain

スマホサイトの『ハンバーガーメニュー』でよく利用されているようです。

⇩ 『ハンバーガーメニュー』については下記サイトが詳しいです。

 

jQueryとCSS3でマテリアルデザインのハンバーガーメニューを実装してみる | Creator Clip

CSS3とjQueryで作る「開閉に合わせて×ボタンに変化させる」ハンバーガーメニュー | Creator Clip

今回はこのへんで。