今回の注目サイト:
Béatrice Créations
http://carlphilippebrenner.com/portfolio/beatricecreations
フランスを拠点に活動するデザイナーであるカール・フィリップ・ブレナー氏のポートフォリオサイト。
ページ遷移が楽しい繊細で滑らかな動き
CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。
Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。
今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。
STEP 1:SVGのパスを作成する
アニメーションを作る前に、Illustratorを使って素材となるSVGファイルを作成しよう。テキストツールを使って任意の文字を入力し、アウトライン化する。今回のデモのように筆記体のフォントを使用する際は、アウトライン化した文字は結合せず、つなぎ目が滑らかになるように配置を調整する。この段階では、塗りつぶしたままでOKだ。
全体のサイズはあとでHTMLで指定できるので適当で構わない。サイズの調整がしやすいように、アートボードを文字に合わせてぴったりに設定しておこう。
配置が終わったらSVG形式で別名保存する。「SVGオプション」の「SVGプロファイル」では「SVG1.1」を選択する。
保存が完了したら、出力されたSVGファイルをエディターで開いてみよう。以下のようなコードが並んでいれば、元になるSVGファイルは完成だ。
STEP 2:SVGを読み込む
SVGをHTMLに読み込んで表示してみよう。先ほどのSVGファイルから、<svg version="1.1"... >...</svg>をコピーし、HTML内にペーストする。
<svg>タグ内の「width="◯px" height="◯px"」がIllustratorで作成したアートボードの大きさになっている。このサイズ指定を拡大・縮小するとパスのサイズも連動するので、表示したいサイズに調整しよう。widthまたはheightのどちらかのみを指定すると、縦横の比率はそのままに、サイズを自由に調整できる。
パスの太さや塗りつぶしをCSSで指定するため、シェイプ1つ1つを表す<path>タグにclass名を付けておく。今回は「path」というclass名を定義する。
これでSVGの読み込みは完了だ。
次に、SVGのパスにスタイルを適用する。SVGのパスは、以下のようなスタイルシートプロパティを使って、ストロークの色や太さ、塗りつぶしを指定できる。
- stroke:線の色
- stronke-width:線の太さ
- fill:塗りつぶしの色
stronke-dasharrayプロパティとstroke-dashoffsetプロパティを使うと、破線にもできる。
- stroke-dasharray:破線の間隔
- stroke-dashoffset:破線の開始位置
この段階では以下のような破線に指定しておこう。
■ソースコード(HTML)
<div class="box">
<svg>
<g><path class="path" d="M5….." /></g>
</svg>
</div>
■ソースコード(CSS)
.box{
width: 1060px;
height: 370px;
margin: 200px auto;
}
.path{
stroke:#092951;
fill:none;
stroke-width:1;
stroke-dasharray: 10;
}
STEP 3:SVGパスを動かしてみる
SVGの読み込みができたところで、CSSを使って点線のパスを動かしてみよう。パスを動かすしくみには、破線を利用する。前に指定したstroke-dasharrayの破線の間隔を長めに設定し、stroke-dashoffsetに大きな値を指定して破線の開始位置をずらす。破線の開始位置の値を少しずつ小さくしていくことで、パスが移動し、まるで線を手で描いているような動きになるわけだ。
実際の値は、パスのサイズに合わせて調節しよう。アニメーションは、変更する内容を@keyframesプロパティで指定し、animationプロパティで実行する。デモでは3秒間かけて動くようにした。これでパスのアニメーションが完成だ。
■ソースコード(CSS)
/* .box のCSSは同上 */
.path{
stroke:#092951;
fill:none;
stroke-width:1;
stroke-dasharray: 3000;
stroke-dashoffset:3000;
animation: DASH 3s ease-in alternate forwards;
-webkit-animation:DASH 3s ease-in 0s forwards;
-o-animation:DASH 3s ease-in 0s forwards;
animation:DASH 3s ease-in 0s forwards;
}
@keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-moz-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-webkit-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-o-keyframes DASH{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;}
}
@-ms-keyframes DASHf{
0%{stroke-dashoffset:3000;}
100%{stroke-dashoffset:0;
}