【17選】要素をひっくり返す動作や本をめくる動作を実装するjQueryプラグイン
どうもこんばんは。今回の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