このページの本文へ

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

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

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

菊岡未希子/Stronghold

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

STEP 4:ボックスに組み込む

 SVGのアニメーションができたら、続いて、線で取り囲むためのボックスを用意する。一見すると1pxのボーダーを指定しただけのdiv要素に見えるが、あとで動きをつけるために、幅もしくは高さを1pxにして塗りつぶしたdiv要素を上下左右に4つ配置し、枠線として見せている。

011

 ボックスが完成したら、先ほど作成したSVGをボックス(div.db)の中に入れる。

■ソースコード(HTML)

<div class="box">
        <div class="bd">
    <svg><g><path class="path" d="M5….." /></g></svg>

            <div class="bdT"></div>
            <div class="bdB"></div>
            <div class="bdR"></div>
            <div class="bdL"></div>
        </div><!-- .bd -->
 </div><!-- .box -->

■ソースコード(CSS)

/* .box のCSSは同上 */

.bd{
    width: 1060px;
    height: 250px;
    text-align: center;
    position: relative;
    padding: 60px 0;
}
div.bd div{
    background: #092951;
     position:absolute;
     -webkit-transition:all 1s ease-in-out;
     transition:all 1s ease-in-out;
    }

.bd div.bdT{
    width: 100%;
    height:1px;
    top:0;
    left:0;
}
.bd div.bdB{
    width: 100%;
    height:1px;
    bottom:0;
    right:0;
}
.bd div.bdR{
    height:100%;
    width :1px;
    right:0;
    top:0;
}
.bd div.bdL{
    height:100%;
    width :1px;
    left:0;
    bottom:0;
}
/* .pathのCSSは同上 */
012

STEP 5:枠線に動きをつける

 仕上げとして、ボックスの枠線に動きをつけよう。ページが読み込まれたあと、線が少しずつ伸びて枠線が完成するアニメーションだ。

 STEP 4で作成した、4つの枠線(bdT/bdB/bdR/bdL)のスタイル名を変更し、セレクターの頭に「.active」をつけておく。bdT/bdB/bdR/bdLのデフォルトのスタイルは新たに記述し、widthおよびheightを「0」にしよう。

 ページの読み込みが完了したら、jQueryのaddClass()メソッドでclass名「active」を付けるようにする。あとは、枠線(div.bd div)に対してCSSのtransitionプロパティを設定すると、ページの読み込み時に、幅または高さが0から100%に変わるアニメーションの完成だ。

[013.jpg]

■ソースコード(CSS)

/* .box, .bd, div.bd divのCSSは同上 */

.active .bd div.bdT{
    width: 100%;
    height:1px;
    top:0;
    left:0;
}
.active .bd div.bdB{
    width: 100%;
    height:1px;
    bottom:0;
    right:0;
}
.active .bd div.bdR{
    height:100%;
    width :1px;
    right:0;
    top:0;
}
.active .bd div.bdL{
    height:100%;
    width :1px;
    left:0;
    bottom:0;
}
.bd div.bdT{
    width: 0;
}
.bd div.bdB{
    width: 0;
}
.bd div.bdR{
    height:0;
}
.bd div.bdL{
    height:0;
}

■ソースコード(JavaScript)

$(function() {
    $('.box').addClass('active');
});
[img14.jpg]

バリエーション&アレンジのヒント

 マウスオーバーやクリックをアニメーションのトリガーと、色を変化させるアニメーションを追加すると、Béatrice Créationsのトップのような動きも実現できる。

【015.png】
/* .box .bdのCSSは同上 */
body{background: #092951;}
div.bd div{background: #fffposition:absolute;-webkit-transition:all .3s ease-in-out .3s;transition:all .3s ease-in-out .3s;}

.active .bd div{background: #fff;}
.active .bd div.bdT{width: 100%height:1pxtop:0left:0;}
.active .bd div.bdB{width: 100%height:1pxbottom:0right:0;}
.active .bd div.bdR{height:100%width :1pxright:0top:0;}
.active .bd div.bdL{height:100%width :1pxleft:0bottom:0;}

div.bdT{width: 0;}
div.bdB{width: 0;}
div.bdR{height:0;}
div.bdL{height:0;}

.box:hover .bd div.bdT{width: 0;}
.box:hover .bd div.bdB{width: 0;}
.box:hover .bd div.bdR{height:0;}
.box:hover .bd div.bdL{height:0;}

.path{    
    stroke:#fff;
    fill:#092951;
    stroke-width:1;    
    stroke-dasharray: 3000;
    stroke-dashoffset:3000;
    -moz-animation:DASH 2s ease-in-out 1s forwards;
    -webkit-animation:DASH 2s ease-in-out 1s forwards;
    -o-animation:DASH 2s ease-in-out 1s forwards;
    animation:DASH 2s ease-in-out 1s forwards;
    -webkit-transition:all .3s ease-in-out;transition:all .3s ease-in-out;    
}

@keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-moz-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-webkit-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-o-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

@-ms-keyframes DASH{
    0%  {stroke-dashoffset:3000;fill:#092951;}
    80% {stroke-dashoffset:2000;fill:#092951;}
    100%{stroke-dashoffset:0;fill:#fff;}
}

DEMO > http://zxcvbnmnbvcxz.com/demonstration/as/003/6.html

著者:菊岡未希子(きくおか・みきこ)

著者写真

1990年生まれ。株式会社レターズのデザイナー。2013年からWebデザイナーとして働き始める。Webに関する活動拠点「Stronghold」というサイトでブログを書いたり、デザインの実験をしている。

Web Professionalトップへ

この連載の記事

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

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

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

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

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

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

ランキング