jQueryで作るおみくじ

jQueryで作るおみくじ

こんにちは、稲垣です。

明けましておめでとうございます。今年もどうぞよろしくお願いいたします。

新年明けて1本目のブログになるので、今回はjQueryでおみくじを作成してみました。

目次

デモ

まずは完成イメージです。

ボタンを押すと「大吉・吉・中吉・小吉・凶」がランダムで出てきます。

html、CSS、画像ファイルの準備

html

#bouと#iconはランダムの結果に応じてimgタグを後から挿入します。

CSS

各パーツはほぼposition: absoluteで位置を指定しています。
おみくじの箇所の構造は下図のようになります。

img170113_1

画像ファイルの準備

各パーツを準備します。

結果の棒とアイコンのファイル名には同じ番号をつけておきましょう。

img170113_2

動きの実装

それでは動きの部分を作っていきます。

jQueryRotateとjQueryEasingPluginを使用するので先に読み込んでおきましょう。

jQueryRotateのダウンロードはこちら

jQueryEasingPluginのダウンロードはこちら

まずはおみくじの結果を決めましょう。

0~4の間で乱数を取得し、その数字を基に棒とアイコンの画像を配置します。

続いてスタートボタンをクリックした後の動きを書いていきます。

ボタンが消えたらおみくじの箱が移動、移動したら棒が出て来るアニメーション、棒が出てきたらアイコンが出現という様に、一つのアニメーションが完了した時点で次の処理を実行させていきます。

それぞれのアニメーションのスピード調整やdelay()を使ってタイミングの調整を行ったら完成です。

まとめ

最後にコードをまとめて載せます。

以上、いかがでしたでしょうか?

初詣でおみくじの結果がよくなかった人は大吉が出るまで更新ボタンを押して繰り返しできますよ!

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