【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』

moleskine-notebook-with-jquery-booklet

この記事は約 1 分で読めます。


Flashを使わなくても簡単に本をめくるような効果が得られるAjax。

本・パンフレットをめくるような見せ方でサイトに表示させたいというご要望を頂きますが、やはりFlashを使ったりするとその制作費に結構な金額がかかってしまいます。
そこで思ったのが、Flashを使わずにそのような効果が得られないかということで、検索して探しました!

そうすると結構早く「Moleskine Notebook with jQuery Booklet」というjQueryを利用したツールを発見!
Flashでないので、Flash制作程の手間がかからない!っというか、設置は簡単!
下記の設置方法をご参考にして頂ければと思います。

【Ajax】本をめくるような効果が簡単に作れる『Moleskine Notebook with jQuery Booklet』

【1.ダウンロード】
まずは下記ページより、「DOWNLOAD」ボタンをクリックして、必要ファイルファイルをダウンロードします。
http://tympanus.net/codrops/2010/12/14/moleskine-notebook/

【2.タグ内の設定】
下記のタグを「タグ内」設置します。

 

【3.タグ内の設定】 下記のタグを「タグの直前」設置します。

【4.本の表示部分のソース】
本を設置させたい部分に下記のタグを設置します。

 

上記タグの6行目から12行目を、同じ要領で繰り返し書き込めば、ページ数が増えていきます。

今回はこちらの抽象画家小屋哲雄様のサイトに設置させて頂きました。

コンテンツマーケティングの教科書7ステップガイド

成功しているECサイト店長は知っている
コンテンツマーケティングで継続的なネット集客を実現し、売上アップに成功するための最新の方法を理解できます!

STEP-1 コンテンツマーケティングとは?
STEP-2 “コンセプト”と“ペルソナ”を設定する
STEP-3 集客用ブログを構築する(Wordpress編)
STEP-4 集客用ブログを構築する(SNS活用編)
STEP-5 無料オファー設定・LPの作成方法
STEP-6 ステップメールでファン・顧客を作る方法
STEP-7 リピーターを獲得するメールマガジン活用方法

ダウンロード

最新の記事情報が取得できます。