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

第9回 マウスポインタを重ねたテキストのアニメーション(2)

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

今回も引き続き,マウスポインタを重ねたときのテキストのアニメーションだ。前回はお題の3つのサンプルのうち2つ解説したので,残りのひとつを仕上げよう。今回も,擬似要素の扱いとそれらのアニメーションが鍵になる。

テキストの上を水平線が横切る

前回の2つの項目の静的なデザイン<body>要素に書いたコードに,テキストが含まれた要素をつぎのように加える。つくりは他の2項目と同じで,<div>要素class属性"item")の中にリンクのための<a>要素class属性"link")を含めた。ただ,テキストは直に書き込み,data-グローバル属性が与えられた空の<span>要素を2つ添えた。そして,<a>要素にはアニメーションのためのclass属性("animation-2")も加えてある。

<div class="container">

    <div class="item">
        <a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
            Away3D
            <span data-letters="Away3D"></span>
            <span data-letters="Away3D"></span>
        </a>
    </div>

</div>

このアニメーションのclass属性("animation-2")には,まずつぎのような静的なスタイルを与える。まだアニメーションもマウスインタラクションもない図1)。アニメーションのほとんどは,これから擬似要素で加えてゆくことになる。

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    line-height: 1.3em;
    margin-top: -0.2em;
}

図1 <a>要素に加えたテキストの静的なスタイル

図1 <a>要素に加えたテキストの静的なスタイル

はじめに加える擬似要素は,横に細長い線のような矩形だ。つぎのCSSで定め,位置はtransformプロパティに与えたtranslateX()関数でテキストの左に移した図2)。

.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
}

図2 ::before擬似要素でテキストの左に加えた水平線

図2 ::before擬似要素でテキストの左に加えた水平線

その水平線は,テキストにマウスポインタを重ねたとき:hover擬似クラス),テキストの右端に横切ってゆくtransitiontransformプロパティ)。なお,テキストアニメーションのクラスanimation-2overflowプロパティにhiddenを与えて,テキストの外側は隠した。ここまでのCSSの定めをまとめたのが以下のコード1だ。

.animation-2 {

    overflow: hidden;

}

.animation-2::before {

    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}

コード1 テキストの上を擬似要素の水平線が横切る

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    overflow: hidden;
    line-height: 1.3em;
    margin-top: -0.2em;
}
.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}

擬似要素でつくった2つのテキストを重ねる

つぎに,テキストアニメーションの要素class属性"animation-2")に含めた2つの<span>要素にも,つぎのようにそれぞれ擬似要素を加え,data-グローバル属性からattr()式で得た同じテキストを異なる色で定めた図3)。

<a class="link animation-2" href="http://gihyo.jp/design/serial/01/away3d-typescript">
    Away3D
    <span data-letters="Away3D"></span>
    <span data-letters="Away3D"></span>
</a>
.animation-2 span::before {
    content: attr(data-letters);
    color: white;
}

図3 擬似要素で加えられた2つのテキスト

図3 擬似要素で加えられた2つのテキスト

そのうえで,つぎのCSSにより擬似要素のテキストをもとのテキストに重ね合わせた図4)。この後,2つの擬似要素のテキストにアニメーションを与える。ここまでのCSSの定めをまとめたのが以下のコード2だ。

.animation-2 span {
    position: absolute;
    left: 0;
}
.animation-2 span::before {

    position: absolute;

}

図4 2つの擬似要素のテキストがもとのテキストに重なった

図4 2つの擬似要素のテキストがもとのテキストに重なった

コード2 擬似要素のテキストを2つもとのテキストの上に重ねて置く

.animation-2 {
    font-weight: 800;
    color: Steelblue;
    font-family: 'Dosis', sans-serif;
    overflow: hidden;
    line-height: 1.3em;
    margin-top: -0.2em;
}
.animation-2::before {
    content: '';
    width: 100%;
    height: 6px;
    background: white;
    position: absolute;
    top: 50%;
    transform: translateX(-100%);
    transition: 0.4s ease-in-out;
}
.animation-2:hover::before {
    transform: translateX(100%);
}
.animation-2 span {
    position: absolute;
    left: 0;
}
.animation-2 span::before {
    content: attr(data-letters);
    position: absolute;
    color: white;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入