jQueryRotateプラグインを使ってくるくる回るルーレットを作ろう

jQueryRotateプラグインを使ってくるくる回るルーレットを作ろう

こんにちは、稲垣です。

先日、人生3度目のフルバンク停車を華麗に決め、数日お休みを頂きました。
その節はご迷惑をおかけして誠に申し訳ありませんでした。

さて、今回はjQueryRotateプラグインを使ってルーレットを作成してみました。
画像などを傾けたり、くるくる回したりを手軽にできるプラグインです。

弊社サイトのロゴ部分にも使われているのでロールオーバーしたらくるんと回りますよ。

目次

デモ

htmlとcssと画像を用意する

動きの実装

終わり

デモ

早速ですが完成イメージになります。
ページを開くと同時にルーレットが回り出し、止まると結果が出力されます。

htmlとcssと画像を用意する

htmlとcssになります。
針の位置を調整しつつ、各パーツにidを振ります。
jQueryRotateプラグインをhead部分で忘れずに読み込んでおきましょう!

 html

css

画像パーツ

画像パーツもそれぞれ用意します。

img141107_1

ルーレットの回っている感を出すため、GIFアニメの針も用意してみました。

img141107_2

動きの実装

それではいよいよクルクルさせてみます!
…と、その前にまず肝となる値や処理を最初にまとめて書き出しましょう。

各行の説明はコメントで入れてみました。
ここまで書けばほぼできたようなもんだと思います。
実行してもまだピクリとも動きませんが。

クルクル回す処理を追記します。
これで回るようになりました!止まりませんが!

そしてtimeoutミリ秒後に実行されるルーレット停止の処理になります。

最後に停止後の処理を各エリア毎に用意してやります!
ここで画像を挿入するなり隠していたコンテンツを表示させるなりページ遷移させるなり好きなようにやってください。

終わり

今回のコードをまとめて載せます。

コメントが嵩をとってますが、コード自体はそんなに長くありません。
最初は全く違う方法で試行錯誤していたので、きちんと動くようになるまでだいぶ手こずってしまいました…。

ページを開くと同時にスタートだと、環境によっては画像が表示されないまま結果までいってしまうこともあるので、もし実用する場合はスタートボタンなどを設置した方が良いかなと思います。

それではまた。
皆さんも雨の日の運転には十分にお気をつけて。

同じカテゴリー(WEB制作・デザイン)の記事