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

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

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

終わりの項目をアニメーションさせる

終わりの項目のテキストは,つぎのようにふたつの<span>要素に分けておいた。それぞれに異なったアニメーションを加えるためだ。

<a class="link animation-3" href="http://gihyo.jp/design/serial/01/css-animation">
    <span>CSS</span>
    <span>3</span>
</a>

テキストは,はじめ親要素class属性"animation-3")から同じ色を与えてあった(前掲コード1)⁠それを:hover擬似クラスで違う色に変えよう。2つの<span>要素は,擬似クラス:first-of-type:last-of-typeで選び分けられる。transitionプロパティを定めれば,マウスポインタを重ねるとカラーがアニメーションする図7)⁠

.animation-3 span {

    transition: 0.5s;
}
.animation-3:hover span:first-of-type {
    color: white;
}
.animation-3:hover span:last-of-type {
    color: Midnightblue;
}

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

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

さらに,2つの<span>要素に,つぎのようにそれぞれ::before擬似要素で矩形を加える。領域は,テキストのアニメーションに定めたカラーで塗った。それぞれの位置は,translateY()関数でテキストの領域の上下外側に大きくずらしてある図8)⁠

.animation-3 span::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
}
.animation-3 span:last-of-type::before {
    background: Midnightblue;
}
.animation-3 span:first-of-type::before {
    transform: translateY(-150%);
}
.animation-3 span:last-of-type::before {
    transform: translateY(150%);
}

図8 テキスト領域の上下外側に擬似要素の矩形が置かれた

図8 テキスト領域の上下外側に擬似要素の矩形が置かれた

2つの矩形は,つぎのように垂直方向の反対側に向けて,テキストの上をアニメーションで横切らせる。そして,overflowプロパティプロパティの値をhiddenに定めれば,テキスト領域の外側は隠されてしまう。こうして,マウスポインタを重ねたとき,上下に動く矩形がテキストに色を加えたような表現ができた。

.animation-3 {

    overflow: hidden;

}

.animation-3 span::before {

    transition: 0.5s;
}

.animation-3:hover span:last-of-type::before,
.animation-3 span:first-of-type::before {
    transform: translateY(-150%);
}
.animation-3:hover span:first-of-type::before,
.animation-3 span:last-of-type::before {
    transform: translateY(150%);
}

これで,マウスポインタを重ねたときのテキストのアニメーションが2つできあがった。擬似要素をうまく使うと,このように単純なテキストにも多彩な表現が加えられる。2つの項目のCSSの定めは,つぎのコード2にまとめたとおりだ。そして,以下にサンプル2として,2つ分のアニメーションをjsdo.itに掲げた。次回に,残る項目のアニメーションについて説明する。

コード2 マウスポインタを重ねたときのテキストのアニメーション

body {
    font-family: Arial, sans-serif;
    background-color: Skyblue;
}
.item {
    padding: 25px 0;
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.link {
    text-decoration: none;
    position: relative;
    font-size: 5em;
    line-height: 1;
}
.animation-1 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    color: Steelblue;
    padding: 0 0 0.125em;
    margin-top: -0.05em;
}
.animation-1::before,
.animation-1::after {
    content: '';
    width: 100%;
    height: 3px;
    background: Darkblue;
    position: absolute;
    transform: scaleX(0);
    transition: 0.5s;
}
.animation-1::before {
    right: 0;
    top: 0;
    transform-origin: right;
}
.animation-1::after {
    left: 0;
    bottom: -0.05em;
    transform-origin: left;
}
.animation-1:hover::before,
.animation-1:hover::after {
    transform: scaleX(1);
}
.animation-1 span::before,
.animation-1 span::after {
    position: absolute;
    color: white;
    opacity: 0;
    transition: 0.5s;
}
.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);
}
.animation-1:hover span::before,
.animation-1:hover span::after {
    opacity: 1;
    transform: translateX(0);
}

.animation-3 {
    font-weight: 900;
    font-family: 'Raleway', Arial, sans-serif;
    line-height: 1em;
    margin-top: 0;
    overflow: hidden;
    color: Steelblue;
}
.animation-3 span {
    position: relative;
    display: inline-block;
    transition: 0.5s;
}
.animation-3:hover span:first-of-type {
    color: white;
}
.animation-3:hover span:last-of-type {
    color: Midnightblue;
}
.animation-3 span::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    transition: 0.5s;
}
.animation-3 span:last-of-type::before {
    background: Midnightblue;
}
.animation-3:hover span:last-of-type::before,
.animation-3 span:first-of-type::before {
    transform: translateY(-150%);
}
.animation-3:hover span:first-of-type::before,
.animation-3 span:last-of-type::before {
    transform: translateY(150%);
}

サンプル2 CSS3: Text styles and hover effects (1)

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入