Blog

Pathのアプリのメニューぽい動きをjQueryで作ってみる2

2012.09.12Cat:jQuery デザイナー

前回の続きで、こちらのアプリのメニューの動き再現に挑戦しました

https://path.com/

 

↓こちらが今回できたもの↓

DEMO

 

アイコンをPathに使われているものに近いものに変えました。

アイコンは、こちらのサイトよりいただきました。

http://salleedesign.com/resources/mimi-glyphs/

左が前回で、右が今回。

 

動きのほうも変えました。

前回は大きなボタンを押したときに、大きなボタンに動きが付いていなかったのですが、

45度回転させて、実際のPathの動きと同じにしました。

 

+でメニューを出して、×でメニューを閉じるという動きを、45度の回転だけで表現しているのが、

すごいと思います。

 

大きいボタンを動かすときに使ったコードはこちら

 html

 

javascript

回転のアニメーションは、前回と同様にjquery-animate-css-rotate-scale.jsを使いました。

小さいメニューボタンの動きも調整しました。

 

今回は小さいメニューボタンの動きを次のコードのように、

繰り返し処理でまとめようとしましたが、

セレクタの調整がうまくいかず、回転のアニメーションが動作しなかったので、

断念しました。

 

実際のPathでは、小さいメニューが飛び出すときに、

1つずつ時差をつけて出てくるのですが、

今回はその動きを再現することができませんでした。

 

今後、動きに時差をつける方法がわかれば、

またやってみたいと思います。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ