iOS7みたいにクリックでそこからページが飛び出してくるような効果をjQueryで作ってみる
iOS7では、アプリのアイコンをタップすると、
そこからアプリのページが飛び出してくるようなアニメーションが展開されます。
ウェブサイトでリンクでページをとぶとき、
少しでもストレスを感じさせない方法としてこの効果が使えるのではないかと思い、
実際にページが飛び出してくることはなくとも、それっぽい感覚を感じられる効果ができないかと思い、
jQueryで作ってみました。
↓こちらが作ったもののDEMOです。
作り方
実際に行われているのは、
ボタンをクリックしたときに、そこから、四角い枠が、ページ全体に広がるというアニメーションを行うというものです。
↓実際のコードはこちら
HTML
|
1 2 3 4 5 6 7 8 9 10 | <body> <h1>HOME</h1> <ul> <li id="home"><a href="home.html"><span class="cover">HOME</span></a></li> <li id="about"><a href="about.html"><span class="cover">ABOUT</span></a></li> <li id="menu"><a href="menu.html"><span class="cover">MENU</span></a></li> <li id="staff"><a href="staff.html"><span class="cover">STAFF</span></a></li> <li id="access"><a href="access.html"><span class="cover">ACCESS</span></a></li> </ul> </body> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | $(function(){ var tgElm = $("ul li a"); tgElm.click(function(e){ var clickElm = $(this); //クリックした場所のマウス座標を取得 var mx = e.pageX; var my = e.pageY; $("html, body").css("height", "100%"); //bodyの最後尾にアニメーションに使う四角い枠を設置 $("body").append("<div class='clickCover'></div>"); //四角い枠をクリックした場所に設置 $(".clickCover").css({ "position" : "fixed", "top" : my + "px", "left" : mx + "px", "width" : "0%", "height" : "0%", "background" : "#fff", "opacity" : "0" // クリックした場所から、ページ全体に向けて、四角い枠を拡大 }).animate({ "top" : "0", "left" : "0", "width" : "100%", "height" : "100%", "opacity" : "1" }, 300, function(){ //拡大が終わったら、リンク location.href = clickElm.attr("href"); }); return false; }); }); |
仕組みは、
1.クリックしたときに、クリックした時のマウス座標を取得
2.クリックした場所に、大きさゼロで白い枠を設置
3.白い枠を、ページ全体に向けて拡大するアニメーションを行う
4.アニメーションが終わったら、リンクを実行
というものです。
リンクのときのストレス感を減らしたり、
ちょっとしたインパクトを与えるのにいいかもしれません。
Author Profile
SHARE
