Webサイトで本のページをめくるようなエフェクトを簡単につけられる！StPageFlipが便利

StPageFlipという、本のページをめくるようなエフェクトを簡単につけられるライブラリを見つけました。

どんなライブラリ？

実際の動作を動画で見てみましょう。

使ってみよう

導入

npm install page-flipで導入できます。

あるいは、こちらのページ右側のReleaseから、page-flip.browser.jsをダウンロードしてもOKです。

これね

コードを書く

とりあえず最小構成で書いてみたのがこちら！

基本的には公式のページを見ながら書いていけば簡単に動かせますが、いくつかハマりポイントがあったのでまとめておきます。

本の見せ方を改良する

最初のページは本が閉じてカバーだけ見えた状態にしたい

main.js内のshowCoverで設定しています。

これがdefaultではfalseなのですが、その場合、開いた状態でスタートします。

こんな感じで。

trueに設定することで、片面状態でスタートできます。

ページの硬さを選ぶ

カバーと裏表紙には、HTML側でdata-density="hard"をつけておくのがおすすめ。

ページが捲られる時にふにゃんとせず、ハードカバーの表紙をめくっているような見え方になります。

雑誌みたいな柔らかい表紙のイメージなら、data-density="soft"にしておいてもいいのかも

本を机の上に置いているっぽく見せる

公式サンプルはこういう感じで、最初のページと最終ページが木の素材のようになっています。

机か何かの上に置いてあるように見えますね。

これは、本のページの親要素にあたるdiv（上記コードでいうところのid="book"）に対してbackgroundを指定すればOK。

例えば、上記のコードで、

.book {

  background-color: black;

}

とセットすれば、こうなります。

画像をセットしたいなら、background-imageを指定すればOK。

のっぺりしたページをよりリアルに見せたい

いい感じのstyleを、奇数・偶数ページに交互につけましょう。
上記コードでいうところのp-rightとp-leftクラスに当たります。

box-shadowがつくことで、のっぺりしたページでなく、より本っぽさが出ます。
shadowの濃さやピクセルなどを調整して、お気に入りの影にしてみてください。

box-shadowない時

ある時

HTMLでページを作るのでなく、画像をそのままページ化したい

main.jsの中のpageFlip.loadFromImagesの部分を、以下のコードに差し替えます（画像のパスは、適宜直してください）。

pageFlip.loadFromImages([
 "./assets/1.jpg",
 "./assets/2.jpg",
 "./assets/3.jpg",
"./assets/4.jpg",
]);

するとこんな感じで写真集風にもできます。

ただ、難点として、この手法でいくと、canvasに書き出された状態で出力されるので、後からobject-fitを使ってトリミングする、みたいなことができないです。

正方形のページに対して横長写真を使えば、
こんな感じで細くなってしまう

そのため、main.jsで指定しているキャンバスサイズ比と、準備する画像のサイズ比を合わせておくのがおすすめです。

スマホではどう見えるか？

スマホでも体験可能でした。

ただ、ページが1ページずつしか表示されないので、本らしさは少し減ります。

試しに横画面にもしてみたのですが、1ページずつ表示は変わらず。

しっかり体験したいのであれば、PCから見るのが良さそう。

まとめ

StPageFlipを使えば、本をめくるようなUIを簡単に実装できる、というお話でした。

これはそのうち使いそうな予感。