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

カテゴリ:cssだけでチャレンジ

公開日:2020.09.15 最終更新日:2023.08.09
このエントリーをはてなブックマークに追加

こんにちは!inglowの開発担当です。
今回は、cssのアニメーションを活用して、ルーレットを作りたいと思います。
「cssだけで●●」は前からやってみたかったことなので挑戦してみました!
説明はいいや!という方は「完成!」で完成物が見れます。 また、弊社ではWebプロモーション成功事例集をまとめた限定資料を無料で配布しています。 Webマーケティングに興味がある方は、下記ページより目を通してみてください。

どんなものを作るのか

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

またwebで集客する方法を別の記事にまとめております。 詳しく解説しているので、web集客について深く知りたい方は、ぜひこちらもご覧ください。

web集客
【2023年更新】Web集客の方法と種類を無料・有料別に紹介!
今回の記事を読むことで、Web集客をして、実際に売上を伸ばすための最適な方法をご紹介します。

まずはHTMLをコーディング

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

ルーレットの針をつくる

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

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

ルーレットの盤をつくる

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

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

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

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

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

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

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

アニメーションを作る

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

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

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

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

完成!

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

さいごに

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

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






弊社inglowでは、これから広告の運用を考えられている方、あるいはこれから広告代理店に運用をお願いされる方向けに、「業界別Web広告の成功事例」をまとめた資料を無料配布しております。

下記のフォームに入力いただくだけで、無料で資料をダウンロードしていただけます。ぜひご利用下さい。

mihon

    このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシー利用規約が適用されます。

    この記事のあとによく読まれています

    一覧へ戻る