エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
vivus.jsを使って文字のアニメーションを作りたい! - DESIGN NOTES
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
vivus.jsを使って文字のアニメーションを作りたい! - DESIGN NOTES
ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 ... ロゴの輪郭が描かれていくものや、文字や線を書いているように表示されるアニメーションを見かけます。 今回はSVGとvivus.jsで作れるアニメーションの作り方について調べました! やりたいこと ・IllustratorでSVGファイルを作成しvivus.jsを使用 ・文字のアウトラインの基本のアニメーション ・SVGのマスクを使ったアニメーション アウトライン描画のアニメーションが作れるvivus.jsの使い方 サンプルはこちらです。 SVGコードを編集 ①作成したSVGをエディタで開きます。 ②1.2行目と、pathを囲んでいるgタグとその閉じタグを消します。(pathは消さない) ③続いてsvgにidを付与します。今回は id="text-anime" と入れました。 ④pathのcssを追加 編集後のコードがこちらです。 <svg version="1.1" id="text-ani