【17選】要素をひっくり返す動作や本をめくる動作を実装するjQueryプラグイン

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんばんは。今回のtips【17選 要素をひっくり返す動きや本をめくる動きを実装するjQueryプラグイン】です。海外ブログからとても便利そうなプラグインを見つけたのでメモです。ちなみにこの「ひっくり返る」という動きは、「くるっと要素が回転し背面が見える」という動きになります。

Flip – 要素をひっくり返す動き

以下、個人的に使えるなぁと思った順番です。一部pluginを使わない物も含まれています。これらの動きを応用した「本をめくるアニメーション」は続けてリストとしています。
 

1.Flippy

動きがスムーズなプラグインです。Chrome,Firefox,Opera,OperaIE8に対応しているそうです。ただし要素を変形させる訳ではないようですので細かい部分でしたら他のプラグインが有利かもしれません。


 

2.Flip!

上のflippyと挙動等ほとんど変わりません。対応はFirefox, Chrome/Chromium, Opera, Safari and even IE (6,7,8)と幅広いので困ったときにはこのプラグインを選択すれば間違いなさそうです。


 

3.Sponsor Flip Wall With jQuery & CSS

若干設置が手間ですがアニメーションや細かい動きにいおいてはかなり優良なプラグインかと思います。


 

4.CSS 3D TRANSFORM CARD FLIP ANIMATION

要素の変形にも対応しています。transformを使っているのでOpera等では動作しませんが代替のアニメーションでカバーされています。


 

5.Create a CSS Flipping Animation

jQueryPluginではなくCSSによるFlipの動作、実装方法を紹介しています。軽い上に一番動きがいいので…古いプラウザを無視できればこの方法が一番良いかと思います。


 

6.flipCounter 1.2

フリップによるカウンターが実装できます。Safari 5, Firefox 3.6, Chrome 10 and Internet Explorer 8に対応。


 

7.Image Flip Illusion Using jQuery

画像をひっくり返すプラグイン。jQueryのバージョンが古いのが難点。


 

8.Portfolio Flipping Slider Using jQuery & CSS3


 

9.QuickFlip 2 for jQuery


 

10.JQuery Flip


 

11.rotate3Di


 

12.rotate3Di


 

Flip – 本をめくる動き

ここからはフリップがさらに発展した「本をめくる動作」を実現させるプラグインです。

1.Responsive Flip Book powered by jQuery

有料ですが、動きはスムーズでiPad等のディバイスにも対応しています。これさえ有れば敵無しというようなプラグインです。動作は若干重いかも。


 

2.WowBook, create ebooks with page flip


 

3.jPageFlip


 

4.turn.js


 

5.jQuery Booklet

以上になります。

 
参照:10+ jQuery Flip effect plugin with examples
  :10 Awesome Page-Flip jQuery Plugins