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

第17回 立体的なナビゲーションバーのアニメーション

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

ナビゲーションバーを3次元風に見せる

今回のお題のミソは,3次元の変形を使わないということだ。前掲サンプル1をよくよく眺めれば,パース(遠近法)がかかっていない。擬似要素::before::afterで,ナビゲーションバーの側面に見える部分を,つぎのCSSのとおりtransformプロパティで2次元に変形して加える図2)⁠傾斜は関数skewX()skewY()で,それぞれの軸方向に傾ける角度を渡す。

.list-item::before,
.list-item::after {
    content: "";
    position: absolute;
    width: 0.5em;
}
.list-item::after {
    height: 4em;
    background: #181818;
    bottom: -2.25em;
    left: 1.5em;
    transform: rotate(90deg) skewY45deg);
}
.list-item::before {
    height: 2.5em;
    background: #121212;
    top: .25em;
    left: -0.5em;
    transform: skewY(-45deg);
}

図2 擬似要素でナビゲーションバーの側面を加えた

図2 擬似要素でナビゲーションバーの側面を加えた

そのうえで,ナビゲーションバー全体の要素class属性"nav-bar")をつぎのように斜めに傾けて,立体的に見せる図3)⁠なお,関数skew()を用いると,xとyのふたつの引数が渡せる。だが,最近の仕様からは除かれた。ブラウザによっては実装が残っているものの,使わない方がよい。動きを加える前の,立体風に見えるナビゲーションバーのCSSの定めは,以下のコード1にまとめた。

.nav-bar {
    transform: rotate(-35deg) skewX(20deg) skewY(5deg);
}

図3 立体風になったナビゲーションバー

図3 立体風になったナビゲーションバー

コード1 立体風のナビゲーションバー

* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
}
.nav-bar {
    transform: rotate(-35deg) skewX(20deg) skewY(5deg);
}
li {
    list-style: none;
}
.list-item {
    background: #000;
    color: #575757;
    text-align: center;
    height: 2.5em;
    width: 4em;
    line-height: 2.5em;
    border-bottom: 1px solid #060606;
    position: relative;
    display: block;
    box-shadow: -2em 1.5em 0 #e1e1e1;
}
.list-item::before,
.list-item::after {
    content: "";
    position: absolute;
    width: 0.5em;
}
.list-item::after {
    height: 4em;
    background: #181818;
    bottom: -2.25em;
    left: 1.5em;
    transform: rotate(90deg) skewY(45deg);
}
.list-item::before {
    height: 2.5em;
    background: #121212;
    top: .25em;
    left: -0.5em;
    transform: skewY(-45deg);
}

マウスポインタが重なったときのアニメーションを加える

それぞれのボタンの要素class属性"list-item")にマウスポインタを重ねたら:hover擬似クラス)⁠つぎのように位置や大きさを変えることにより,飛び出したように見せる図4)⁠影もそれに合わせて動かした。

.list-item:hover {
    background: #ff6e42;
    color: #fffcfb;
    transform: translate(0.9em, -0.9em);
    box-shadow: -2em 2em 0 #e1e1e1;
}
.list-item:hover::before {
    background: #b65234;
    width: 1em;
    top: 0.5em;
    left: -1em;
}
.list-item:hover::after {
    background: #b65234;
    width: 1em;
    bottom: -2.5em;
    left: 1em;
    height: 4em;
}

図4 マウスポインタを重ねると飛び出して見える

図4 マウスポインタを重ねると飛び出して見える

あとは,つぎのようにtransitionプロパティで滑らかなアニメーションにすればよい。機械的な動きにするため,タイミング関数はlinearを用いた。書き上がったCSSの定めは,以下のコード2にまとめた。

.list-item {

    transition: 0.25s linear;
}

.list-item::before,
.list-item::after {

    transition: 0.25s linear;
}

コード2 マウスポインタを重ねるとボタンが飛び出す3D風のナビゲーションバー

* {
    box-sizing: border-box;
}
html,
body {
    width: 100%;
    height: 100%;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
}
.nav-bar {
    transform: rotate(-35deg) skewX(20deg) skewY(5deg);
}
li {
    list-style: none;
}
.list-item {
    background: #000;
    color: #575757;
    text-align: center;
    height: 2.5em;
    width: 4em;
    line-height: 2.5em;
    border-bottom: 1px solid #060606;
    position: relative;
    display: block;
    box-shadow: -2em 1.5em 0 #e1e1e1;
    transition: 0.25s linear;
}
.list-item:hover {
    background: #ff6e42;
    color: #fffcfb;
    transform: translate(0.9em, -0.9em);
    box-shadow: -2em 2em 0 #e1e1e1;
}
.list-item:hover::before {
    background: #b65234;
    width: 1em;
    top: 0.5em;
    left: -1em;
}
.list-item:hover::after {
    background: #b65234;
    width: 1em;
    bottom: -2.5em;
    left: 1em;
    height: 4em;
}
.list-item::before,
.list-item::after {
    content: "";
    position: absolute;
    width: 0.5em;
    transition: 0.25s linear;
}
.list-item::after {
    height: 4em;
    background: #181818;
    bottom: -2.25em;
    left: 1.5em;
    transform: rotate(90deg) skewY(45deg);
}
.list-item::before {
    height: 2.5em;
    background: #121212;
    top: .25em;
    left: -0.5em;
    transform: skewY(-45deg);
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書