メニュー

WP版キャラチョコブック

Chocobanditz ONLINE

ページトップ

ページボトム

メニュー

Chocobanditz ONLINE

閉じる

DESIGN JavaScript TIPS Webデザイン

SVG Morpheusカスタマイズ前編-SVGアイコンを使ったモーフィングを生成するJavaScript

投稿日:2015年6月30日 更新日:

SVG Morpheusカスタマイズ前編-SVGアイコンを使ったモーフィングを生成するJavaScript
SVG Morpheusは、複数のSVGアイコン間でモーフィングを生成するJavaScriptライブラリです。

SVG Morpheusカスタマイズでは、
SVG Morpheusのdemoデータを編集してオリジナルのSVGアイコンに差し替える方法を記します。

ちょっと長くなりそうなので、前編ではSVG Morpheusのスクリプトをダウンロードして、demoデータを確認するところまでです。

スポンサーリンク

SVG Morpheusのdemoデータを確認するまでの手順

目次

  1. 手順1 SVG Morpheusデモ画面の確認
  2. 手順2 SVG Morpheusスクリプトの取得
  3. 手順3 demoデータの確認

手順1 SVG Morpheusデモ画面の確認

まず最初に、複数のSVGアイコン間でモーフィングってどんなの?かデモ画面を確認してみましょう。

img01

SVG Morpheus – Morph SVG icons

上記リンク先で、アイコンから別のアイコンへと変形する様子が確認できます。

このSVGアイコンをオリジナルのSVGアイコンに差し替えて動かすことがSVG Morpheusカスタマイズ前編~後編通してのゴールです。

手順2 SVG Morpheusスクリプトの取得

SVG Morpheusのスクリプトは下記サイトで配布されています。

alexk111/SVG-Morpheus

“Download Zip”ボタンから
SVG-Morpheus-master.zipファイルをダウンロードできます。

img02

手順3 demoデータの確認

手順2でダウンロードしたSVG-Morpheus-master.zipを解凍してできるSVG-Morpheus-masterフォルダを開き、その中にあるdemosフォルダを開きます。

img03

demosフォルダの中にあるinline.htmlファイルを任意のブラウザで開いてみると

img04

手順1で確認した画面と同じようなデモ画面を確認することができます。
注※古いバージョンのブラウザだと未対応で動かない場合があります(ie9以前など)

img05

SVG Morpheusカスタマイズ前編はここまで

SVG Morpheusカスタマイズ後編では
demosフォルダの中身を編集してオリジナルのSVGアイコンに差し替える手順を記します。

スポンサーリンク

-DESIGN, JavaScript, TIPS, Webデザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

MadiaMarkerメディアマーカー

Maerchen_Diverグッズ