>  >  >  > 

jQueryでグルグル回るカードから1枚選択してめくる動きを作ってみた

jQueryでグルグル回るカードから1枚選択してめくる動きを作ってみた

こんにちは、ここ3ヶ月でバイクを4回寝かしつけた稲垣です。
もう立ちごけではかすり傷も負わないくらい受け身は上達したと思います。心は2回ほど折れました。

さて、今回はjQueryRotateプラグインを使ってカードをグルグル回し、選択した1枚のカードがめくれるというものを作ってみました。

目次

デモ

html、CSS、画像ファイル

動きの実装

まとめ

デモ

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

グルグル回っているカードをクリックすると、選ばれたカードがめくれます。ただそれだけです。

html、CSS、画像ファイル

html

グルグルさせたいカードの枚数ぶん設置します。

css

カードの表示位置の指定のみで構いません。

ここで指定した位置から半径rの距離で回転します。

画像ファイル

image

カードの表と裏側の画像を用意します。裏側は連番で名前をつけてください。

動きの実装

それでは動きをつけていってみましょう!

今回はjQueryRotateプラグインを使用しています。

jQueryRotateプラグインのダウンロードはこちら

まずは必要な変数と配列を宣言しておきます。

変数の宣言をしたら配列kakudoに値を格納していきます。

表示するカードの枚数ぶん、1~360の間でランダムな数字を取得し配列に格納していきます。

ここで格納された数字でカードの初期位置が決まります。

img160708_1

位置を決めたらカードの配置と回転の処理を行います。

回転については、最初の位置を中心とし半径rの距離で円運動する動きと、jQueryRotateプラグインでカード自体が回転する動きの2種類を組み合わせています。

img160708_2

こちらのkaiten()をsetIntervalで繰り返します。

円運動については三角比の公式で位置を求め、dの値を変化させながら再配置を行うことで移動しているように見せています。

これで回転するカードの動きが完成したので、あとはカードを選択した時の動きを書いていきます。

クリックするとカードは真ん中へ移動し、他のカードは消えていきます。

移動のアニメーションが完了した時点で以下のカードをめくる関数を実行します。

まとめ

以上で完成になります!

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

カードがめくれた後に文字を出したりページ遷移したりで何か動きをつけてあげないと少し寂しい印象ですね。

それではまた。

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

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング
究極の間食|おやつの王様