FEATURES This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties. Weights less than 2KB minified and 800 bytes gzipped. Easy to use. Easing and stagger support. Free! Tweet USAGE Include jQuery DrawSVG after jQuery <script src="http://code.jquery.com/jquery-latest.min.j
こんにちは、ヤムチャーtsukasaです。 前回はSVGのマウス移動による視差効果まで作成しました。後編はパーツのアニメーションを作成します！ アニメーションのクラスを確認する 前回でsvg要素の準備は全て終了しましたが、 アニメーションのためにつけたクラスの再確認をしましょう。 サンプルでつけたクラスは以下の4つです。 moveX…X軸移動を往復 moveY…X軸移動を往復 shake…一定間隔でガタッと揺れる wink…まばたきをするように一瞬でscaleYを縮め、ゆっくり戻す DOMを指定 中編でIDの重複を防ぐためにIDは全てクラスに置き換えましたね。 DOMの指定では複数同じアニメーションをつけるパーツが存在する可能性を想定してselectAllを使用します。 アニメーションの開始 中編と同じようにnode.setAttributeを使用して要素を変形させます。 アニメーションに
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
