jQueryでiOS7のようにアイコンを選択したときに背景を拡大させる方法を考える
iOS7では、アプリのグループを選択したときに、グループのアイコンと一緒に背景も拡大されていて、
アイコンが近づいてくる感じをより強く感じることができます。
この動きがかっこいいと思ったので、
Webサイト上でもできないかと思い、jQueryを使ってやってみました。
↓作ってみたもの(Firefox以外推奨)
方法
今回は、ある要素がhoverになったときに、
bodyに設定した背景画像を拡大させるようにします。
HTMLは普通に組みます。
ただ今回の方法ではhtmlとbodyの高さを100%に設定する必要があるので、一画面内に閲覧する要素が収まっている必要があります。
CSSの設定をします。
|
1 2 3 4 5 6 7 8 | html, body{ width:100%;height:100%;} body{ background-image: url(../images/bg.jpg); background-repeat: no-repeat; background-position: center center; background-size: cover; /*背景画像の大きさをbody要素いっぱいに表示*/ overflow: hidden; /*画面外にはみ出した部分を隠します*/ } |
htmlとbodyのwidthとheightを100%に設定します。
bodyに背景画像を指定し、background-size: coverで、body要素いっぱいに背景画像を表示するように設定します。
bodyのoverflowは、hiddenにする必要があります。
jQueryで動きをつけます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function(){ $("nav>ul>li").hover(function(){ //対象の要素をhoverしたときに実行 $("html").animate({ //html要素を拡大し、拡大してよってしまう分だけ左に移動させる "width" : "125%", "margin-left": "-12.5%" }, 500); },function(){ //元に戻す $("html").animate({ "width" : "100%", "margin-left": "0" }, 500); }); }); |
今回の方法では、html要素を拡大することによって 背景を表示する領域を拡大し、
結果として背景画像が拡大されて表示されるようにしました。
背景を設定しているbody要素を拡大すれば背景画像も拡大されるように思いましたが、
body要素を拡大しても背景画像の大きさはそのまま固定されてしまい、うまく行きませんでした。
そこでbody要素を覆っているhtmlを拡大してみたところうまく行ったので、この方法を使いました。
ただこの方法だと、htmlを拡大したときに横方向のスクロールバーが出てしまうので、bodyにoverflow:hiddenを設定しています。
DEMOではhoverした要素も拡大して、より動きをiOS7に近づけてみました。
カテゴリーで商品検索をするときなどに、この方法で直感的に操作できるのではないかと期待しています。
Author Profile
SHARE
