SVGのパスをアニメーションにする為のシンプルなスクリプト・「jQuery DrawSVG」jQuery DrawSVGはSVGのpathにアニメーションエフェクトを付与する為のスクリプトです。jQueryに依存しています。書いたpathにstroke-dasharrayプロパティとstroke-dashoffsetプロパティを差し込んで手軽にアニメーションにしよう、というもの。別途easingプラグインを使うことでeasingにも対応可能です。圧縮版で1kbを切るほどの軽さなので手軽に使えそうですね。ライセンスはMIT。 jQuery DrawSVG
SVG.JSを使ったSVGファイルの読み込みと操作 | スターフィールド株式会社
前回、jQueryを使ってSVGを読み込む方法をご紹介いたしました。 jQueryを使えば、確かにSVGの読み込み自体は簡単になりますが、 読み込んだSVGを操作するとなると、 SVGについての詳細な知識が必要になったり、アニメーションなどで一手間かけなければならなくなります。 以前、SVGを扱いやすくするJavaScriptライブラリとして、SVG.jsをご紹介いたしましたが、 このSVG.jsにはいくつかのプラグインが用意されていて、 テキストで記述したSVGコードをSVG.jsで扱える要素として読み込めるようになるsvg.import.jsというものが用意されています。 この機能を利用すると、jQueryとの合わせ技で、外部ファイルをSVG.jsで自由に扱える要素として読み込むことができますので、 その方法について、ご紹介いたします。 ↓こちらがDEMOです。 DEMO 方法 手順
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
