menu

想像とシンプル/体温を感じるWEBサービス
WEB DISIGNERS Blog

2016/05/17
  • html5
  • JQuery
  • SVG

SVGのパスにアニメーションさせるJQuery DrawSVGの設定

SVGのpathにアニメーションエフェクトをかけてくれるプラグインです。年々画面の解像度が高まっていく中、SVGが注目されていますが、軽量でさらにアニメーションをかけられるのでオススメです。
drawsvg

使用方法

ダウンロード

DrawSVG.js

準備するファイル

・jquery.js


・jquery.easing.min.js


・jquery.drawsvg.js

外部ファイルの読み込み

head内で動かない場合は「jquery.drawsvg.js」をbodyの最後に記述してください。

外部ファイルの読み込み

SVG画像がアニメーションしながら描かれます

RERUNをクリックでアニメーション

See the Pen xVeNML by brightonline (@brightonline) on CodePen.0

画像との組み合わせです

RERUNをクリックでアニメーション

See the Pen GZLVYE by brightonline (@brightonline) on CodePen.0

スクロールに合わせてアニメーションします

スクロールしてください

See the Pen bpJXyK by brightonline (@brightonline) on CodePen.

SVGファイルさえ作ってしまえば、簡単に設定できるので色々な場面で使用することができそうです。

コメントを残す




POPULAR POSTS

高機能jQueryスライダー「Slider Pro」の使い方

2016/03/03

HTML要素に背景としてYouTube動画を表示するレスポンシブ対応

2016/02/11

「HTML5」と「CSS」のみで背景動画をフルスクリーンで再生する

2016/04/09

HTML/CSSのみで動きを加えてくれるアニメーション ホバーエフェクト9選まとめ

2016/03/24

NEW ENTRY

HTMLとCSSだけ簡単シンプルなスライダーを実装

2016/08/23

マウスホバーでテキストの色を左からアニメーションで変更するCSSテクニック

2016/07/26

テキストをCSSだけで映画のタイトルのように、ぼかしたブラーの状態から徐々に表示させるテクニック

2016/07/12

画像を使わずにCSSのみでボーダーにグラデーションをかける方法

2016/07/11