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名となります。
詳しい設定内容は公式サイトを参照してください。
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント