ライセススタッフが書くブログ。

HTML・CSS・jQueryで絵本の様な動きを!

| Web制作のこと

 

絵本って良いですよね。

私も子供が出来てから絵本をよく読むようになったのですが、日々の多忙な現実世界により忘れかけていた新鮮でピュアな気持ちを取り戻させてくれます。子供に戻りたい…。

もう、毎日コードなんて見たくねーよ!

 

さて、とても面白いコードを見つけました。

 

HTML・CSS・jQueryで、絵本のようにページがめくれるコードの紹介です。

Flashで作られたデジタルブックによく見られたあの動きです。

 

Page Turner

page-turner

DEMO

 

この記事は、いつもお世話になっている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ちゃんが描いた絵本、

 

「メグちゃんとふしぎなともだち」

 

でした。

 

絵本の続きが読みたい方、購入したい方はこちらまで!

癒されますよ〜!(✧≖‿ゝ≖)

 




Webを作るのは人。

INFORMATION

raisez(ライセス)に興味を持った方は、是非チェックをしてください。

Webを楽しむのは人。

CONTACT

Web制作、Webビジネスのご相談はお気軽にご連絡ください。

お問い合わせ
TOPへ戻る