「Page Turner」で、めくるという表現を体験してみる。

150516_006
 
先日、こちらのブログで、「Page Turner」というスクリプトというか、コードというか、そういうものを見つけまして、自分でもちょっと触ってみたくなりました。

150516_005
 
これは、めくるという表現をするためのものだと思うのですが、この画像にマウスを載せた時の「フワッ」というページの上がり具合が、とても面白くて画像を自分の撮影した写真と差し替えたりしてみました。
 
150516_004
 
最初、FireFoxで確認をしてみたところ、どうしても表紙(最初に表示されている画像)がめくられない状態になる不具合があり、Chromeで確認したところ、ちゃんとめくる動作がされるので、実際に使うには、若干修正が必要かもしれません。
 
150516_003
 
また、モバイル環境では画像が重たいのと、やはり表示の不具合があり(iPhoneのSafariで確認したのみですが)、こちらの方は一筋縄ではいかないかもしれません。
 
150516_002
 
とにかく、こういったUIを手軽に実装できるというのは、とてもありがたいし、楽しい体験でした。
実際になにか作ってみたくなりますね。
 
150516_001

SNSでもご購読できます。

記事検索

記事分類