ノンプログラマーにもオススメ！滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説
ノンプログラマーにもオススメ！滑らかなSVGアニメーションを驚くほど簡単に作成できるMac用ソフト「Keyshape」の使い方を解説更新日: 2018年05月29日プログラミングAR・VR制作 アニメーションを作成するためのCSSやJavaScriptのライブラリ・フレームワークはたくさんリリースされています。 これらのライブラリやフレームワークは、オブジェクトそのものの見せ方をアニメーション処理を加えて見せるもので、ユニークな動きをするアニメーションを簡単に実装することができるので、今なお人気があります。 一方、昨今注目を浴びているのが、SVGアニメーションと呼ばれる新しいアニメーションの表示手法です。 SVGとはWebブラウザにも互換性があるベクターデータです。 通常の.gifや.pngファイルようなビットマープデータだと拡大すると粗くなってしまいますが、SVGだとどれだけ拡大しても滑
SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
