Categoryページめくり

めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』

今回は、丸いめんこのようなイメージ画像をひっくり返しながらクルクル切り替えるスライドショーを紹介します。(めんこといっても若い人にはわからないかもしれませんが、他に良い例えが浮かばなかったので。)

では、サンプルを作ってみましたのでご覧下さい。

『Flipping Circle Slideshow』サンプル


最近はこのようなサークルのカタチが流行っているようですね。設置も簡単ですので、活用してみて下さい。

→「めんこのように丸い画像がクルクル回るイメージスライドショー『Flipping Circle Slideshow』」の続きを読む

リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」


3D Book Showcase

今回は、新しいオンライン書店のサイトにも応用できそうなリアルな本のショーケースの紹介です。本の情報とともに、立体的にリアルな動きの本が表示され、印象的な演出が実現できます。

ユーザーに新しい体験をしてもらうことで、紹介している本に興味を持ってもらえるような個性的なオンライン書店のサイトが作成できるかもしれません。

サンプルを作ってみました。

『リアルな本を再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」サンプル』


※古いブラウザでは正しく動作しませんので、ご注意下さい。

(サンプルの本の表紙などは、サンプル用にオリジナルで製作していますので、このような表紙の本は実在しません。「葉隠」「武士道」「五輪書」の本自体は様々な出版社から出ています。)

本のショーケースになっているソース部分の仕組みが理解できると、導入は難しくないです。レスポンシブ対応になっているので、色々な画面サイズで自然に閲覧できるのも嬉しいですね。

→「リアルな本の動きを再現した本のショーケース。新しいタイプのオンライン書店にも。「3D Book Showcase」」の続きを読む

絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」


Fullscreen Pageflip Layout

本をめくるようにページ送りができて、スマートフォンなどディスプレイの大きさに合わせて表示させたいと場合は、こちらの「Fullscreen Pageflip Layout 」を利用すると良さそうです。

ぺらぺらの紙をめくるというよりは、絵本のような厚みのある紙をめくっているような感じが実現されています。

サンプルを作ってみました。

→ 絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」サンプル

※IE8など古いブラウザではアニメーションは動作しません。

次のライブラリーやjQueryプラグインを組み合わせて作ってあります。
  1. BookBlock by Pedro Botelho
  2. Custom jQuery++ by Bitovi
  3. jScrollPane by Kevin Luck
  4. jQuery Mouse Wheel Plugin by Brandon Aaron
  5. Custom Modernizr (peek inside to see what this build includes)
難しそうですが、ソースを一式配布してあるのでそのソースを利用してコンテンツを変更すれば簡単に実現できます。

→「絵本をめくるようにページがめくれてレスポンシブ対応の「Fullscreen Pageflip Layout 」」の続きを読む

ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」

turn.js

以前、画像を本をめくれるようにみれるjQueryプラグインである「FlipPage」をご紹介しましたが、今回ご紹介する「turn.js」はまるでFlashで作ったかのようにリアルな本のページを実現しています。しかも、たった6Kという軽さ。

HTML5とCSS3で作られているようで、IE8以前では作動しないのが残念ですが、将来FlashからHTML5が主流になる可能性を考えると期待大です。

その他のFirefoxなどのブラウザ、タブレット端末やスマートフォン端末には対応しています。

サンプルはこちら。ページの端をクリックするか、ドラッグするとページがめくれます。

→ ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」サンプル


jQueryプラグイン「turn.js」の使い方は続きをどうぞ。

→「ページをめくり効果が美しい。雑誌や本のようにページをめくれるjQueryプラグイン「turn.js」」の続きを読む

iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」

今年はスマホ元年といわれるほど、iPhoneやAndroidなどスマホやiPadなどのタブレットが一気に吹き出すように浸透した一年になりましたね。

おかげで、PCでは縦スクロールが当たり前だった頃に比べて横スクロールさせるUI(ユーザーインターフェイス)が身近になってきました。

jQueryを使用して、簡単に全画面横スクロールで雑誌風にサイトをみせることができるのがこの「treesaver」。スマートフォンにも対応しているので、iPhoneなど指で左右にスクロールさせて表示させたい時に便利です。しかも画面の大きさによって、自動的にレイアウトを変更してくれます。

「treesaver.js」はPython製、HTML5/JavaScript用のオープンソース・ソフトウェアです。テキストや画像、動画と言ったメディアを織り交ぜた電子雑誌を作ることができます。

この機能を文字では説明しきれないので、紹介の動画をご覧ください。



サンプルを作ってみました。こちらをどうぞ → 「treesaver.js」サンプル

→「iPhone、iPad、PC対応!雑誌風に横スクロールさせて記事をみせることができる「Treesaver.js 」」の続きを読む

画像を本をめくるようにみれるJQueryプラグイン「FlipPage」

画像を本をめくるように見せる方法は、Flashを使ったり、複雑なJavaScriptでプログラムを組んだりと面倒でしたが、簡単にJQueryで表現できるようになりました。

FlipPage: Tournez les pages sur votre iPad !

ということで、こんなかんじになります。

→ 画像を本をめくるようにみれるJQueryプラグイン「FlipPage」サンプルページ


iPhone 3G / iPhone 3GS / iPad 1 / iPad 2 – Android – Firefox 6 – Firefox 7 Beta – Safari – IE9に対応しているようです。iPhoneなどでもタップでページをめくることができます。

画像を本をめくるようにみれるJQueryプラグイン「FlipPage」の使い方は続きをご覧下さい。

→「画像を本をめくるようにみれるJQueryプラグイン「FlipPage」」の続きを読む