Vivus.jsを使ってsvg画像にアニメーションをつける


svg画像にアニメーションをつける方法について説明します。

Vivus.js」というライブラリを使ってアニメーションを実装します。

 

必要なものは以下の三つだけです。

①SVG画像

②jQuery

③Vivus.jsライブラリ

●デモ

See the Pen Face SVG Animation by s_fuji (@s_fuji) on CodePen.

 

[HTML]
jQuery、Vivus.js、SVG画像を定義。

[js]
「new Vivus(‘svg-you’, {duration: 200 , start: ‘autostart’});」でアニメーションを呼び出し。

※jsで定義している「svg-you」という名前がsvgタグ内に定義しているid名となります。

詳しい設定内容は公式サイトを参照してください。

この投稿へのコメント

コメントはありません。

コメントを残す

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

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL