Blog

iOS7みたいにクリックでそこからページが飛び出してくるような効果をjQueryで作ってみる

2013.12.03Cat:jQuery デザイナー

iOS7では、アプリのアイコンをタップすると、

そこからアプリのページが飛び出してくるようなアニメーションが展開されます。

ウェブサイトでリンクでページをとぶとき、

少しでもストレスを感じさせない方法としてこの効果が使えるのではないかと思い、

実際にページが飛び出してくることはなくとも、それっぽい感覚を感じられる効果ができないかと思い、

jQueryで作ってみました。

 

↓こちらが作ったもののDEMOです。

DEMO

 

 作り方

実際に行われているのは、

ボタンをクリックしたときに、そこから、四角い枠が、ページ全体に広がるというアニメーションを行うというものです。

 

↓実際のコードはこちら

HTML

 

JavaScript

 

仕組みは、

1.クリックしたときに、クリックした時のマウス座標を取得

2.クリックした場所に、大きさゼロで白い枠を設置

3.白い枠を、ページ全体に向けて拡大するアニメーションを行う

4.アニメーションが終わったら、リンクを実行

というものです。

 

リンクのときのストレス感を減らしたり、

ちょっとしたインパクトを与えるのにいいかもしれません。

Author Profile

ninomiya
ninomiya

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

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

Archive

ページTOPへ