こんにちは。
今回は星評価にアニメーションを実装できるスタイルシート「Starability」です。
レーディングスターにアクセシビリティーを考慮したアニメーションを実装できるCSSライブラリを紹介します。
星評価にアニメーションを実装できるスタイルシート「Starability」
Starability
「Starability」をダウンロードしてみよう！
https://github.com/LunarLogic/starabilityにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
「Starability」を設置してみよう！
starability-all.min.cssをhead内に読み込みます。
1 | <link rel="stylesheet" type="text/css" href="starability-minified/starability-all.min.css"> |
html部分を記述します。
アニメーションなしのデフォルトの場合はstarability-basicというクラス名を付けますよ。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <form> <fieldset class="starability-basic"> <legend>Basic star rating:</legend> <input type="radio" id="rate5" name="rating" value="5"> <label for="rate5" title="Amazing" aria-label="Amazing, 5 stars">5 stars</label> <input type="radio" id="rate4" name="rating" value="4"> <label for="rate4" title="Very good" aria-label="Very good, 4 stars">4 stars</label> <input type="radio" id="rate3" name="rating" value="3"> <label for="rate3" title="Average" aria-label="Average, 3 stars">3 stars</label> <input type="radio" id="rate2" name="rating" value="2"> <label for="rate2" title="Not good" aria-label="Not good, 2 stars">2 stars</label> <input type="radio" id="rate1" name="rating" value="1"> <label for="rate1" title="Terrible" aria-label="Terrible, 1 star">1 star</label> </fieldset> </form> |
starability-basicの他にもstarability-slot、starability-grow、starability-growRotate、starability-fade、starability-checkmarkの6種類あります。
最後にstarability-imagesという画像の入ったフォルダをコピペすれば完了ですよ。
星評価におもしろい効果を出したい時に便利ですね。
以上で星評価にアニメーションを実装できるスタイルシート「Starability」でした。
