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

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

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

今回はお題として,マウスポインタを重ねたときのテキストのアニメーションを取り上げたい。Inspiration for Text Styles and Hover Effectsを参考に,3つほどつくってみたサンプル1)。もちろん,HTMLとCSSの構成はわかりやすく改め,コードも絞り込んである。ただ,3つすべてを解説しようとすると長くなりそうだ。そこで,サンプル1の2つ目については次回に送り,今回はひとつ目と3つ目を説明しよう。

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

2つの項目の静的なデザイン

<body>要素には,2つの項目をつぎのようなコードで構成した。項目ごとの<div>要素class属性"item")にリンクのための<a>要素class属性"link")を含め,テキストは<span>要素で加えている。アニメーションは,項目ごとの<a>要素にclass属性("animation-1"と"animation-3")を与え,後でCSSによって定める。なお,はじめの項目の<span>要素には,data-グローバル属性を加えた。これらの値は,アニメーションのCSSで用いることができる。さらに,すべての項目を<div>要素class属性"container")で包んだのは,まとめて扱えるようにするためだ。今回のお題では,とくにスタイルは定めない。

<div class="container">
    <div class="item">
        <a class="link animation-1" href="http://gihyo.jp/design/serial/01/createjs">
            <span data-letters-l="Crea" data-letters-r="teJS">CreateJS</span>
        </a>
    </div>
    <div class="item">
        <a class="link animation-3" href="http://gihyo.jp/design/serial/01/css-animation">
            <span>CSS</span>
            <span>3</span>
        </a>
    </div>
</div>

Google Fontsはつぎの3つを使った(第5回のGoogle Fontsと回り込みの解除参照)。また,CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んである(第1回のベンダープレフィックスと-prefix-freeの項参照)。

<link href="https://fonts.googleapis.com/css?family=Raleway:400,900" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Dosis:400,800" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet" type="text/css">
<script src="lib/prefixfree.min.js"></script>

前掲<body>要素の記述に対しては,以下のコード1<style>要素を与える。まだアニメーションもマウスインタラクションもない。ただし,はじめの項目には,すでにCSSで飾りつけがなされている図1)。水平に少し位置のずれたテキストが重なり,上下には線が加わった。

図1 はじめの項目テキストはふたつ重なって上下に線が加わった

図1 はじめの項目テキストはふたつ重なって上下に線が加わった

コード1 はじめの項目のテキストはふたつ重ねて上下に線を加える

body {
    font-family: Arial, sans-serif;
    background-color: Skyblue;
}
.item {
    padding: 25px 0;
    z-index: 1;
    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;
}
.animation-1::before {
    right: 0;
    top: 0;
}
.animation-1::after {
    left: 0;
    bottom: -0.05em;
}
.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);
}

.animation-3 {
    font-weight: 900;
    font-family: 'Raleway', Arial, sans-serif;
    line-height: 1em;
    margin-top: 0;
    color: Steelblue;
}
.animation-3 span {
    position: relative;
    display: inline-block;
}

著者プロフィール

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

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

URLhttp://www.FumioNonaka.com/

著書

コメント

コメントの記入