inglow Blog

Tech Blog
エンジニアブログ

cssだけでルーレット作ってみた

2020.09.15

このエントリーをはてなブックマークに追加

こんにちは!inglowの開発担当です。
今回は、cssのアニメーションを活用して、ルーレットを作りたいと思います。
「cssだけで●●」は前からやってみたかったことなので挑戦してみました!
説明はいいや!という方は「完成!」で完成物が見れます。

どんなものを作るのか

デザインはこんな感じのものを作ろうと思います。 css3のプロパティをふんだんに活用して作っていきます。

まずはHTMLをコーディング

とりあえず★をどうやって配置するかは後回しで…
スタートボタン、ルーレットの針、ルーレットの文字盤をコーディングしていきます。

ルーレットの針をつくる

borderの特性を利用して三角が作れるのは、少しCSSをかじった人であれば聞いたことがあると思います。
これを利用して、逆三角形の針を作成します。

オレンジの逆三角形ができました。

ルーレットの盤をつくる

まずは、それぞれの要素を回転させていきます。

先ほど作ったルーレットの針を応用して、 砂時計みたいな感じで疑似要素を使ってそれぞれの要素に三角を作ります。 親要素となる、「.ban」を回転させているので、疑似要素のbeforeで上が底辺の三角形と afterで下が底辺の三角形を作って砂時計の形を作るだけでルーレットっぽくなります。

三角を作るためには、ルーレットのそれぞれの幅についてあらかじめ計算する必要があります。 三角形が二等辺三角形で、斜辺の長さ・内角がわかっているので、三平方の定理を使えば「辺a」を求めることができます。

また、ここがわかれば、三角形を作る時のborder-left・border-rightを求めることができます。

計算は、平方根とかでてきてcssのcalcでは対応できないので、こちらの三角関数の計算ツールを使って計算させていただきました…便利ですね…!

ルーレットのスタートボタンをつくる

次に、ボタンを作成します。こちらは簡単ですね。
チェックボックスは見えていなくてもOKなので、隠します。
また、文字は、ルーレットが回っている時と止まっている時で変更したいので、疑似要素の中で指定します。

アニメーションを作る

とりあえず「★」のテキストは置いておいて、ボタンを押したらまわす。押したら止める を実装してみます!
アニメーションの動きをkeyframeで指定します。 1回転すればいいので、角度が0度→180度→360度 と変化するように指定します。

アニメーションが動くか確認するため、一度普通にアニメーションを指定します。

無事に動いたら、次はボタンを押した時に動くようにします。

ここまで作ると、大分形になってきたと思います。
ボタンを押すとルーレットが回って、もう一度押すとストップするようになったと思います。
ここで最後に当たりの色(ピンクの方)に「★」を配置して完成です。 盤の中の色の配置と同じように、回転させて配置しました。

完成!

できました!くるくるまわって、ストップしたところで止まります。
すべての記述はcodepenに書きましたので、参考にしてください。

さいごに

前々からcssのアニメーション等について調べていたので思ったように実装することができました!
javascript無しでここまで実装できるとは…。ほかにも何かできないかいろいろ考えてしまいますね。
どこまでできるのか知っていないとなかなか考えるのは難しいかもしれないですが、 こういったものを作ってみるのは勉強にもなるのでぜひ真似でもいいので作ってみてください。

ルーレット盤のサイズを計算するときに使った手書きメモも載せておきます。

Related Blog
関連記事

2020.09.22
道路標識イラストをCSSで作ってみた