HTMLのラジオボタンの選択時にアニメーションを付けることが出来るCSSライブラリ「radiobox.css」の紹介です。
HTMLでラジオボタンと言えば、一般的に「はい・いいえ」等の1種類だけ選択する場面に使い、サーバーにデーターを送信するフォーム上で よく使われる機能です。
ラジオボタンのスタイルを変えるデコレーションは割と目にするような気がしますが、クリック時のアニメーションはあまり聞きません。
そんなラジオボタンの選択時に 簡単にアニメーションを加えられるライブラリが「radiobox.css」です。
radiobox.cssのアニメーション ( *実際に導入してbootstrap上でテストしました )
radiobox.cssは その名の通りCSSなので、javascriptの記述なしで使うことができます。
( * アニメーションは現在12種類用意されています )
radiobox.cssのインストール
radiobox.cssを入手するには こちら(* Github内のページ) から直接ダウンロードする方法と、npm, bowerからのインストールにも対応しています。
# npmでインストールする場合
npm install radiobox.css --save
# bowerでインストールする場合
bower install radiobox.css --save
radiobox.cssの使い方
radiobox.cssの使い方は、ライブラリを読み込んで radioボタン内のinputタグのクラスに"radiobox-アニメーション名"を割り当てるだけで簡単に使えます。
<!-- html上でradiobox.cssの読み込み -->
<link rel="stylesheet" href="/radiobox.css/dist/css/radiobox.min.css">
<!-- radiobox.cssの使い方 -->
<input class="radiobox-アニメーション名" type="radio" name="demo1">
<!-- e.x.p: boingアニメーションを使う場合 -->
<input class="radiobox-boing" type="radio" name="demo1">
# 用意されているアニメーション
# exp: class="radiobox-boing"
boing
pump
hooray
ufo
scatman
vertigo
flash
return
boom
wheel
foucus
tremolo
Summary
以上がradiobox.cssの紹介でした。
普段あまり意識することが少ないラジオボタンですが、このような遊び心があるアニメーションがあると、使う人の印象に残りやすいかもしれませんね！
