このページの本文へ

DESIGN 先端サイトに学ぶCSS3/jQueryアニメーションデザイン ― 第3回

SVG線画が美しいリッチアニメーションの作り方

2014年06月09日 11時00分更新

菊岡未希子/Stronghold

  • この記事をはてなブックマークに追加
本文印刷

今回の注目サイト:
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で指定できるので適当で構わない。サイズの調整がしやすいように、アートボードを文字に合わせてぴったりに設定しておこう。

[004.jpg]

 配置が終わったらSVG形式で別名保存する。「SVGオプション」の「SVGプロファイル」では「SVG1.1」を選択する。

[005.jpg]
[006.jpg]

 保存が完了したら、出力されたSVGファイルをエディターで開いてみよう。以下のようなコードが並んでいれば、元になるSVGファイルは完成だ。

[007.jpg]

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の読み込みは完了だ。

[008.jpg]

 次に、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;
}
[009.jpg]

STEP 3:SVGパスを動かしてみる

 SVGの読み込みができたところで、CSSを使って点線のパスを動かしてみよう。パスを動かすしくみには、破線を利用する。前に指定したstroke-dasharrayの破線の間隔を長めに設定し、stroke-dashoffsetに大きな値を指定して破線の開始位置をずらす破線の開始位置の値を少しずつ小さくしていくことで、パスが移動し、まるで線を手で描いているような動きになるわけだ。

[010.jpg]

 実際の値は、パスのサイズに合わせて調節しよう。アニメーションは、変更する内容を@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;
}
[010.jpg]

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング