Flashサイトなんかでたまに見かけることがあるサイト上でのページがめくれるような演出。
サイトのデザインコンセプトが「紙」を意識したものだったりした場合には
その世界観を表現するにはとても効果的な演出だったりします。

そんな「めくる」動作をjQueryで実装することができるプラグイン
「Viewbook」があったのでご紹介。

Viewbook – jQuery Plugin

Booklet – jQuery Plugin※2012/08/27 リンク先更新

基本的には、めくる対象(クリック対象)がページ全体になっていて
クリックするとスライドする間隔で次ページを表示します。

めくれる動作をデモ画面上で試してみると、、、

Viewbook – jQuery Plugin : see it work


画面右の「2」ページ目をクリックすると


ページがめくれる演出から


「3」「4」ページ目が表示されます。

オプションもさまざま用意されていて、
めくるスピードやeasingを使ってめくれる動きのタイミングを変化させたり、
クリック対象をタブ形式や矢印を表示したものに変えるなど、
いろいろとコントロールできるもよう。

example:動作パターンはこちらから

example:動作パターンはこちらから※2012/08/27 リンク先更新

少々動きがぎこちなく感じる部分もありますが(斜めにめくれるといいのだが…)
何かの際に参考になりそうです。

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

Related Posts

Comments (5)

  • HTML5でページをめくるエフェクトのチュートリアル「Page Flip Effect from 20thingsilearned.com」 | BlackFlag | 2011.02.04 18:29

    [...] eryを使ってページをめくるような演出をつけるプラグイン 「ページをめくる様な演出を実装できるjQueryプラグイン「Viewbook」」を紹介しましたが、 HTML5の<canvas>で同じようにページを [...]

  • yk | 2012.08.27 15:58

    前回のスライドショーの件、誠に有難う御座います。
    実装する事が出来ました。こちらのページを参考にし、カテゴリページを作成したいのですが、viewbookのzipfileなどが見つかりません。
    この様な際は、どの様に対処を行えばよいのでしょうか。
    基本的な事過ぎて、本当に申し訳ありませんが、ご教授頂けますと光栄で御座います。

  • BlackFlag | 2012.08.28 1:20

    >ykさん

    コメントありがとうございます。

    こちらの記事は約2年ほど昔のものだったので
    リンク先のプラグインページがもう存在していませんでしたね。。。

    再度調べてみたところ
    このプラグインは名前が変わって別のURLになっていたようなので
    記事内のリンクを更新しておきました。

    新たなページから内容の方
    確認してみてください。

    よろしくお願いします。

  • yk | 2012.08.31 14:35

    いつも本当に有難う御座います。
    返信が遅くなりまして、大変申し訳御座いませんでした。

    早速、組み込みに取り掛かってみたいと思います。
    BlackFlag様の様に知識、情報量、デザイン、実力も伴ったクリエイターになれるよう精進して参ります。
    本当に有難う御座います。

  • BlackFlag | 2012.09.02 18:03

    >ykさん

    お返事ありがとうございました。

    めくる動作のスクリプトは
    検索すると他にもいろいろ出てくると思いますので
    使いやすそうなのを選んで実装してみてください。

    まだまだ自分も未熟なクリエーターですが
    少しでもみなさんのお役に立つ情報を発信していけるようにがんばります。

    今後ともよろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

ページをめくる様な演出を実装できるjQueryプラグイン「Viewbook」

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR