SVGとVivus.jsを使ってペンで描画する様なアニメーションを作る方法 | 株式会社チップディップ
Webサイトで画像に動きを付けたい場面、みなさんも何度か経験したことがあると思います。画像に動きがあると、大きなアクセントになりますよね。 今回はレスポンシブなサイトでも使いやすい、SVGとJavascript『Vivus.js』を使用したアニメーションについて書いて行こうと思います！ ちなみに、今回の完成図はこちら。 See the Pen SVGアニメーション by tipdip (@tipdip_blog) on CodePen. 『Vivus.js』はここからダウンロードできますので、始めに取得しておいてください。 SVG画像を用意する まずは画像を用意しましょう。 SVGファイルはAdobe illustratorで作成することができます。 今回はサンプルでチップディップのロゴを用意しました。 画像を作成する際、テキストはアウトラインに変換しておいてください 『ファイル』から『別
vivus.jsを使ってSVG画像のアニメーションを実装してみよう｜アド･エータイプ スタッフブログ
家でゴロゴロしてたらカビゴンがゴロゴロしてきたので捕まえました。 前回ですがSVGを軽く触りましたので、今回はvivus.jsと言うものを使ってアニメーションを実装してみたいと思います。 これを使うことで線がなぞられていくようなアニメーションをSVGに施すことが出来ます。 vivus.jsのサイトはこちらから http://maxwellito.github.io/vivus/ ダウンロード https://github.com/maxwellito/vivus こちらのページからダウンロードが出来ます。 「Clone or download」→「Download ZIP」の順番にクリックするとzipがダウンロードされます。 解凍後の「dist」フォルダにある「vivus.js」または「vivus.min.js」を使用します。 SVGの用意 <svg height="300" id="te
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
