HTML・CSS・jQueryで絵本の様な動きを！
絵本って良いですよね。
私も子供が出来てから絵本をよく読むようになったのですが、日々の多忙な現実世界により忘れかけていた新鮮でピュアな気持ちを取り戻させてくれます。子供に戻りたい…。
もう、毎日コードなんて見たくねーよ！
さて、とても面白いコードを見つけました。
HTML・CSS・jQueryで、絵本のようにページがめくれるコードの紹介です。
Flashで作られたデジタルブックによく見られたあの動きです。
この記事は、いつもお世話になっている9ineBB様の記事を参考にさせて頂きました。
http://9-bb.com/page-turner/
Page Turnerのページでソースが公開されていますが、早く遊びたい私は9ineBB様の元記事ページからファイルをダウンロード。この状態から自分好みの絵本にする為に行った作業は、以下の2つのみ。
（1）CSS上で画像差し替え。
ダウンロードしてきたファイルの中の、css/style.cssを開きます。
180行目〜243行目までのbackground-image:url()を、自分で用意した画像に差し替えます。
（2）ページのwidthとheightの調整。
css/style.cssの41行目のwidth、42行目のheightを、差し替える画像に合わせて調整。
リキッドデザインなので、値はViewportパーセンテージです。
完成したDEMO
（著作権上、2ページまで！）
InDesignやデジタルブック制作の知識がなくとも、ちょっとWeb制作の知識があれば、
この様なものがWeb上で表現出来ちゃいますね。
絵本関連の案件や、ユニークなサイトデザイン提案の参考になると思います。
今回テストで使用した絵本は、弊社の絵本作家のmowmakuちゃんが描いた絵本、
「メグちゃんとふしぎなともだち」
でした。
絵本の続きが読みたい方、購入したい方はこちらまで！
癒されますよ〜！(✧≖‿ゝ≖)
