Blog

jQueryでiOS7のようにアイコンを選択したときに背景を拡大させる方法を考える

iOS7では、アプリのグループを選択したときに、グループのアイコンと一緒に背景も拡大されていて、

アイコンが近づいてくる感じをより強く感じることができます。

この動きがかっこいいと思ったので、

Webサイト上でもできないかと思い、jQueryを使ってやってみました。

 

↓作ってみたもの(Firefox以外推奨)

DEMO

 

方法

今回は、ある要素がhoverになったときに、

bodyに設定した背景画像を拡大させるようにします。

HTMLは普通に組みます。

ただ今回の方法ではhtmlとbodyの高さを100%に設定する必要があるので、一画面内に閲覧する要素が収まっている必要があります。

 

CSSの設定をします。

htmlとbodyのwidthとheightを100%に設定します。

bodyに背景画像を指定し、background-size: coverで、body要素いっぱいに背景画像を表示するように設定します。

bodyのoverflowは、hiddenにする必要があります。

 

jQueryで動きをつけます。

今回の方法では、html要素を拡大することによって 背景を表示する領域を拡大し、

結果として背景画像が拡大されて表示されるようにしました。

背景を設定しているbody要素を拡大すれば背景画像も拡大されるように思いましたが、

body要素を拡大しても背景画像の大きさはそのまま固定されてしまい、うまく行きませんでした。

そこでbody要素を覆っているhtmlを拡大してみたところうまく行ったので、この方法を使いました。

ただこの方法だと、htmlを拡大したときに横方向のスクロールバーが出てしまうので、bodyにoverflow:hiddenを設定しています。

 

DEMOではhoverした要素も拡大して、より動きをiOS7に近づけてみました。

カテゴリーで商品検索をするときなどに、この方法で直感的に操作できるのではないかと期待しています。

 

 

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ