CSS3アニメーションでつくるインターフェイス表現

第18回 飛び出す数字のアニメーション

この記事を読むのに必要な時間:およそ 5 分

今回のお題は,メニュー項目にポインタを重ねると数字が飛び出してくるバーだサンプル1)⁠Hop Over Notification Badgeのデザインとアニメーションにもとづいて,コードはわかりやすく組み立て直した。ちょっとした動きとはいえ,アニメーションを魅力的に見せる工夫がある。あまり手が混みすぎていないところも好ましい。

サンプル1 CSS3: Hop over notification badge

メニューバーのインタラクション

<body>要素に加えるメニューバーは,つぎのようにul要素class属性"menu")のリストで組み立てる。<li>要素に含めた<a>要素には,data-グローバル属性(data-bubble)で表示する数字が定めてある。<a>要素にひとつだけclass属性が与えてあるのは,あとで数字の背景色を変えるためだ。なおいつもどおり,-prefix-freeをCDNから読み込んでおくものとする(第16回の水平に並べた要素に静的なスタイルを割り当てる参照)⁠

<body>要素

<ul class="menu">
    <li><a href="#" data-bubble="117">Messages</a></li>
    <li><a href="#" data-bubble="4">New Posts</a></li>
    <li><a class="gold" href="#" data-bubble="1">Hidden Coins</a></li>
</ul>

このHTMLのコードにつぎの<style>要素のようにCSSを定めると,インタラクションを加える前のメニューバーができ上がる図1)⁠メニュー項目を区切る垂直の仕切りは左右の境界線border-leftborder-rightの明暗で凹凸を表し,右下の影はぼけなしのbox-shadowプロパティにより加えた。なお,テキストにはtext-shadowプロパティで下方向に明るい影をつけて,凹んでいるように見せている。

<style>要素

body {
    padding: 1em 2em;
    font: 100%/1.5 "Helvetica Neue", sans-serif;
    color: #eee; 
    background: #485258;
}
.menu {
    display: inline-block;
    box-shadow: 0.12em 0.12em 0 rgba(40, 40, 40, 0.2);
    list-style-type: none;
    padding: 0;
}
.menu li {
    float:left;
    border-left:0.063em solid #a6c6cd;
    border-right:0.063em solid #6ca1ac;
}
.menu a {
    display: block;
    padding: 0 1em;
    line-height: 2.5em;
    position:relative;
    font-weight: bold;
    text-decoration: none;
    color: #364652;
    background-color: #86B2BB;
    text-shadow: 0 0.063em 0 #a6c6cd;
}

図1 インタラクションを加える前のメニューバー

図1 インタラクションを加える前のメニューバー

メニュー項目にマウスポインタを重ねたとき,テキストの表現を変える図2)⁠擬似クラス:hover:activeおよび:focusで,テキストの色と影をつぎのように定めた。色は白に近くし,右下に暗い影を落とすことで,浮き上がって見える。ここまでのCSSの定めを,以下のコード1にまとめた。

.menu a:hover,
.menu a:active,
.menu a:focus {
    color: #eee;
    text-shadow: 0.063em 0.063em 0 #547177;
}

図2 マウスポインタを重ねるとテキストの表現が変わる

図2 マウスポインタを重ねるとテキストの表現が変わる

コード1 マウスポインタを重ねた項目の表現が変わるメニューバー

body {
    padding: 1em 2em;
    font: 100%/1.5 "Helvetica Neue", sans-serif;
    color: #eee; 
    background: #485258;
}
.menu {
    display: inline-block;
    box-shadow: 0.12em 0.12em 0 rgba(40, 40, 40, 0.2);
    list-style-type: none;
    padding: 0;
}
.menu li {
    float:left;
    border-left:0.063em solid #a6c6cd;
    border-right:0.063em solid #6ca1ac;
}
.menu a {
    display: block;
    padding: 0 1em;
    line-height: 2.5em;
    position:relative;
    font-weight: bold;
    text-decoration: none;
    color: #364652;
    background-color: #86B2BB;
    text-shadow: 0 0.063em 0 #a6c6cd;
}
.menu a:hover,
.menu a:active,
.menu a:focus {
    color: #eee;
    text-shadow: 0.063em 0.063em 0 #547177;
}

著者プロフィール

野中文雄(のなかふみお)

ソフトウェアトレーナー,テクニカルライター,オーサリングエンジニア。上智大学法学部卒,慶応義塾大学大学院経営管理研究科修士課程修了(MBA)。独立系パソコン販売会社で,総務・人事,企画,外資系企業担当営業などに携わる。その後,マルチメディアコンテンツ制作会社に転職。ソフトウェアトレーニング,コンテンツ制作などの業務を担当する。2001年11月に独立。Web制作者に向けた情報発信プロジェクトF-siteにも参加する。株式会社ロクナナ取締役(非常勤)。

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入