ラジオボタンにアニメーションを付けられるcssライブラリ 「radiobox.css」



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の紹介でした。
 
普段あまり意識することが少ないラジオボタンですが、このような遊び心があるアニメーションがあると、使う人の印象に残りやすいかもしれませんね!

radiobox.cssの公式ページ
 

この記事のカテゴリ
プログラミング

この記事に付けられているタグ