Webサイトで本をめくるように表示することができるJQueryプラグインturn.jsを試す

Web制作をしているといろいろな要望を受けることがあります。Webサイトで本をめくるようにコンテンツを見せたいという要望があったときにさて、どんな方法があるだろうと思いました。
うっすらとJQueryのプラグインがあるんだろうなぁと思って検索をしてみました。いくつか見つかったのですが一番エフェクトが凝ってるなぁと思ったJQueryプラグイン「turn.js」を試してみました。

Webサイトで本をめくるように表示することができるJQueryプラグインturn.jsのサンプルを見る

http://www.turnjs.com/

このturn.jsのWebサイトから実際に本をめくるような動きを確認することができます。

並んでいる本をクリックして

ページの上下のどちらかをクリックしてめくると、このようにめくる途中、次のページが見えるようなリアリティのあるめくれ方をします。

写真だけでなく、

このようなHTMLも本の形に整形できます。テキストなので、chromeなら

右クリックして 日本語に翻訳 すれば

日本語で読むこともできます。

turn.jsをダウンロードしてHTMLに組み込んでみる

turn.jsをダウンロードしてHTMLに組み込んでみます。

http://www.turnjs.com/

トップページで Download をクリック

5396f77366f55-turnjs4.zip というファイルがダウンロードされるので、解凍します。

解凍すると 5396f77366f55-turnjs4 というフォルダの中に、turnjs4 というフォルダができています。

この turnjs4 フォルダをHTMLを作りたいディレクトリーにコピーします。

turn.jsの部分のコードは 本のようにページをパラパラめくる事ができるjQueryプラグイン「turn.js」! こちらのコードを参考にさせていただきました。ありがとうございます!

写真の本を作ってみようと思ったので、

Webサイトで使う素材をいろいろなサイトで探して使っています。今回は「商用利用可能」「センスが良い」「高画質」「無料」の写真素材サイトunsplashについて書きます。

こちらの記事にも書いた unsplash.com の写真を12枚使ってみました。縦長にしたかったので、

最近、フリー写真を提供している unsplash.com の写真を使わせていただくことが多いです。とてもきれいな写真が版権フリーで利用できるので助かっています。 スライダーで画

縮小革命を使って



498×646ピクセル
の大きさを指定して作ってみました。小さくした画像はHTMLを作るフォルダにimgという名前のフォルダを作ってそこにいれておきます。

コードは、

このように書いて book.html という名前で保存しました。

book.html をブラウザで表示してみる

作った book.html をブラウザで表示してみます。ローカルPCではFirefoxもしくはchromeもしくはIE11で確認することができました。WebサイトだとEdgeでも表示できると思います。

book

ページの上下をクリックしてめくることができました(^^)/

まとめ:オプションや指定の仕方でもっと凝ったことができそう

このサンプルはとても単純な形ですが、先ほどダウンロードした turnjs4 フォルダには samples というフォルダがありもっと複雑な表現をしたサンプルが入っています。

コードは難しそうですがサンプルのHTMLに全部書いてあるのでまねしながらやってみると同じように複雑な本の表現ができるのではないかなと思いました。高級なホテルや高級な商品のWebサイトにカタログのようにおいて見せるのにぴったりな感じの素敵なエフェクトができそうですよ(^^)/

兎本美佳
ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/ 無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る