Sharable

システム&ウェブのシェアラブル

[Ideemag] ulの中身グルグル回して表示しつつ、同時に現在表示しているliの位置を示す [jquery] [jqm]

2012年7月15日

フランス語のjquery mobileサイトを触りました。フランス語っていうだけで自分のトラウマを刺激されて分かり易さの評価を下げてしまいました、、、。画像はGoogleが勝手に翻訳してくれたものを載せています。まぁでもオレンジを基調としたかわいいサイト。操作性も良くて、とくに検索はすごい早かった!パパッとでてきた。検索件数が少ないからかもしれないけど。検索のロジック自体はphpだったので、今回は見れませんでした。残念。あと、いまいち導線が分からなかった。目的も分からなかった。ので、導線の評価も低いです。

きらめきポイント

ということで今回のきらめきポイントは、トップページのグルグル回るul(li)と、liと連動したバブル(●)の操作についてです。いたって簡単なんですが、ulとバブルの両方にアニメーション処理施すだけです。でも一応ソースを見てみます。

https://gist.github.com/3114420.js?file=回るliと踊るバブル

cssのtopの値を操作することで縦方向の動きを演出

41行目あたりからtopの指定をしているところがあります。ここでtopの値を割り増ししておいて、52行目あたりで割り増し分を差し引く動作をアニメーションすることで、縦方向への動きを演出しているようです。

バブルの方はもっと単純です。61行目以降で、liの現在地に該当するナンバーを取得して、そのナンバーに該当するバブルのCSSを変更するだけです。

今回の本サイトは、http://www.ideemag.com/mobi/でした。

このエントリーをはてなブックマークに追加