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