BLOG

  1. HOME
  2. ブログ
  3. WEB制作・デザイン
  4. コーディング(html/css/JavaScript)
  5. jQueryでつくる当たりくじ
by 稲垣 稲垣

jQueryでつくる当たりくじ

jQueryでつくる当たりくじ

こんにちは、稲垣です。

先日ドミ○ピザで50%OFFのクーポンをGETしたのでピザを頼みました。

3つのピザの箱から一つを選択し、当たれば50%OFFのクーポンが貰えるあれです。

当たるとついつい注文したくなっちゃいますよね。

というわけで今回は複数個の箱の中に一つだけ当たりくじが入っているものをjQueryで作成しました。

目次

デモ

まずは完成サンプルになります。

6個の箱から一つを選んでクリックするとアタリかハズレの吹き出しがでてきます。

html、CSS、画像ファイル

必要なファイルを準備していきます。

html

箱を置きたいだけ置きます。

あとは引いたあとに結果を表示させる場所を作っておきます。

css

各要素の配置場所などをCSSで整えましょう。

#kekkaは引いた後に表示させたいので、display: none;で最初は非表示にしておきます。

#atariと#sukaは箱をクリックした時に出てくる吹き出しです。

吹き出しは少しアニメーションさせたいので、margin-top: 80pxを入れておき、これが0pxになるように処理を入れようと思います。

画像ファイル

箱と吹き出しの画像を用意します。

箱は開いてるものと閉まっているものとで横幅をちゃんと揃えておきましょう。

動きの実装

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

今回はjQueryEasingPluginを使用したので、こちらを先に読み込んでおきます。

必要になる変数を準備します。

ここのランダム処理でatariに格納された数字がアタリ番号となります。

あとはいずれかの箱をクリックした時の処理を記述するだけです!

各処理の説明はコメントで入れてみました。

箱をクリックして吹き出しが出た後、結果が表示されるまでに少し間を設けたかったのでdelay()を使ってslideDownの処理が遅れて実行されるようにしています。

まとめ

短いですが以上で完成です!

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

クーポンの発行や商品の割引など、何らかの特典をつけたい時に使用すると効果的ではないでしょうか?

個人的にはせっかく当たりを引いて手に入れたクーポンなどは使わないともったいない気持ちになるので…。

簡単な処理なのでLPなどにも組み込みやすいのではないかと思います!

ページの先頭に戻る