タグ

2014年6月9日のブックマーク (2件)

  • SVG線画が美しいリッチアニメーションの作り方 (1/2)

    ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基と、CSS3アニメーションを使った動かし方を解説する。CSSHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1:SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素

    SVG線画が美しいリッチアニメーションの作り方 (1/2)
  • Makers' Base

    〒152-0031 東京都目黒区中根1-1-11 TEL:03-6421-1571/FAX:03-6421-1572 営業時間 : 10:00〜19:30/不定休 COPYRIGHT © MAKERS' BASE ALL RIGHTS RESERVED.

    Makers' Base
    bm0329
    bm0329 2014/06/09