TweenMaxの検索結果1 - 1 件 / 1件

• あとで読む

  TweenMax.jsを使い、実践的なSVGアニメーションに挑戦してみた!! | 株式会社ウェブ企画パートナーズ

  • 7 users
  • wk-partners.co.jp
  • テクノロジー
  • 2019/10/24

  サイトギャラリーサイトなどでよく見かけるSVGアニメーションを使ったサイト。サイトのアクセントや世界観の構築に非常に有効な手段ですよね。何よりかっこいい！ 以前ブログに書いた記事のようにモーフィングやラインアートのSVGアニメーションは比較的カンタンに実装できますが、今回はひと手間を加え、実践で使えるかっこいいアニメーションに挑戦してみました。 サイトに何か個性を出したい・目を引くポイントを作りたいなど考えている方は是非ご覧ください。それではどうぞー!! 実践的なSVGアニメーションの作り方 イラストを作成 まずはベクターデータのイラストを作成します。今回は張り切って「ノートパソコン・紙・iPhone」のイラストの3点を作成しました。こんな感じです。 私はAdobe Illustratorを使用して作成しましたが、SVGに書き出せれば他のツールでも問題ありません。 SVGデータとして書き出