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

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

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

はじめの項目を擬似要素で飾りつける

このお題は,擬似要素::beforeおよび::afterでテキストの飾りつけやアニメーションを加えることがひとつの鍵となる。前掲コード1では,すでにはじめの項目に上下の線と,少しずらして重ねたテキストが擬似要素で加えられた。擬似要素がなければ,つぎの図2のようなスタイルを定めたテキストが示されるだけだ。

図2 <span>要素に加えられたテキスト

図2

まず,はじめの項目の<a>要素にアニメーションのため定めたclass属性("animation-1")に,上下の線を擬似要素::before::afterで以下のように加えよう図3)⁠それぞれの位置決めが右上と左下で異なるのは,後で変形アニメーションの原点とするためだ。

<a class="link animation-1" href="http://gihyo.jp/design/serial/01/createjs">

</a>
.animation-1::before,
.animation-1::after {
    content: '';
    width: 100%;
    height: 3px;
    background: Darkblue;
    position: absolute;
}
.animation-1::before {
    right: 0;
    top: 0;
}
.animation-1::after {
    left: 0;
    bottom: -0.05em;
}

図3 擬似要素でテキストの上下に加えた線

図3 擬似要素でテキストの上下に加えた線

つぎに,もとのテキスト<span>要素)と少し左右外側にずらして重ねたのも擬似要素::before::afterだ。テキストを加えたいときは,contentプロパティに定める。その文字列の値は,前項で触れた,要素のdata-グローバル属性に与えた。値を取り出すには,以下のようにattr()を用いればよい。そして,2つの擬似要素の水平位置は,translateX()関数※1で少し外側にずらした図4)⁠

<span data-letters-l="Crea" data-letters-r="teJS">CreateJS</span>
.animation-1 span::before,
.animation-1 span::after {
    position: absolute;
    color: white;
}
.animation-1 span::before {
    content: attr(data-letters-l);
    left: 0;
    transform: translateX(-5px);
}
.animation-1 span::after {
    content: attr(data-letters-r);
    right: 0;
    transform: translateX(5px);
}

図4 擬似要素で左右外側にずらして重ねたテキスト

図4 擬似要素で左右外側にずらして重ねたテキスト

※1)

translate()関数を用いることもできる。引数はつぎのように,垂直と水平の移動をそれぞれ示すふたつの値だ。第2引数を省くと,垂直移動値は0とみなされる。

translate(水平移動, 垂直移動)

擬似要素をアニメーションさせる

はじめの項目にマウスポインタを重ねたら,擬似要素をアニメーションさせよう。まず,擬似要素で重ねたテキストは,はじめopacityプロパティで透明にしておく。そして,マウスポインタを重ねたとき:hover擬似クラス)⁠不透明に戻す。さらに,水平位置もtranslateX()関数でもとのテキストと合わせた。これで,transitionプロパティに時間を定めれば,擬似要素で重ねたテキストがフェードインしながらもとの位置に動く図5)⁠

.animation-1 span::before,
.animation-1 span::after {

    opacity: 0;
    transition: 0.5s;
}

.animation-1:hover span::before,
.animation-1:hover span::after {
    opacity: 1;
    transform: translateX(0);
}

図5 マウスポインタを重ねると左右のテキストがフェードインしながらもとの位置に戻る

図5 マウスポインタを重ねると左右のテキストがフェードインしながらもとの位置に戻る

つぎに,上下の線のアニメーションだ。つぎのように,はじめscaleX()関数で幅を0に縮めておく。そして,:hover擬似クラスでもとの幅に戻す。ただ,デフォルトでは,中央から伸び縮みすることになる。そこで,transform-originプロパティにより,変形の原点を上下の線でそれぞれ右と左に定めた。こうして,マウスポインタを重ねたとき,上の線は右から,下の線は左から伸びてゆく図6)⁠はじめの項目のアニメーションはこれでできあがった。

.animation-1::before,
.animation-1::after {

    transform: scaleX(0);
    transition: 0.5s;
}
.animation-1::before {

    transform-origin: right;
}
.animation-1::after {

    transform-origin: left;
}
.animation-1:hover::before,
.animation-1:hover::after {
    transform: scaleX(1);
}

図6 マウスポインタを重ねると上下の線がそれぞれ右と左から伸びる

図6 マウスポインタを重ねると上下の線がそれぞれ右と左から伸びる

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入