分123今回はお題として,マウスポインタを重ねたときのテキストのアニメーションを取り上げたい。Effects」を参考に,3つほどつくってみた(サンプル1⁠)⁠。HTMLとCSSの構成はわかりやすく改め,コードも絞り込んである。3つすべてを解説しようとすると長くなりそうだ。そこで,サンプル1の2つ目については次回に送り,今回はひとつ目と3つ目を説明しよう。effects2つの項目の静的なデザイン<body>要素には,2つの項目をつぎのようなコードで構成した。項目ごとの<div>要素(class属性"item")にリンクのための<a>要素(class属性"link")を含め,テキストは<span>要素で加えている。アニメーションは,項目ごとの<a>要素にclass属性("animation-1"と"animation-3")を与え,後でCSSによって定める。はじめの項目の<span>要素には,data-グローバル属性を加えた。これらの値は,アニメーションのCSSで用いることができる。すべての項目を<div>要素(class属性"container")で包んだのは,まとめて扱えるようにするためだ。今回のお題では,とくにスタイルは定めない。Fontsと回り込みの解除」参照⁠)⁠。CSSにベンダープレフィックスを付けなくて済むように,<script>要素で-prefix-freeを読み込んである(第1回の「ベンダープレフィックスと-prefix-free」の項参照⁠)⁠。src="lib/prefixfree.min.js"></script>前掲<body>要素の記述に対しては,以下のコード1の<style>要素を与える。アニメーションもマウスインタラクションもない。はじめの項目には,すでにCSSで飾りつけがなされている(図1⁠)⁠。水平に少し位置のずれたテキストが重なり,上下には線が加わった。