いよいよホームページ作り始めてる。まずはローディングから(SVGアニメーションに挑戦する)

f:id:kisokoji:20170104194250p:plain

f:id:kisokoji:20170104194357p:plain

SVGテキストを作ってみた

いろんなサイトを読み漁り、試してみた。読むとやるのでは大違いを感じたね。Illustratorで書き出せばいいんでしょ?程度に甘くみてました。

動かない・・・

そんなに甘くなかったです。

ありがとうなサイト

まずIllustratorの参考

滑らかで美しい表現ができる!SVGアニメーションを使ってみようCode部

Code部さんのサイトは「こんなの作ってみたい〜」をかきたててくれます。

特に途中の「Demostration」がしたい!

ただやりかたは書かれていないから・・・と模索。

ascii.jp

こちらで実際のハウツーがありました。

でも、あまり読まないでやろうとしていた文字(フォント)がこちら

f:id:kisokoji:20170104195524p:plain

これがどうなるのかも想像できずのまま、書き出して、CSSもコピペしてGO!

???

何も表示されない。SVGファイルなのですから普通にイメージが表示されると思っていたのですが、それもなく、ただ「ふん、知らんがな。」状態。HTMLってひどい。どこが間違ってるって教えてくれたっていいじゃない。

何が悪いのか全然わからない。

を何度か繰り返し、やっと気づきます。

テキストツールを使って任意の文字を入力し、アウトライン化する。 つなぎ目が滑らかになるように配置を調整する。

この2つ目が案外肝でした。(アウトライン化はとりあえずしてありましたよ)

f:id:kisokoji:20170104200150p:plain

サンプルのように文字同士がつながっていなきゃダメっぽいです。(そもそもその前のフォントだとどうなったんだろう?ですけど。)

とりあえず、CSSの前に表示されなきゃだめなので、表示されたらひとまずOKということです。

CSSの参考

「Demonstration」の参考CSSでもいいのだけど、色をつけたい。

そこでお世話になったのがこちら

sterfield.co.jp

ほとんどこちらのCSSをパクらせていただきました。ありがとうございます。

CSSは外部ファイルに出来たのですが、SVGパスも外部ファイルに出来るってことのようなのですが、うまくいかず、諦めました。

(ここまでで2時間以上経過してて、動きゃいいやってことになりました。)

このあと、JavaScriptで画面を切り替えてスライドショーです。