MatsuokaKouhei

ランディングページで、メインビジュアルの見出しに視線を集めたいとの要望。

インパクトが欲しいということ。

SVGで書き出した見出しを筆で書いているかのように表現してみることにした。

SVGは、illustratorで作成。

表示するテキストと、描画する際に利用するマスクをそれぞれSVGで書き出す必要がある。

ここで、注意点。

マスクを作成した順番がそのまま文字が表示される順番になってしまう。

同じ文字だからと思いコピペでマスクを作っていたら、変な順番で描画された。。。

マスクを準備したら、次は実装。

使用したのは、「vivus.js」というライブラリ。

Download：http://maxwellito.github.io/vivus/

参考にしたのは以下の通り。

https://www.willstyle.co.jp/blog/1569/

https://www.tipdip.jp/tips_posts/production/1219/

最初実装した時につまづいた点として、

書き出し方（サイズとか）がよくないと、

表示したいSVGとマスクのSVGがずれてしまい、

わけのわからない描画になってしまう。

また、スマホ（iPhone）では、描画されない問題が発生。。。

色々書き直していたらなんとか表示されたけど、

原因がイマイチ不明。。。

調査の必要あり。