ペラペラめくれる「BookBlock」の使い方【絵本も!カレンダーも!パラパラ漫画も!】【jQuery】

kindle JavaScript

こんにちは、なっちる先生(@nacchi_jagariko)です。

現在フリーランスエンジニアとして活動しています。

今回は、絵本をめくるみたいにペラペラめくれる動きを実装できる「BookBlock」の紹介になります〜。

こんな感じのペラペラです。

jsでできるの!?

この記事は以下のような人向けです。

ペラペラしたい!!!

では、参りましょう〜。

スポンサーリンク

 こんなものが作れるよ!

冒頭でも紹介したのですが、BookBlockを使って、このページような動きが実装できます。

具体例① 絵本でペラペラ

具体例② カレンダーのペラペラ

具体例③ パラパラ漫画みたいなペラペラ

ペラペラ動きますねぇ〜。

いろんな面白いことができそうです!

以下で具体的に実装方法を説明していきます。

とっても簡単に実装できるので試してください〜。

Let’s ペラペラ!!!

スポンサーリンク

 BookBlockの使い方

では、早速ペラペラの実装方法について説明していきます。

全体の手順としては、主に以下の4ステップになります。

  • jsとcssファイルをダウンロード
  • htmlを書く
  • bookblockのjsを書く
  • cssでスタイル付けをする

順番に説明していきます。

ステップ① jsとcssファイルをダウンロード

まず、公式のサイトからjsとcssファイル達が入ったソースをダウンロードします。

↑「Download Source」をクリックすると、zipファイルがダウンロードされます。

たくさんのファイルがダウンロードされますが、最小限必要なファイルは以下の4つになります。

  • 「css/bookblock.css
  • 「js/jquery.bookblock.js
  • 「js/jquerypp.custom.js
  • 「js/modernizr.custom.js

ここに外部ファイルでjQueryもは取り込んで行くよ!

以下、これらをhtml内で取り込みます。

ステップ② htmlを書く

必要なjsとcssを取り込む

ステップ①で記述したように必要なjsとcssをhtml内で取り込んでいきます。

head内(場合によってはbody閉じタグ前)に以下のコードを追加します。

※こちらの公式のデモサイトでは、bodyの閉じタグ前で読み込んでいるファイルもあるのですが、筆者が試したところhead内にすべて書いても正常に動きました。

ペラペラ部分のhtmlを追加する

お次は、以下のペラペラ部分のhtmlを追加します。

カスタマイズしたい場合は、以下のポイントをおさえておいておけば大丈夫です。

  • 「bb-bookblock」クラスは必須
  • 「bb-item」クラスは必須

なお、「bb-item」の中身に<img>が入っていますが、ここは個人の好きなようにしてください。

絶対画像が入らなくちゃとかもないよ!

ステップ③ bookblockのjsを書く

ペラペラ部分のjsを追加する

まず、以下のペラペラ部分のjsを追加します。

idのところに「bb-bookblock」クラスのid名が入る感じですね。

上のシンプルなコードでは、デフォルトのペラペラになりますが、オプションをつけることでいろいろとカスタマイズできるようになります。

どのオプションがどういう動きにつながるのかは、コメントでいろいろと書いているので参考にしてみてください。

コメントアウト長っw

オプションを付けるときは、「bookblock(」の後に「{}」を忘れないようにね!

クリック部分のjsを追加する

お次にクリック部分のjsを追加します。

いろいろとカスタマイズできそうですが、基本的な書き方は上のようになります。

ステップ④ cssでスタイル付けをする

最後にcssでスタイルを付けます。

cssをつけるところと言うと、

  • ペラペラ部分
  • ボタン部分

の2つぐらいになると思います。

ペラペラ部分については、「#bb-bookblock」にスタイル付けをするか、「bb-item」内の大きさを調整することで綺麗に整います。

ボタンについては、普通にクラスを付けてスタイル指定してしまえば完了です。

参考までに、具体例①のcssを貼り付けておきます。

スポンサーリンク

 まとめ

以上、絵本やカレンダー、パラパラ漫画みたいなペラペラの動きが実装できるBookBlockの紹介でした〜。

結構簡単に実装できますね!

BookBlockを使ってぜひ面白いサイトを作ってみてください〜。

以上で、なっちる先生の授業を終わります。

素敵なプログラミングライフを〜!

JavaScript
スポンサーリンク
なっちる先生をフォローする
なっちる先生
タイトルとURLをコピーしました