このページの本文へ

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

あのサイトとはひと味違う!こだわりマウスオーバー20連発

2014年10月24日 11時00分更新

本間宣光 / Stronghold

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

今回の注目サイト:
Omnisense

http://omnisense.net/

 ICTを駆使したプロダクトを紹介する、フランス企業のWebサイト。

サイトを彩る多彩なアニメーション

 フラットデザインをベースに、随所に気持ちいいアニメーションを取り入れている「Omnisense」。コンテンツごとに用意されているさまざまなアニメーションは、どれも洗練された動きで、サイトの魅力をぐっと高めている。

 ページトップにあるシンプルなボタンにマウスオーバーすると、上から矢印のアイコンがスライドして下りてくる。注目したいのは、マウスがボタンから離れたとき(マウスアウト時)の動きだ。

 よくある:hoverで実装したマウスオーバーのアニメーションは、マウスオーバー時とアウト時の動きを別々に設定できないため、必ず逆の動きになる。マウスオーバー時に上からスライドしてきたら、マウスアウト時には上へ戻る、といった具合だ。

 ところが、Omisenseのボタンは、マウスアウト時にそのまま下にスライドを続ける。細かな違いだが、最近ではこういったマウスオーバーのアニメーションにこだわるサイトも多い。

 今回は「Omnisense」を参考に、CSS3とjQueryを使ったマウスオーバーアニメーションを作成する。

STEP 1:ベースになるボタンの作成

 マウスオーバーすると色違いのボタンが上からスライドして下りてくるアニメーションを作成してみよう。

 まず、ベースになるボタンを作成する。div要素「.btn」を用意し、ボタンとして表示する内容を内側のp要素でマークアップする。ボタンのサイズやボーダーなどのスタイルは、.btnに対して指定しておこう。

 次に、マウスオーバー時のボタンを、div要素の内側にspan要素「.slide」として用意する。.slideは元のボタンの上部に接するようにCSSで配置し、マウスオーバー時のスタイルを指定しておく。親要素である「.btn」にoverflow: hidden;を適用すると、ボタンの高さからはみ出した「.slide」が非表示になり、ボタンの初期表示状態が完成する。

■ソースコード(HTML)

<div class="btn">
    <p>Slide Down</p>
    <span class="slide">Slide Down</span>
</div>

■ソースコード(CSS)

.btn {
    display: inline-block;
    position: relative;
    width: 200px;
    height: 50px;
    font-size: 12px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #00B6C1;
    cursor: pointer;
    overflow: hidden;
}
.btn p {
    width: 100%;
    height: 100%;
    color: #00B6C1;
}
.slide {
    position: absolute;
    top: -100%left: 0;
    width: 100%;
    height: 100%;
    background: #00B6C1;
    color: #FFF;
}

STEP 2: アニメーション用のスタイルの定義

 CSSの:hover擬似クラスではマウスアウト時のアニメーションを自由に設定できないので、アニメーション用の動きを定義するスタイルを別途用意し、マウスの状態に応じてjQueryでclass属性を切り替える。具体的には、アニメーション無しの状態(初期状態)に戻す「.reset」、マウスオーバー時の「.enter」、マウスアウト時の「.leave」の3つのclass属性を作成し、以下のように状態を定義しておく。

■ソースコード(HTML)

<div class="btn">
    <p>Slide Down</p>
    <span class="slide reset">Slide Down</span>
</div>

■ソースコード(CSS)

/* 初期化クラス */
.reset {
    visibility: hidden;
    -webkit-transition: none 0s ease 0s;
            transition: none 0s ease 0s;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
/* マウスホバーした時 */
.slide.enter {
    -webkit-transition: -webkit-transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
            transition:         transform .15s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0s;
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
}
/* マウスホバーが離れた時 */
.slide.leave {
    -webkit-transition: -webkit-transform .15s ease-in-out 0s;
            transition:         transform .15s ease-in-out 0s;
    -webkit-transform: translate3d(0, 200%, 0);
            transform: translate3d(0, 200%, 0);
}

STEP 3:jQuery を使用してアニメーションを実装

 STEP 2でアニメーションの準備ができたので、アニメーションを実行してみよう。jQueryにはアニメーションさせるためのanimateメソッドもあるが、今回は前に用意した3つのclass属性をマウスオーバーに合わせて付加または削除する。

 以下のコードを記述すればマウスオーバーアニメーションの完成だ。

■ソースコード(JavaScript)

$(function() {
    $('.btn').on({
        mouseenter: function() {
            // マウスオーバーした時
            var $this = $(this);
            $this.find('span').removeClass('reset leave').addClass('enter');
        },
        mouseleave: function() {
            // マウスオーバーが離れた時
            var $this = $(this);
            $this.find('span').removeClass('reset enter').addClass('leave');
            // アニメーション終了後 reset クラスで初期化
            setTimeout(function() {
                $this.find('span').removeClass('leave').addClass('reset');
            }, 150);
        }
    });
});

この連載の記事

一覧へ

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

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

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

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

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

ランキング