このページの本文へ

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

差がつくメニューアイコン 25個のCSSアニメーション

2014年07月07日 11時00分更新

谷岡 蘭、利倉健太 / Stronghold

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

今回の注目サイト:
Studio Songes

http://www.studio-songes.fr/fr/

フランスの建築事務所のWebサイト。

随所に使用されているアニメーション

 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes(ステュディオ・ソンジュ:スタジオ夢)」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。

 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。

 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。

STEP 1:アイコンの初期状態を作る

 メニューアイコンの≡は、3つのspan要素を使って作成する。それぞれ、display:block;で幅と高さを指定し、縦に3つ並べておく。

 アイコンの初期状態では、1番目(.first)および3番目の要素(.third)をtranslateプロパティで左方向へ5px移動させ、2番目の要素(.second)を同じく右方向へ5px移動させておこう。

初期状態

メニューアイコン

■ソースコード(HTML)

<a href="#" class="toggle_menu">
    <span class="first"></span>
    <span class="second"></span>
    <span class="third"></span>
</a>

■ソースコード(CSS)

.toggle_menu span{
    display: block;
    width: 30px;
    height: 3px;
    background: #000;
    margin:0 0 5px 0;
}

.toggle_menu span.first,
.toggle_menu span.third{
    -webkit-transform: translate(-5px,0);
    transform: translate(-5px,0);
}

.toggle_menu span.second{
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);
}

STEP 2:マウスホバー時の動きをつける

 STEP 1で作成したメニューにアニメーションをつける。マウスホバーをきっかけとして、左右へ5pxずつずらしていた3本のライン(span要素)を0pxへ戻し、中央に整列させる。各span要素にはtransitionプロパティを設定しておくことで、0pxへの変更時にスムーズにアニメーションする。

初期状態ホバー時の動き

■ソースコード(CSS)

.toggle_menu{
    display:block;
    width:30px;
    height:20px;
    position:relative;
}

.toggle_menu span{
    display: block;
    width: 30px;
    height: 3px;
    background: #000;
    margin:0 0 5px 0;
/*CSS アニメーションの付与*/
    transition:all .2s;
}

.toggle_menu span.first,
.toggle_menu span.third{
    -webkit-transform: translate(-5px,0);
    transform: translate(-5px,0);
}

.toggle_menu span.second{
    -webkit-transform: translate(5px,0);
    transform: translate(5px,0);
}

/*ホバー時の動き*/
.toggle_menu:hover span.first,
.toggle_menu:hover span.second,
.toggle_menu:hover span.third{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}

STEP 3:イージングを設定して滑らかに動かす

 メニューアイコンのアニメーションをより滑らかにするために、イージングを設定しよう。CSSアニメーションのイージングは、transitionプロパティに以下のようにイージング名を追加する。

 transition:対象プロパティ 時間 イージング名;

 イージング名には、プリセットとして用意されているease,linear,ease-in,ease-out,ease-in-out のいずれか、もしくはcubic-bezier() 関数によるカスタムイージングを指定できる。

 ここでは「Ceaser(シーザー)」というWebサービスを利用し、cubic-bezier() でカスタムイージングを指定する。

 Ceaserは、ベジュ曲線を操作してカスタムイージングを作成できるサービス。プレビューが見やすく、デフォルトのイージングも豊富、各コントロールポイントの位置をマイナスまで設定できるので、イージングを細かく作り込みたいときにおすすめだ。プレビューを見ながら好みのイージングを見つけるとよいだろう。

■ソースコード(CSS)

.toggle_menu span{
    display: block;
    width: 30px;
    height: 3px;
    background: #000;
    margin:0 0 5px 0;
    transition: all .3s cubic-bezier(0.395, -0.600, 0.580, 1.650);
}

STEP 4:クリック後の動きを追加する

 仕上げとして、マウスホバーで中心に整列したspan要素に、クリック時に反応する動きを付ける。ここでは3つのspan要素のうち1番目の要素と3番目の要素を縦方向の中央に移動させ、アイコンが閉じた状態に変化させる。

 方法は至ってシンプルで、jQueryを使ってクリックイベント発生時に「activate」というclass属性を付与する。あとはCSSで、.toggle_menu:hover span{} を設定したように、.activate .toggle_menu:hover span{} でクリック後の動きを設定できるわけだ。

初期状態ホバー時の動きクリック後の動き

■ソースコード(CSS)

.activate .toggle_menu span.first{
    -webkit-transform: translate(0,8px);
    transform: translate(0,8px);
}
.activate .toggle_menu span.second{
    -webkit-transform: translate(0,0);
    transform: translate(0,0);
}
.activate .toggle_menu span.third{
    -webkit-transform: translate(0,-8px);
    transform: translate(0,-8px);
}

■ソースコード(jQuery)

$(function(){
    $(document).on('click''.toggle_menu'function(event) {
        event.preventDefault();
        $('html').toggleClass('activate');
    });
});

この連載の記事

一覧へ

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

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

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

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

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

ランキング