ホーム > IT > WEB制作 > プログラミング > Vivus.jsを使ってsvg画像にアニメーションをつける

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

公開済み: 2016年11月9日
更新: 2017年4月8日
作成者: s
カテゴリー: プログラミング
タグ: js

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

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

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

①SVG画像

②jQuery

③Vivus.jsライブラリ

●デモ

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

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

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

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

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

この投稿へのコメント

コメントはありません。

コメントを残すコメントをキャンセル

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

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

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

トラックバック URL