SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
Raphaël―JavaScript Library
The most popular coding language for the web is javascript; so much so that since the advent of HTML5, it has now been officially accepted as the default standard. Javascript has moved beyond a smaller client-side browser-based language to become integrated not just for front-end design, but also for back-end server-side development. As a result there are has been a huge growth of Javascript libra
D3.js
D3The JavaScript library for bespoke data visualization Create custom dynamic visualizations with unparalleled flexibility
■ - 万年素人からHackerへの道
SVG読み込みSVG自体をHTML内に記載して作るサイトはよくあるが、外部の.svgから読み込む方法があまり見当たらない。 ・これはIEでのプラグインが必要な書き方だと思う。 <embed src="ファイル名.svg" name="SVGEmbed" width="横幅" height="高さ" type="image/svg- xml" pluginspage="http://www.adobe.co.jp/svg/viewer/install/"> ・safariとかはこれ <object type="image/svg+xml" data="ファイル.svg"> ・SVGをJavaScriptで動的に読み込む http://gihyo.jp/dev/feature/01/svg/0004?page=2 ・SVGのファイル内の仕様 http://www3.ocn.ne.jp/~dhr
「10分でわかるSVG 応用編」サンプル
<g fill="#c44" stroke="#822" stroke-width="2"> <circle cx="32" cy="32" r="30" /> <rect x="40" y="30" width="80" height="50" /> </g> <g id="s02"> <circle cx="32" cy="32" r="30" fill="#c44" /> <rect x="40" y="30" width="80" height="50" rx="10" ry="10" fill="#44c" /> </g> <use x="140" y="0" xlink:href="#s02" stroke="#ccc" stroke-width="2" /> <symbol id="s03" viewBox="0 0 120 80"> <circle cx="32" cy="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The invisible gradient technique demo: cross-browser SVG support with fallback
SVG (basic support) | Can I use... Support tables for HTML5, CSS3, etc