jQueryRotateこんにちは、稲垣です。明けましておめでとうございます。今年もどうぞよろしくお願いいたします。新年明けて1本目のブログになるので、今回はjQueryでおみくじを作成してみました。目次デモhtml、CSS、画像ファイル動きの実装まとめデモまずは完成イメージです。ランダムで出てきます。src="img/btn_start.png"></div></div>#bouと#iconはランダムの結果に応じてimgタグを後から挿入します。absoluteで位置を指定しています。おみくじの箇所の構造は下図のようになります。各パーツを準備します。結果の棒とアイコンのファイル名には同じ番号をつけておきましょう。動きの実装それでは動きの部分を作っていきます。jQueryRotateとjQueryEasingPluginを使用するので先に読み込んでおきましょう。jQueryRotateのダウンロードはこちらjQueryEasingPluginのダウンロードはこちらまずはおみくじの結果を決めましょう。0~4の間で乱数を取得し、その数字を基に棒とアイコンの画像を配置します。+'.png">');続いてスタートボタンをクリックした後の動きを書いていきます。ボタンが消えたらおみくじの箱が移動、移動したら棒が出て来るアニメーション、棒が出てきたらアイコンが出現という様に、一つのアニメーションが完了した時点で次の処理を実行させていきます。"easeOutBounce");});});});});それぞれのアニメーションのスピード調整やdelay()を使ってタイミングの調整を行ったら完成です。まとめ最後にコードをまとめて載せます。Viewで360°コンテンツをサイトに埋め込むA-Frameを使ってWebVRを実装してみよう無料で使えるJavaScriptやCSSなどのCDNサービスまとめ美しすぎるカードゲームjQueryで作る神経衰弱gulp4に移行するためにタスクを書き換えてみたマグネッツとは?福岡でWEB制作や中小企業様の集客支援などを行っている会社です。