ホームページを作る人のネタ帳

SVGのPathをアニメーション化してくれる大人気jQueryプラグイン「DrawSVG」

MASKPath
非常に軽量でありながら、SVGのPathをアニメーション化してくれるとても美しいDrawSVG。

Pathを書こう


基本的なPathの動きは全てHTMLに書かれている。
以下のHTMLタブを参考にしてみるといいだろう。


シンプルな使用法


See the Pen Simple usage by Leonardo Santos (@lcdsantos) on CodePen.




スクロールでPathを移動する。


See the Pen Draw on scroll by Leonardo Santos (@lcdsantos) on CodePen.




イメージのMaskPathをアニメーション化する。


See the Pen Animate mask path by Leonardo Santos (@lcdsantos) on CodePen.




その軽さ2キロバイト以下という軽量化ぶり。1年前は1キロバイト以下だったんだけども、少しずつ機能が追加されていますね。それでも十分な軽さです。

お試しあれ。

それでは、また。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 0

There are no comments yet.

Leave a reply