dataset (カスタム data 属性)の活用　その3

この記事は javascript（やjQuery）等のプログラム以外で「カスタム data 属性」の使用例を見たことが無い、デザイナーさんやフロントエンドエンジニアさん向けに書いています。

前回記事で、カスタム data 属性の使用例を紹介しました。今回の記事では、カウントダウンアニメ演出を dataset を使って作るサンプルを紹介しています。

疑似要素 before (after) に content : attr(属性名) で値取得して表示させる

今回記事の基本アイデアも、疑似要素に content : attr(属性名) の文字を表示する、というネタです。

サンプル1 dataset、content、before、animation を組み合わせて文字列でカウントダウンアニメを作る

CSS研究 / animation / animation-delay のページで作ってみた文字列でのカウントダウンアニメについて、このページでそのアイデアを紹介します。
アイデアとしてはマウスホバーで画像を変更する演出を、javascript を使わず css のみで作る手法と同じで、ホバー時に 1回だけ top や left 等の値を変更するのではなく、アニメーションで何回か変更するというものとなっています。

例えば、「cssのみ カウントダウン 文字列」等のキーワードで検索すると下記の HTML ソースのような感じで span タグで数値を用意し、top の数値をアニメーションさせるサンプルが紹介されていたりするかと思います。

不要なspanを増殖させてしまう例
<div class="クラス名">
<span>4</span>
<span>3</span>
<span>2</span>
<span>1</span>
<span>0</span>
</div>

こういう感じで数値を用意したら、カウントダウンアニメクラスで各 span の数値を移動させたり、position : absolute で同じ場所に重ねておいたものを display : block や none、opacity : 0→1 や transform で拡縮等でアニメさせる、という作り方になるかと思います。

原森ではこういうあまり意味のない装飾用の span 等を大量に使うくらいなら、画像で作ることを推奨したりするのですが、画像でコマ漫画アニメ手法でカウントダウンさせるのと同様に、css のみでテキストでも、やろうと思えばできるというのを考えてみたのがサンプル1 になります。

HTML ソースのように、カウントする数値文字列は改行させるため、半角スペースを空けて記述しています。
（縦に配置させるためです）

<div class="hm_wt_4" data-t="４ ３ ２ １ ０">原森情報技術研究所</div>

css では、hm_wt_4 が親ボックスの設定で、hm_wt_4 : before にカウントダウンする数値を表示する設定と縦に移動するアニメを設定しています。※ベンダープレフィックスは省略しています。

/* 親div */
.hm_wt_4{
width:145px;
height:50px;
line-height:55px;
font-weight:bold;
font-size:14px;
padding:0 0 0 25px;
margin:5px;
color:rgba(255,153,0,1);
background-color:rgba(0,51,0,1);
position:relative;
top:0;
left:0;
overflow:hidden;
}
/* カウントダウン数値部分 */
.hm_wt_4:before{
color:rgba(255,255,255,1);
font-size:15px;
text-align:left;
width:15px;
height:175px;
line-height:35px;
padding:0px;
margin:0px;
content:attr(data-t);
position:absolute;
left:10px;
top:0px;
animation:ta_wt4 5s step-end 1s infinite;
}
/* アニメ */
@keyframes ta_wt4{
0%{top:10px;}
20%{top:-25px;}
40%{top:-60px;}
60%{top:-95px;}
80%{top:-130px;}
100%{top:-165px;}
}

カウントダウン用の数値には、HTML 構文的に何の意味もありませんので、やはり、span で用意するよりタグの属性の文字列として用意するのが良いかと思ったりします。

背景を塗るだけで理解しやすくなる種明かしサンプル

親div の overflow : hidden を削除し、before に背景色を塗って、動作を分かりやすくした種明かしサンプルを見ると、なにをやっているのかが一目瞭然かと思います。

アニメは単純に、上に移動させているだけです。ポイントは dataset (カスタム data 属性)でカウントダウン数値文字列を用意すれば、span タグを大量に書かなくても良くなる、と言う点です。
また、数字文字列の間に半角スペースを入れると自動改行して縦に並んでくれるというのもポイントかと思います。

横移動でも作ろうと思えばできますが、その場合は数字文字列を並べ、文字の間を [letter-spacing] で広げて配置し、横移動アニメさせる、というものになるかと思います。
ですが、FF & IE と GC & Opera （あと多分 MAC 系）で文字サイズが微妙に異なりますので、縦アニメよりも調整するのが難しいかと思います。

おまけ：他の文字にして秒数を変えてみたサンプル

data-t="４ ３ ２ １ ０" を記号文字にしたサンプルです。1sアニメにしています。
1つ目は[data-t="・ ● ◎ ○ 　"](最後は全角スペース)
2つ目は[data-t="■ ◆ □ ◇ □"]
です。

昔なら装飾画像をアニメ gif で作って文言の前に貼ってたりするような感じのサンプルです。

まとめ

ということで、今後はサイト制作時には、独自データ属性を使えば、js だけでなく、css のみでもいろいろ面白いものが作れるのではないかと思ったりします。

以上、長い記事を最後まで読まれたみなさん、お疲れさまでした。

ページトップへ