[JS]パネルがアニメーションでフリップするスクリプト -Sponsor Flip Wall

パネルがくるっとアニメーションでひっくり返るスクリプトをTutorialzineから紹介します。

Sponsor Flip Wall With jQuery & CSS
デモページ

デモではグリッド状に配置されたパネルにマウスでフォーカスするとハイライトされ、クリックすると各パネルはくるっとひっくり返ります。

ひっくり返ったパネルには、個別のテキストやリンクが配置されています。

各パネルはdiv要素で配置されており、ハイライトのエフェクトはCSSでホバー時にボックスシャドウを適用しています。

CSS

ボックスシャドウのスタイルシート

上記のひっくり返るフリップのアニメーションはjQueryをベースにして実装されています。

各パネルのテキストやリンクなどのデータはPHPとデータベース（MySQL）を使用してXMLで管理されており、スポンサーの追加や変更なども簡単に行えるようになっています。