このページの本文へ

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

動くインフォグラフィックでサイトを楽しくするアイデア

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

利倉健太/Stronghold

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

今回の注目サイト:
Knormal

http://www.knormal.com/profile/

デザインとテクノロジーをもとにブランディングやWebサイト制作などを手がける、米国のエージェントのポートフォリオサイト。

気持ちよく回転する円グラフ

 シンプルなフラットデザインを採用したKnormalのポートフォリオサイト。このサイトでは、3枚の画像からなる円グラフを重ね合わせ、CSSアニメーションによって回転させている。インフォグラフィックとしてはごく単純なものだが、スムーズに気持ちよく動くアニメーションと独特の配色がサイトの個性を表していて、おもしろさがある。

 今回は、Knormalのインフォグラフィックをヒントに、グラフの基本的な構造から、CSS3を使った動かし方、JavaScriptやSVGと組み合わせた発展的なグラフの作り方までを解説する。

STEP 1:グラフの構造を考える

 最初に、円グラフの構造から考えてみよう。立体的に見える円グラフは、3つのレイヤーからなる。色や形状の異なる3つの円グラフ画像を用意しておき、それぞれ別々のレイヤーとして配置して重ね合わせる。

 各レイヤーには、0から360度へ時計回りに回転するアニメーションか、0から-360度へ半時計回りに回転するアニメーションのどちらかを設定する。この回転アニメーションを繰り返すことで、立体的で動く円グラフを表現できるわけだ。

STEP 2:CSS Keyframesでグラフを回転させる

 実際にグラフのアニメーションを作ってみよう。回転アニメーションは、CSSの@keyframesを使って宣言する。@keyframesプロパティは、アニメーションの時間経過を0%(アニメーションの開始時)〜100%(終了時)のパーセント単位で指定し、その時点でのCSSのプロパティと値を記述する。


@keyframes ANIMATION-NAME{
0%   {/* 開始時のプロパティ */}
50%  {/* 途中経過のプロパティ */}
100% {/* 終了時のプロパティ */}
}

 @keyframesで宣言したアニメーションは、animationプロパティで時間と再生回数、イージングを設定すると実行される。

.target {
animation: ANIMATION-NAME 1s ease infinite;
}

0 から360度回転のアニメーション

 0から360度に回転させる場合、0%にrotate(0deg);、100%にrotate(360deg);を指定する。アニメーションの回数を「infinite」(無制限)とすると、グラフがくるくると回り続けるアニメーションができる。

0 から360度回転のアニメーション

■ソースコード(CSS)

.stage{
position: relative;
height: 400px;
width: 400px;
}
.stage > div{
position: absolute;
height: 400px;
width: 400px;    
}
.rotateL{
background: url(img/rotate.png) no-repeat;
-webkit-animation: SPINER 10s linear infinite;
animation: SPINER 10s linear infinite;
}
@-webkit-keyframes SPINER{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes SPINER{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

■ソースコード(HTML)

<div class="stage">
  <div class="rotateL"></div>
</div>

0 から-360度回転のアニメーション

 同様にして、逆向き(0から-360度)のアニメーションも設定する。

■ソースコード(CSS)

.rotateL{
background: url(img/rotate.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 10s linear infinite;
animation: SPINER_BACKWARD 10s linear infinite;
}
@-webkit-keyframes SPINER_BACKWARD{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
@keyframes SPINER_BACKWARD{
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/004/2.html

対応ブラウザー:Firefox, Chrome, Safari, Opera, IE10~(IE9以下ではアニメーションは動作しない)

STEP 3:複数レイヤーでのKeyframesアニメーション

 2種類の回転アニメーションの作り方がわかったら、複数のレイヤーを組み合わせ、Knormalのような少し複雑なアニメーションを作成しよう。

 .stageを基点にposition:absoluteで5つのレイヤー(.rotate1〜.rotate5)を配置し、時計回りのアニメーション(SPINER)と、反時計回りのアニメーション( SPINER_BACKWARD)を交互に適用する。animationプロパティで時間差をつけて実行すると、グラフが立体的に回転しているように見える。

レイヤー rotate1 rotate2 rotate3 rotate4 rotate5
グラフ画像

回転方向 時計回り 反時計回り 時計回り 反時計回り 時計周り
時間 10秒 8秒 6秒 4秒 2秒

■ソースコード(CSS)

.stage{
position: relative;
height: 400px;
width: 400px;
}
.stage > div{
position: absolute;
height: 400px;
width: 400px;
opacity: 0.9;
}
.rotate1{
background: url(img/005_5.png) no-repeat;
-webkit-animation: SPINER 10s linear infinite;
animation: SPINER 10s linear infinite;
}
.rotate2{
background: url(img/005_4.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 8s linear infinite;
animation: SPINER_BACKWARD 8s linear infinite;
}
.rotate3{
background: url(img/005_3.png) no-repeat;
-webkit-animation: SPINER 6s linear infinite;
animation: SPINER 6s linear infinite;
}
.rotate4{
background: url(img/005_2.png) no-repeat;
-webkit-animation: SPINER_BACKWARD 4s linear infinite;
animation: SPINER_BACKWARD 4s linear infinite;
}
.rotate5{
background: url(img/005_1.png) no-repeat;
-webkit-animation: SPINER 2s linear infinite;
animation: SPINER 2s linear infinite;
}
@-webkit-keyframes SPINER{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(360deg);}
}
@keyframes SPINER{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
@-webkit-keyframes SPINER_BACKWARD{
0% {-webkit-transform: rotate(0deg);}
100% {-webkit-transform: rotate(-360deg);}
}
@keyframes SPINER_BACKWARD{
0% {transform: rotate(0deg);}
100% {transform: rotate(-360deg);}
}

■ソースコード(HTML)

<div class="stage">
  <div class="rotate1"></div>
  <div class="rotate2"></div>
  <div class="rotate3"></div>
  <div class="rotate4"></div>
  <div class="rotate5"></div>
</div>

この連載の記事

一覧へ

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

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

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

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

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

ランキング