はじめに
12月になると流行語大賞をはじめとする、様々な〇〇大賞が発表されます。
今回は、そんなときに使われるランキングボードをCSSで作りました。
CSSで作ったらこうなった
オレンジの「PUSH ME」ボタンを押すとランキングがパタパタと動き出します。
今年の流行語大賞をランキングボードに出してみます。
See the Pen CSS Ranking Board by saka212 (@saka212) on CodePen.
ソース
カスタマイズに必要な部分のHTMLとCSSを載せます。
全体はちょっと長いのでcodepenで。
https://codepen.io/saka212/pen/PowZppx
ランキングが動き出す仕組み
input[type="checkbox"]{display:none;}label{display:inline-block;box-sizing:border-box;width:100px;height:100px;margin-right:5px;line-height:100px;background:#ffa500;border:solid1px#ffa500;border-radius:4px;border-bottom:4pxsolid#d37800;text-shadow:1px1px1pxrgba(0,0,0,0.2);color:#fff;text-align:center;font-weight:bold;vertical-align:top;cursor:pointer;}.btn:checked+label+.frame.flip:nth-of-type(1){/* animation: keyframe名 周期 開始タイミング 回数 アニメショーン終了後のスタイル指定 */animation:frame-rotatevar(--duration)calc(var(--delay)*0)var(--count)forwards;}.btn:checked+label+.frame.flip:nth-of-type(2){animation:frame-rotatevar(--duration)calc(var(--delay)*1)var(--count)forwards;}.btn:checked+label+.frame.flip:nth-of-type(3){animation:frame-rotatevar(--duration)calc(var(--delay)*2)var(--count)forwards;}.btn:checked+label+.frame.flip:last-child{display:none;}チェックボックスを隠し、ボタン化したラベルを押すことで、ランキングがパタパタと動きます。
動きの流れを簡単に説明すると...
1.チェックボックスとラベルタグを関連付ける。
↓
2.関連付けることで、ボタン化したラベルをクリックするとチェックが入る。
↓
3.チェックされたときに適用されるCSSに、animationプロパティを書いておくことでアニメが動く。
表示したいパタパタの数の合わせて、.btn:checked + label + .frame .flip:nth-of-type(1) {...}
の部分は増やしておきます。animationプロパティの値は、CSSカスタムプロパティで設定すると便利です。
ランキング内容を変えて遊びたいとき
<divclass="row"> <inputtype="radio"id="btn1"class="btn"> <labelfor="btn1">PUSH ME</label> <divclass="frame"> <divclass="flip"data-txt="ONE TEAM"data-txt-next="令和"></div> <divclass="flip"data-txt="令和"data-txt-next="タピる"></div> <!-- ↓↓ この 「data-txt-next」にパタパタが止まった止まったときに表示したいテキスト --> <divclass="flip"data-txt="タピる"data-txt-next="ONE TEAM"></div> <!-- ↓↓ この「data-txt」にボタンを押す前に表示するテキスト --> <divclass="flip open"data-txt="大賞"></div> </div></div>ランキングひとつ分のhtmlです。
３つのパタパタを表示しているので、このhtml部分を３つ用意しています。
ボタンを押す前に表示するテキストを、<div class="flip open" data-txt="..."></div>のdata-txt="..."
に書きます。
パタパタが止まったときに表示したいテキストは、そのひとつ上のdivのdata-txt="..."に書きます。
感想
rotateを使ったアニメーションはパズルですね。
よくよく整理しながら進めていかないと、何を作っているかわからなくなります。
リアリティーを出せるように、いろいろなやり方をためしているうちに、自分の頭の中もパタパタしてきたので「それっぽさ」が出る方向に転換しました。
もっとシンプルな作り方もあるかもしれません。
おわりに
「2019年ティーンが選ぶトレンドランキング」は、ほとんどわかりませんでした...。